공부기록/Typescript
React앱 타입스크립트로 마이그레이션 하기
Jenner
2023. 11. 6. 17:08
- 타입스크립트 마이그레이션을 위한 라이브러리 설치
- tsconfig.json 설정
- 사용하는 라이브러리들 중 @types 패키지 추가
- webpack설정 변경
- jsx => tsx로 확장자 변환
1. 타입스크립트 마이그레이션을 위한 라이브러리 설치
npm i -D typescript esbuild -loader @types/react @types/react-dom
//yarn일 경우
yarn add -D typescript esbuild -loader @types/react @types/react-dom
typescript: tsc컴파일러, typescript 문법지원을 위해 필요한 라이브러리
@types/react: react라이브러리를 위한 타입 패키지
@types/react-dom: react에서 dom element와 관련된 타입들을 모아놓은 패키지
esbuild-loader:타입 스크립트 트랜스파일링을 위한 패키지(속도가 빠름)
2. tsconfig.json설정
tsc --init
또는
npx tsc --init
tsconfig.json파일
{
"compilerOptions": {
"outDir": "./dist/",
"sourceMap": true,
"strictNullChecks": true,
"module": "es6",
"jsx": "react",
"target": "es5",
"allowJs": true,
"allowSyntheticDefaultImports": true
},
"include": ["./src/"]
}
target :익스플로러 지원할경우 es5
sourceMap: 디버깅을 위한 소스맵
outDir: 컴파일된 결과가 위치할 경로
jsx: jsx파일을 js로 변환하도록 설정
module: module코드를 esm방식으로 변환
3. 사용하는 라이브러리들 중 @types 패키지 추가
Definitely Typed오픈소스에 등록된 타입 선언 파일 설치
npm i -D @types/<library name>
git repo에 index.d.ts가 있는 라이브러리는 설치 안해도 됨
npm에서 @types/패키지명 검색해보고 있으면 @types/패키지 설치
@types/ 패키지가 없다면 직접 모듈에 대한 타입 선언
4. webpack설정 변경
// webpack.config.js
const path = require("path");
module.exports = {
entry: "./src/app.tsx", // 진입점(entry) 파일 경로
output: { //웹팩 번들링 결과에 대한 옵션 기본경로는 dist
filename: "./bundle.js", // 번들 파일 이름
path: path.resolve(__dirname, "dist"), // 번들 파일 저장 경로
},
resolve : { //번들링할 확장자 설정
extensions: [".js", ".jsx", ".ts", ".tsx"],
},
module: { //번들링 할 때 플러그인 설정 가능
rules: [
{
test: /\.(png|jpg|gif|jpeg)$/,
use: "file-loader", // 이미지 파일을 모듈로 처리하는 로더
},
{
test: /\.css$/,
use: ["style-loader", "css-loader"],
// style-loader : style태그를 삽입해 dom에 css추가
// css-loader: css확장자의 css파일을 읽기 위한 로더
},
{
test: /\.(t|j)sx?$/,
exclude: /(node_modules)/,
use: {
loader: "esbuild-loader", //타입스크립트 변환을 위한 로더
options: {
loader: "tsx",
target: "es2015",
},
},
},
],
},
externals: { //번들링 결과에서 제외할 라이브러리들
react: "React",
"react-dom": "ReactDOM",
},
mode: "development",
devServer: {
liveReload: false,
},
};
5. jsx => tsx로 확장자 변환
변환하면서 생기는 타입오류들 모두 해결 필요
6. 타입스크립트 프로젝트 시작하기 (마이그레이션 아니고 처음 시작할 경우)
npx create-react-app <프로젝트이름> -template typescript
참조할만한 사이트