typescript 란?
타입스크립트(TypeScript)는 마이크로소프트(MS)에서 개발한 오픈소스 프로그래밍 언어 이다.
javascirpt 에 정적 타입을 정해주어 디버깅을 쉬게 하여 협업시 에러를 빠르게 찾을수 있는 장점이 있다.
typescript 실행 해 보기
실행방법은 두가지가 있는데
1. typescript 로 작성하고 javascript 롤 컴파일 해 실행하기
2. typescript 로 작성하고 ts-node 로 실행하기
(ts-node란 typescript를 실행시키는 엔진으로 Node.js의 REPL이다)
1.번 방법
$ npm install -g typescript
$ tsc -v
typescript 를 깔고 잘 깔렸는지 확인해보자.
잘 깔렸다면 확장자를 ts 또는 tsx로 하여 파일을 만들고 코드를 작성해 보자.
typescript는 잘못된 타입을 적으면 이렇게 빨간줄로 알려준다.
마우스를 갖다대면 왜 에러인지 나온다.
에러를 고치고 컴파일을 해보자.
$ tsc [파일명].ts
tsc test.ts
이렇게 test.js 파일로 컴파일이된다. 이걸 노드로 돌리면 된다.
2.번 방법 (ts-node)
먼저 ts-node 를 깔아주자
$ npm install -g ts-node
$ ts-node -v
잘 깔렸는지 확인하고
@types/node는 Node.js에서 type 정의를 포함하고 있는 패키지
$ npm install --save-dev @types/node
코드를 작성하고 터미널에서
$ ts-node [파일명]
$ ts-node test
를 실행 시키면 잘 작동한다.
react - next 환경에서 typescript 사용해보기
$ npm install next-app
원하는 프로젝트 이름으로 파일이 생성이된다.
typescript 가 작동 할 수 있는 환경을 만들어 주어야 한다.
$ npm install --save-dev @types/react @types/node
page > _app.js 파일을 _app.tsx 파일로 확장자를 변경해주자.
AppProps 를 import 해와서 type 으로 지정해 주자 !
혹시 에러가 나온다면
$ npm install --save --dev typescript
tsconfig.json 파일이 생성되있을 텐데
디버깅 용으로 사용할거기 때문에 strict 를 true로 바꿔주자
고친후 실행시키면
잘 작동하는걸 확인 할 수 있다.