keyof와 typeof의 혼합 사용

특정 변수의 타입을 정의할때 만약에 해당 타입이 다른 타입과 종속적인 관계에 있다면, 종속관계에 있는 해당 타입의 정의를 참조해서 타입을 정의해야 한다.

아래는 스프라이트 기법으로 이미지를 잘라내서 사용하기 위한 이미지 좌표의 타입 정의이다.

1
2
3
4
5
6
7
8

const coords = {
  img1: '0',
  img2: '-142px',
  img3: '-284px'
} as const;

type a = keyof typeof coords; // coords 타입(typeof)의 key 값(img1 | img2 | img3)
type imgCoords = typeof coords[keyof typeof coords] // '0' | '-142px' | '-284px'

useState에서 빈 배열([])로 초기화시키는 경우

typescript에서 useState hooks를 사용해서 초기 값을 빈 배열로 할 경우, 타입스크립트에서는 빈배열([])을 never type으로 인식하기 때문에 구체적인 타입을 지정해줘야 한다.

type 선언을 위해 사용한 interface는 같은 파일에서 정의를 하지 말고, 별도의 파일(types.ts)로 빼서 다른 파일에서 재사용 가능하도록 정의를 하는 것이 좋다.(코드의 가독성, 재사용성)
types.ts

1
2
3
4

export interface IDetailInfo {
  id: string;
  contents: string;
}

main.ts

1
2
3
4

import { IDetailInfo } from './types';
...
const [detail, setDetail] = useState<IDetailInfo[]>([]);
...

프로젝트 기본 구성

typescript, react, react-dom, webpack, webpack-cli 설치

1
2
3
4
5

$ npm i typescript
# 웹 환경에서는 react-dom, 모바일은 react-native
$ npm i react react-dom

$ npm i -D webpack webpack-cli

이전에 React에서 webpack + babel을 사용해서 JavaScript의 최신문법과 JSX 문법을 이전의 JavaScript 문법으로 변환해주었는데, 이번 TypeScript에서는 webpack + TypeScript 조합으로 변환을 해준다.

TypeScript는 자체적으로 babel처럼 최신문법이나 jsx 문법을 이전 문법(ES3 or ES5)으로 바꿔준다. 따라서 별도로 Babel을 사용할 필요는 없다. 하지만 TypeScript + Babel의 조합으로 사용하는 경우도 있기 때문에 이 부분을 알아두도록 하자.