프론트엔드-코드/타입스크립트

1. 시작

sdafdq 2023. 8. 28. 16:50

타입스크립트란.

 

일단 느낌상으로는 정확히 타입을 지정해 주는 것 같다.

 

확장자 : ts파일

 

ts -> 타입스크립트 컴파일러 -> 자바스크립트

 

타입스크립트는 독자적 언어처럼 보이지만, 라이브러리이기도 하다. 그래서 컴파일 느림.

 

 

노드js가 필요함.

 

npm i -g typescript

-g는 글로벌이란 뜻. 지역말고 전체적으로 사용할 수 있게끔 설치한단 뜻.

 

 

그 다음 ts파일을 만들고 코드를 쓰면 된다.

const message: string = 'hello world';
console.log(message);

message의 타입을 string으로 한다는.. 

let 변수명:타입명;

 

이렇게 코드를 다 짜고 나면, 

콘솔로 그 스크립트 짠 곳 가서, 

tsc 파일명.ts

하면 컴파일이 되는거다.

 

그러면 js 파일로 새로 생성된다.

 

이건 이제 index.html 파일을 만들어서 거기에 컴파일된 js파일을 연결해서 쓸 수도 있고, 

아니면 콘솔로 

 

node 컴파일된파일명

혹은 

node 컴파일된파일명.js 하면 

우리가 console.log 했던거, 다 나온다.

 

애초에 console.log 가 콘솔에 기록 남긴다는 거니까

 

 

 

주의 할 점이 있는데,

타입스크립트 에러 검사와 컴파일은 별개의 작동이기에, 문법 에러 있어도 콘솔의 tsc 명령어 하면 컴파일 됨. 물론 그 js파일은 이상이 있음.

 

 

 

TS-node

이거는 ts파일만으로도 실행할 수 있게 해 주는 거.

 

npm i -g ts-node

 

 

이후 이제 콘솔에서 ts-node 파일명.ts

하면 제대로 실행 됨.

 

 

근데 이거보다 더 유용한, 파일 바뀔 시 마치 Live Server처럼 바로 적용되는

ts-node-dev 를 설치해보자. 이건 실시간이다.

 

 

 

 

ts-node-dev --respawn 파일명.ts

--respawn : 스크립트가 실행 -> 종료 후에도 변경사항을 계속 확인

 

아마 이거 하면 Live Server처럼 볼 수 있는 듯. 콘솔로.

 

근데 이거 하려면, 제대로 node js 프로젝트 만들어서 그 환경에서 해야 함.

 

 

https://qwefdg3.tistory.com/365

https://qwefdg3.tistory.com/394

 

 

이 둘 참조.