React 105 _ typescript

타입 스크립트?

리액트를 만든 페이스북에서 만든 플로우가 있지만 타입스크립트를 사용할 것인데,

• 타입스크립트는 자바스크립트 전반에 걸쳐 사용할 수 있어 플로우보다 좀 더 범용적으로 사용할 수 있다
• 많은 자바스크립트 라이브러리에서 이미 타입스크립트의 타입 정의 파일을 제공하고 있다.
• 타입 정의 파일을 통해 라이브러리를 사용하기 위한 올바른 데이터 타입, 매개변수를 쉽게 확인할 수 있다.
• 택스트에디터에서의 지원이 좋다. 특히 vscode에서 기본적으로 지원하고 있기 때문에 생산성에 크게 도움이 된다.

npx create-react-app my-app

create-react-app으로 생성한 리액트 프로젝트에 타입스크립트를 적용하기 위해서는 타입스크립트 라이브러리와 리액트의 타입이 정의된 타입 정의 파일을 설치할 필요가 있다.

타입 스크립트와 타입 정의 설치

npm install --save-dev typescript @types/node @types/react @types/react-dom @types/jest

설치한 라이브러리와 타입 정의 파일

• typescript : 타입스크립트 라이브러리
• @types/node : 노드의 타입이 정의된 타입 정의 파일
• @types/react : 리액트의 타입이 정의된 타입 정의 파일
• @types/react-dom : react-dom의 타입이 정의된 타입 정으 ㅣ파일
• @types/jest : Jest의 타입이 정의된 타입 정의 파일

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",
        "custom.d.ts"
    ]
}

js파일 ts파일로 변환

• ./src/App.js 👉 ./src/App.sx
• ./src/App.test.js 👉 ./src/App.test.tsx
• ./src/index.js 👉 ./src/index.tsx
• ./src/reportWebVitals.js 👉 ./src/reportWebVitals.ts
• ./src/setupTests.js 👉 ./src/setupTests.ts

.tsx파일은 Typescript JSX 파일을 의미하고
.ts 파일은 Typescript Javascript 파일을 의미한다.

이렇게 타입스크립트를 사용함을 알리기 위해서는 파일확장자명을 변경해야 한다.

코드추가

App.tsx App.test.tsx 상단에 아래 코드를 추가

import React from 'react';

reportWebVitals.tx 수정

import { ReportHandler } from 'web-vitals';

const reportWebVitals = (onPerfEntry?: ReportHandler) => {
  ...

/src/custom.d.ts 파일을 생성하고 수정
d.ts 여기서 생성하는d.ts파일은 타입 정의 파일로 타입스크립트가 인식하지 못하는 타입이나 타입스크립트 내에서 사용할 타입들을 정의할 때 사용한다.

declare module '*.svg'{
    import * as React from 'react';
    export const ReactComponent : React.FunctionComponent<React.
SVGProps<
  SVGSVGElement
&{title?:string}>;
    const src: string;
    export default src;
}

이렇게 설정이 끝났다면 App.test.tsx파일을 열서 앞서 작성했던 테스트 코드들을 복사해 붙여넣고 실행해본다.

npm run start

그런데... 문제가 있다고 한다.
이렇게 하면 너무 복잡하다는건데... 쉬운 방법이 있을까?
열받지만 마음을 가다듬고 쉽다고 하는 template이라는 옵션을 써보자

• 설치

npx create-react-app my-app-typescript --template=typescript

엥? 바로 설치가 되어버렸다
그런데 App.test.tsx 파일을 복사해서 테스트하면 오류가 나는데 p 태그에서 나는 것을 알 수 있다.

...
expect(container.getElementsByTagName('p')[0]).toHaveTextContent(
  'Edit src/App.tsx and save to reload.');
...

위와 같이 수정해주면 된다.,