Typescript 앱 생성하기(초기 셋팅 방법)

JS 프로젝트를 TS 프로젝트로 마이그레이션 하기 or TS 템플릿으로 생성하기

-> 마이그레이션 시 보통 파일을 하나씩 변경한다.

 

1. 직접 react-create-app 마이그레이션 하기

1) 리액트 앱 생성 및 타입 선언 패키지 install

   npx create-react-app .
   npm i @types/node @types/react @types/react-dom @types/jest`

 2) tsconfig.json 설정하기

{
  "compilerOptions": {
    "target": "ES5",
    "module": "CommonJS",
    "strict": true,
    "allowJs": true,
    "esModuleInterop": true, // 외부 패키지 등에서나 export default가 없어도 기본옵션으로 추가하기
    "jsx": "react-jsx" // ts는 기본적으로 jsx해석못하기 때문에 추가
  },
  "include": ["src"]
}

3) 모든 js파일을 jsx 컴포넌트로 변경

   -> 타입스크립트의 컴파일러(tsc)가 파일 확장자와 구성 옵션을 통해 코드의 의도를 명확히 구분하기 때문

   -> .js와 .jsx는 순수 JavaScript 코드로 간주되며, 기본적으로 타입 검사를 최소화하거나 생략한다.

   따라서, .js 파일에서 JSX를 사용하면 타입스크립트는 이를 별도의 설정 없이는 처리하려고 시도하지 않는다.

4) 개별 파일들 tsx로 하나씩 변경 후 에러를 옵션 등으로 해결하기

//index.tsx 에러 
const root = ReactDOM.createRoot(
  document.getElementById("root") as HTMLElement // 단언 추가
);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

 

 

2. 한 번에 ts 프로젝트 생성하는 방법(ts 템플릿)

 npx create-react-app my-app --template typescript
 // 또는 현재 폴더에서 생성하기
 npx create-react-app . --template typescript

 

<참고>

[React] create-react-app & Typescript 초기 세팅 완벽 정리