이미 생성된 create-react-app에 typescript 적용하기
create-react-app 2.1.0 버전부터 기본으로 typescript를 지원한다. https://create-react-app.dev/docs/adding-typescript 를 참고해서 프로젝트를 새로 만들고 코드만 옮기는 것이 나을 수도 있다.
react-scripts 의존성 바꾸기
package.json
의 dependencies
에 있는 react-scripts
를 react-scripts-ts
로 바꾼다. 이 글 작성 시점으로 최신 버전은 2.16.0
이다.
..
"dependencies": {
"react-scripts-ts": "2.16.0"
},
devDependencies에 typescript 의존성 추가
..
"devDependencies": {
"@types/jest": "^23.1.5",
"@types/node": "^10.5.2",
"@types/react": "^16.4.6",
"@types/react-dom": "^16.0.6",
"typescript": "^2.9.2"
}
package-lock.json 및 node_modules 삭제 후 재설치
typescript config 파일 생성
tsconfig.json
{
"compilerOptions": {
"baseUrl": ".",
"outDir": "build/dist",
"module": "esnext",
"target": "es5",
"lib": ["es6", "dom"],
"sourceMap": true,
"allowJs": true,
"jsx": "react",
"moduleResolution": "node",
"rootDir": "src",
"forceConsistentCasingInFileNames": true,
"noImplicitReturns": true,
"noImplicitThis": true,
"noImplicitAny": true,
"strictNullChecks": true,
"suppressImplicitAnyIndexErrors": true,
"noUnusedLocals": true
},
"exclude": [
"node_modules",
"build",
"scripts",
"acceptance-tests",
"webpack",
"jest",
"src/setupTests.ts"
]
}
tslint.json
{
"extends": ["tslint:recommended", "tslint-react", "tslint-config-prettier"],
"linterOptions": {
"exclude": [
"config/**/*.js",
"node_modules/**/*.ts"
]
}
}
images.d.ts
declare module '*.svg'
declare module '*.png'
declare module '*.jpg'
react-app-rewired을 사용할 경우
react-app-rewired
를 사용하고 있다면 관련 스크립트에 --scripts-version react-scripts-ts
파라메터를 추가한다.
..
"scripts": {
"start": "react-app-rewired start --scripts-version react-scripts-ts",
"build": "react-app-rewired build --scripts-version react-scripts-ts",
"test": "react-scripts test --env=jsdom --scripts-version react-scripts-ts",
"eject": "react-scripts eject"
},
index.js 를 index.tsx로 파일명 변경
index.js
의 확장자를 tsx
로 변경 후 React
의 import
하는 부분의 코드를 변경한다.
import * as React from 'react'; import * as ReactDOM from 'react-dom';
…