Utility Types 타입스크립트에서 제공하는 여러가지 전역 유틸리티 타입 참고 Utility Types Documentation - Utility Types Types which are globally included in TypeScript www.typescriptlang.org Partial TYPE의 모든 속성을 선택적(?)으로 변경한 새로운 타입 반환 Partial interface IUser { name: string, age: number } const userA: IUser = { // Error. age 속성 필요 name: 'A' }; const userB: Partial = { name: 'B' }; // Partial 과 같음 interface INewType { name?: ..

React Router Dom 웹 앱에서 동적 라우팅을 구현 가능하게 해주는 라이브러리 컴포넌트 기반 라우팅을 용이하게 함 Single Page Application (SPA) 리액트는 SPA이기 때문에 하나의 index.html 템플릿 파일을 가짐 자바스크립트를 이용해 컴포넌트들을 이 하나의 템플릿에 넣어 페이지를 변경함 이때 React Router Dom 라이브러리가 새 컴포넌트로 라우팅/검색을 하고 렌더링에 도움을 줌 React Router Dom 설치 npm install react-router-dom --save import { BrowserRouter } from 'react-router-dom'; const root = ReactDOM.createRoot(document.getElementB..

export / import 타입스크립트는 CommonJS/AMD/UMD 방식의 모듈을 위해 export = ABC, import ABC = require('abc') 문법도 제공함 이것은 ESM 기본 내보내기 (export default)와 같음 컴파일 옵션에서 "esModuleInterop": true 설정 시 ESM 기본 내보내기 방식으로 사용 가능 // CommonJS/AMD/UMD 방식 import ABC = require('abc'); import * as ABC from 'abc'; // "esModuleInterop": true 설정 시 // ESM 기본 내보내기 방식 import ABC from 'abc'; 외부 모듈의 타입 선언 모듈 구현 + 타입 선언이 동시에 이루어지는 타입스크립트와..

접근 제어자 (Access Modifiers) 클래스 멤버에서 사용 가능 (속성, 메서드) 클래스/메서드/기타 멤버의 접근 가능성을 설정하는 객체 지향 언어 키워드 접근 제어자 의미 범위 public 어디서나 자유롭게 접근 가능 생략 가능 속성, 메서드 protected 자신과 파생된 후손 클래스 안에서 접근 가능 속성, 메서드 private 자신의 클래스 안에서만 접근 가능 속성, 메서드 public class Animal { // public 수식어 사용(생략 가능) public name: string; constructor(name: string) { this.name = name; } } class Cat extends Animal { getName(): string { return `Cat na..

명시적 this this의 타입을 명시적으로 선언 가능 첫 번째 가짜 매개변수로 선언함 interface Cat { name: string; age: number; } const cat: Cat = { name: 'Lucy', age: 3 }; function hello(this: Cat) { // call 메서드로 호출되어 this가 바인딩 됨 // this: Cat = { name: 'Lucy', age: 3 }; console.log(`Hello ${this.name}`); } // call 메서드: // 함수를 호출하면서 첫 번째 인수로 전달한 특정 객체를 // 호출한 함수의 this에 바인딩 함 hello.call(cat); // Hello Lucy 오버로드 (Overloads) 이름은 같지만 ..

제네릭 (Generic) 재사용을 목적으로 함수나 클래스의 사용 시점에 타입을 선언하는 방법 // T는 타입 변수 // 사용자가 제공한 타입으로 변환될 식별자 // 다른 이름으로 변경 가능 function toArray(a: T, b: T): T[] { return [a, b]; } toArray(1, 2); toArray('1', '2'); toArray(1, '2'); toArray(1, '2'); // Error. number 타입만 인수로 전달 가능 // 타입 추론 활용 // 사용 시점에 인수 타입을 제공하지 않을 수도 있음 toArray(1, 2); toArray('1', '2'); toArray(1, '2') // Error. 두 타입은 같아야 함 제약 조건 (Constraints) 인터페이스..