여기서 . 을 찍는 이유는 새로운 폴더 안만들고 해당 경로에 바로 만들기 위

npx create-react-app .

해당 react App에 typescript 추가

$ npm i @types/node @types/react @types/react-dom @types/jest

tsconfig.json 옵션 설정

{
    "compilerOptions": {
        "target": "ES5",
        "module": "CommonJS",
        "strict": true,
        "allowJs": true,
        "esModuleInterop": true, // default로 내보내는 모듈 없어도 허용해주는 옵
    },
    "include": ["src"]
 }

기존 js로 되어있던 것을 jsx로 변경하면 tsconfig.json 오류는 해결됨

하지만 우리는 tsx 파일 (타입스크립트 리액트) 로 변경해야함

index.jsx

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root"));
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

index.tsx

import React from "react";
import ReactDOM from "react-dom/client";
import "./index.css";
import App from "./App";

const root = ReactDOM.createRoot(document.getElementById("root") as HTMLElement);
root.render(
  <React.StrictMode>
    <App />
  </React.StrictMode>
);

tsconfig.json