[React] TypeScript

 

🔎TypeScript란

• JavaScript를 기반으로 한 프로그래밍 언어
• strongly-typed : 언어가 작동하기 전에 type을 확인
• 코드에 문제가 있으면 프로그램이 실행 전 오류 문구를 띄움
• 브라우저는 타입스크립트를 이해할 수 없기 때문에 컴파일을 통한 자바스크립트 변환 과정이 필요

 

📌TypeScript Playground

https://www.typescriptlang.org/play

TS Playground - An online editor for exploring TypeScript and JavaScript

• 해당 사이트에서 간단한 타입스크립트 시뮬레이션 가능

 

const plus = (a:number, b:number) => a + b;

• typescript에서는 위처럼 데이터 타입이 무엇인지 선언 필요.

 

• number가 아닌 string이 쓰여졌을 때는 에러표시가 뜸

---

 

🔎리액트 프로젝트에 TypeScript 설치

📌방법1. react 프로젝트를 생성할때 typescript 관련 템플릿도 함께 설치

npx create-react-app 프로젝트명 --template typescript

 

 

 

📌 방법2. 프로젝트가 이미 생성 된 상황에서 타입스크립트 추가

1.

npm install --save typescript @types/node @types/react @types/react-dom @types/jest

 

 

2. src폴더 내부의 App/js, index.js의 확장자를  App.tsx와 index.tsx로 수정

• typescript파일의 확장자는 ts
• typescript + react일 경우 파일의 확장자는 tsx

 

3.  tsconfig.json 파일 생성

"npx tsc --init

• 생성 된  tsconfig.json 파일에 "jsx": "react-jsx" 추가

 

 

4. src/index.tsx 파일 수정

const root = ReactDOM.createRoot(document.getElementById('root'));

⬇️

const root = ReactDOM.createRoot(document.getElementById('root') as HTMLElement);