노마드 코더/ TypeScript

sohyun·2022년 11월 21일
0

타입스크립트는 자바스크립트를 기반으로 한 언어
strongly-typed(엄겨한 자료형): 데이터의 type을 확인함 프로그램이 작동하기 전에

//JS
const plus = (a,b) => a+b;

//TS
const plus = (a:number,b:number) => a+b;
//number타입에 number타입을 더하면 number타입이 나온다
//만약 a나b의 타입을 string으로 할 시 에러남

React 프로젝트 TypeScript로 변경하기

01.기존 프로젝트에 타입스크립트 라이브러리 설치하기

yarn add typescript @types/node @types/react @types/react-dom @types/jest

  • @types가 앞에 붙으면 타입스크립트가 지원되는 라이브러리 입니다.
  • 처음부터 리액트 타입스크립트 프로젝트로 시작할거라면? yarn create react-app 프로젝트명 --template typescipt

02. jsconfig.json => tsconfig.json 생성하기

tsconfig.json

tsc --init
{
  "compilerOptions": {
    "target": "es5",
    "lib": [
      "dom",
      "dom.iterable",
      "esnext"
    ],
    "allowJs": true,
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true,
    "forceConsistentCasingInFileNames": true,
    "noFallthroughCasesInSwitch": true,
    "module": "esnext",
    "moduleResolution": "node",
    "resolveJsonModule": true,
    "isolatedModules": true,
    "noEmit": true,
    "jsx": "react-jsx",
    "incremental": true,
    "baseUrl": "src"
  },
  "include": [
    "src"
  ]
}

03. 확장자 .js, .jsx => .tsx 변경하기

  • 여기서부터 바꾸면서 에러가 생긴다. 에러문을 하나하나 찾아가며 수정한다.
profile
냠소현 개발일지

0개의 댓글