[TS] TypeScript란? (테스트/설치)

 

TypeScript

 

• 자바스크립트를 기반으로한 프로그래밍 언어.
• strongly-typed 언어로, 프로그래밍 언어가 작동하기전에 type을 확인한다. 
• 브라우저는 TypeScript를 이해하지 못한다.
• 사용자에게 publish할 때, TypeScript가 컴파일해서 평범한 JavaScript로 만들어준다.

 

Typescript 테스트 할 수 있는 곳

https://www.typescriptlang.org/play

TS Playground - An online editor for exploring TypeScript and JavaScript

 

 

 

타입스크립트 설치

 

 

 

-기존 Create React App으로 만든 프로젝트에 타입스크립트 설치할 경우

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

 

 

 

-Create React App을 타입스크립트로 시작할 경우

npx create-react-app my-app --template typescript 

You are running `create-react-app` 4.0.3, which is behind the latest release (5.0.0). 오류가 뜬다면 아래 명령어로 진행

npx create-react-app@5.0.0 my-app --template typescript

https://create-react-app.dev/docs/adding-typescript

Adding TypeScript | Create React App

 

 

 

그리고 기존의 리액트 앱에서 타입스크립트를 사용한다면, 파일 확장자를 .tsx로 바꿔줘야한다.

 

 

서버를 실행하면 Typescript configuration 파일(tsconfig.json)과 react-app-env.d.ts 파일이 생긴다. 

 

 

 

어떤 라이브러리나 패키지는 TypeScript로 만들어진것이 아니다. JavaScript를 기반으로 만들어졌다. 

우리는 TypeScript로 만들어지지 않은 라이브러리를 import해야 할 때도 있다. 

만약에 styled-component를 import하려면, 아래 명령어를 사용한다.

 

npm i --save-dev @types/styled-components

 

@types란 DefinitelyTyped라는 아주 큰 깃허브 레퍼지토리인데, 모든 유명한 npm 라이브러리를 가지고 있는 저장소이다. 

여기서 TypeScript로 작업할 때 필요한 대부분의 라이브러리나 패키지의 type definition을 얻을 수 있다. 

 

 

https://github.com/DefinitelyTyped/DefinitelyTyped

GitHub - DefinitelyTyped/DefinitelyTyped: The repository for high quality TypeScript type definitions.