TypeScript + React

'TypeScript를 실전에서 사용하려니 너무 다르다! 어떻게 사용해야 할까?'

Get Started

# npx
$ npx create-react-app my-app --template typescript

# yarn
$ yarn create react-app my-app --template typescript

--template typescript 로 만든 CRA 환경에서는
파일이 모두 .ts, .tsx로 생성되어 있다.

tsconfig

./tsconfig.json

{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx"
  },
  "include": [
    "src"
  ]
}

위 파일에서 target을 es6로, lib에 es6를 추가하자.

tsconfig에서 사용 가능한 옵션들은 이곳을 참조.

{
 "compilerOptions": {

  "target": "es5", // 'es3', 'es5', 'es2015', 'es2016', 'es2017','es2018', 'esnext' 가능
  "module": "commonjs", //무슨 import 문법 쓸건지 'commonjs', 'amd', 'es2015', 'esnext'
  "allowJs": true, // js 파일들 ts에서 import해서 쓸 수 있는지 
  "checkJs": true, // 일반 js 파일에서도 에러체크 여부 
  "jsx": "preserve", // tsx 파일을 jsx로 어떻게 컴파일할 것인지 'preserve', 'react-native', 'react'
  "declaration": true, //컴파일시 .d.ts 파일도 자동으로 함께생성 (현재쓰는 모든 타입이 정의된 파일)
  "outFile": "./", //모든 ts파일을 js파일 하나로 컴파일해줌 (module이 none, amd, system일 때만 가능)
  "outDir": "./", //js파일 아웃풋 경로바꾸기
  "rootDir": "./", //루트경로 바꾸기 (js 파일 아웃풋 경로에 영향줌)
  "removeComments": true, //컴파일시 주석제거 

  "strict": true, //strict 관련, noimplicit 어쩌구 관련 모드 전부 켜기
  "noImplicitAny": true, //any타입 금지 여부
  "strictNullChecks": true, //null, undefined 타입에 이상한 짓 할시 에러내기 
  "strictFunctionTypes": true, //함수파라미터 타입체크 강하게 
  "strictPropertyInitialization": true, //class constructor 작성시 타입체크 강하게
  "noImplicitThis": true, //this 키워드가 any 타입일 경우 에러내기
  "alwaysStrict": true, //자바스크립트 "use strict" 모드 켜기

  "noUnusedLocals": true, //쓰지않는 지역변수 있으면 에러내기
  "noUnusedParameters": true, //쓰지않는 파라미터 있으면 에러내기
  "noImplicitReturns": true, //함수에서 return 빼먹으면 에러내기 
  "noFallthroughCasesInSwitch": true, //switch문 이상하면 에러내기 
 }
}

1. 데이터 type 지정

About.tsx

let restaurantData = {
  name: 'hello restaurant',
  category: 'Western',
  address: {
    city: 'seoul',
    detail: 'nowon',
    zipCode: 12345678
  },
  menu: [
    {
      name: 'cream pasta',
      price: 20000,
      category: 'pasta'
    },
    {
      name: 'tomato pasta',
      price: 15000,
      category: 'pasta'
    },
    {
      name: 'pig steak',
      price: 30000,
      category: 'steak'
    }
  ]
}

/types/restaurant.ts

export type Restaurant = {
  	name: string;
  	category: string;
  	address: {
      city: string;
      datail: string;
      zipCode: number;
    };
  	menu: {
      name: string;
      price: number;
      category: string;
    }[];
}

type 안에 type을 분리시켜도 됨.

export type Restaurant = {
  	name: string;
  	category: string;
  	address: Address; // 분리시킴
  	menu: {
      name: string;
      price: number;
      category: string;
    }[];
}

export type Address = {
	city: string;
    datail: string;
    zipCode: number;
}

---

2. 컴포넌트 Props 타입 지정

About.tsx

import { Restaurant, Address } from './type/restaurant';

interface OwnProps {
  info: Restaurant,
  changeAddress(address:Address):void 
  // address라는 Params는 Address를 따르고, 함수 자체는 아무 값도 return하지 않으므로 void
}

const About:React.FC<OwnProps> = ({info, changeAddress}) => {
  return (
    <div>{info.name}</div>
  )
}

export default About;

1. React.FC
   React에서 제공하는 타입. FC = Functional Component. (함수형 컴포넌트)

2. <OwnProps>
   TypeScript의 문법 중 하나인 제네릭.
   보통 자신의 props의 타입 관리할 때는 이런 식으로 사용함.

3. 함수 타입 지정
   함수명(param명:type):type 과 같이 작성함.
   아무것도 리턴하지 않는다면 Void를 사용.

4. type vs interface
   둘이 결국 비슷한 기능임.
   대신 문법이나 메서드가 조금씩 다름.

---

3. type 관련 유용한 메서드

export type Address = {
  city: string;
  detail: string;
  zipCode: number;
}

// 1. 만약 Address에서 zipCode만 제외시키려면?
export type AddressWithoutZip = Omit<Address, 'zipCode'> // Omit<타입명, 제외시킬 필드>
 
// 2. 만약 하나의 필드만 선택하려면?
export type AddressOnlyCity = Pick<Address, 'city'> // Pick<타입명, 선택할 필드>

---

Reference

• https://create-react-app.dev/docs
• https://youtu.be/V9XLst8UEtk
• https://codingapple.com/unit/typescript-tsconfig-json/