기존에 javascript로 작성된 React 코드를 TypeScript로 변환하는 방법을 정리해보았습니다. 마지막에는 처음부터 React Typescript 로 프로젝트를 설정해 시작할 수 있는 Template 설치 방법도 정리해놓았으니 함께 참고해보시기 바랍니다.
📌 변환하는 순서
보통 기존의 React javascript 파일을 React tyescript로 변경할 때는 아래와 같은 절차를 따르게 됩니다.
1) 리액트 앱을 위한 타입 정보들을 제공하는 패키지 설치 (4가지)
2) tsconfig.json 파일 root 경로에 추가해 컴파일러 옵션 설정
3) 모든 js 파일을 jsx로 변경
4) 개발 파일 확장자를 하나씩 tsx 로 변경
5) tsx로 변경해줌으로써 발생하는 오류 해결
📌 진행해보기
1) 리액트 앱을 위한 타입 정보들을 제공하는 패키지 설치
npm i @types/node @types/react @types/react-dom @types/jest
위 코드 terminal에 입력해 설치 후, package.json 에서 파일 설치 여부 확인
2) tsconfig.json 파일 root 경로에 추가해 컴파일러 옵션 설정
target의 경우 리액트가 어디서든 잘 동작할 수 있도록 하기 위해 ESNext가 아닌 ES5로 설정해줍니다.
{
"compilerOptions": {
"target": "ES5",
"module": "CommonJS",
"strict": true,
"allowJs": true,
"esModuleInterop": true,
//default로 내보낸 값이 없더라도 default를 설정한 양식으로 import를 할 수 있도록 도와줌
// 일반적으로 true 값으로 설정 후 작업한다.
// react 외부 패키지를 불러올 때, default export 되지 않는 패키지가 있을 가능성을 염두해서 설정해줌
"jsx": "react-jsx"
// typescript는 기본적으로 jsx 문법을 해석할 수 없기 때문에, 설정해준다.
},
"include": ["src"]
}
설정값에 대한 자세한 설명
이 외 설정값에 대한 이유와 자세한 기능이 궁금하시다면 아래 내용을 참고해보시기 바랍니다.
{
"compilerOptions": {
"target": "ES5",
// JavaScript 코드가 변환될 ECMAScript 버전을 지정
// ES5는 대부분의 브라우저에서 지원되는 안정적인 버전
// 다른 옵션: ES6/ES2015, ES2016, ES2017, ES2018, ES2019, ES2020, ESNext
"module": "CommonJS",
// 모듈 시스템을 지정
// CommonJS는 Node.js에서 사용하는 표준 모듈 시스템
// 다른 옵션: ESNext, AMD, UMD, System, ES6/ES2015
"strict": true,
// 모든 엄격한 타입-체킹 옵션을 활성화
// 포함되는 옵션들: noImplicitAny, strictNullChecks, strictFunctionTypes,
// strictBindCallApply, strictPropertyInitialization, noImplicitThis, alwaysStrict
"allowJs": true,
// TypeScript 프로젝트 내에서 JavaScript 파일의 사용을 허용
// .js와 .jsx 파일을 TypeScript 프로젝트에 포함시킬 수 있음
// 점진적인 마이그레이션에 유용
"esModuleInterop": true,
// CommonJS 모듈을 ES6 모듈 방식으로 import 할 수 있게 해줌
// 예: import React from 'react'
// (esModuleInterop이 false라면 import * as React from 'react' 형식을 사용해야 함)
"jsx": "react-jsx"
// JSX 코드의 변환 방식을 지정
// "react-jsx": 새로운 JSX 변환, React 17 이상에서 사용
// 다른 옵션: "preserve", "react", "react-native"
},
"include": ["src"]
// TypeScript 컴파일러가 분석할 디렉토리를 지정
// src 폴더 내의 모든 TypeScript/JavaScript 파일이 컴파일 대상이 됨
}
3) 모든 js 파일을 jsx로 변경
'~~.js 파일은 입력 파일을 덮어쓰므로 쓸 수 없습니다.' 라는 위 사진과 같은 오류가 tsconfig.json 파일에서 발생한다면. App.js 나 index.js와 같은 파일의 확장자를 jsx로 수정해야 합니다.
TypeScript는 기본적으로 js 파일로 부터 jsx 문법을 해석할 수 없기 때문입니다.
4) 파일 확장자 tsx 로 변경
js로 만들어진 파일을 ts로 변경할 때에는 한번에 많은 오류가 뜰 수 있기 때문에 가능한 한 파일씩 확장자를 tsx로 변경하는 것이 좋습니다.
따라서, App.jsx나 index.jsx 파일을 하나씩 순차적으로 tsx로 변경해줍니다.
5) tsx로 변경해줌으로써 발생하는 오류 해결
해결방법 1) not null(!)설정을 해줌으로써 해당 값이 null 값이 아님을 단언
해결방법 2 ★추천) 좀 더 직관적으로 단언해주는 방법
📌 React(TypeScript) Template 설치
처음부터 React TypeScript로 프로젝트를 진행하고자 한다면, 아예 시작때부터 React TypeScript버전으로 Template을 설치하면 됩니다.
자세한 내용은 아래 Create React App docs에도 나와있으니 참고해보시기 바랍니다.
👉Adding TypeScript 👈
1) 아래와 같은 코드를 terminal에 입력합니다.
npx create-react-app . --template typescript
2) 입력 후 자동으로 TypeScript가 적용된 react 기본 템플릿이 형성됩니다.
tsconfig.json, pakage.json, index.tsx, App.tsx와 같은 파일들을 살펴보면, 위에서 설명드렸던 javascript -> TypeScript변환을 해주며 해주었던 설정들이 그대로 적용되어 있는 것을 확인해보실 수 있습니다.