TypeScript

TypeScript : 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어

여기를 참고하여 TypeScript의 개념을 배운 뒤

오늘부터 듣게 된 React 강의 실습물들을 TypeScript로 리팩토링 하면서 개념을 천천히 익혀나갈 예정이다.

---

TypeScript 설치 방법

npm i -g typescript
npm install -g typescript
yarn add typescript
위 명령어를 터미널에 입력하여 TypeScript 를 설치

---

TypeScript + Ract 생성 방법

npx 명령어
npx create-react-app my-app --template typescript
yarn 명령어
yarn create react-app my-app --template typescript
해당 명령어 터미널에 입력하여 프로젝트를 생성

혹은 이미 생성된 React 프로젝트에 TypeScript 추가 방법

npx 명령어
npm install --save typescript @types/node @types/react @types/react-dom @types/jest
yarn 명령어
yarn add typescript @types/node @types/react @types/react-dom @types/jest
해당 명령어를 터미널에 입력하여 프로젝트를 생성

tsconfig.json 설정

{
    "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"
    },
    "include": ["src"]
}

처음 설치하게되면 자동으로 작성이 되어있는 json 파일 이지만
es6 기술을 사용하려면 "target": "es6" 이렇게 target의 값을 변경해주면 사용이 가능하다