Ch1. TypeScript

공부계기

팀내에서 Typescript를 점진적 전환방식으로 도입하자는 의견으로 인해서 반강제?로 타입스크립트를 공부하게 되었다.

최근까지의 자료(2022년 작성된 서베이기준)를 확인해보았을 때 점차 순수Javacript만이 아니라 Typescript로 만들어지고 있는 라이브러리나 코드들이 많아지고 또는 필요시마다 함께 섞어서 사용하는 경우도 많이 늘어나고 있다.
무조건 자바스크립트 또는 타입스크립트의 장단점을 읊으면서 둘중 하나만을 고집하고싶진 않다.
익혀두면 훨씬 도움될 수 있기 때문에 등떠밀려서라도 경험하게 된 지금 환경에 감사하는 중!

Typescript란 도대체 무엇?

TypeScript = Typed Superset of JavaScript = compiles to plain JavaScript

Typescript의 공식문서에 작성되어 있듯이 Superset, 즉 Javascript를 기반으로 하는 타입구문이 추가로 적용된 프로그래밍 언어이다.

그럼 typescript는 javascript와 뭐가 다를까?

참고링크

가장 많이 언급되는 차이만 보자면 JS와 다르게 TS는 정적타입을 지원하여 컴파일단계에서 타입체크가 진행되기 때문에 바로 에러확인이 가능하다는 점이다. 작은 프로젝트일 때에는 사실 JS로도 충분히 괜찮지만 규모가 커질 수록 어디서 어떤 값에서 에러가 나는 지 확인 하기 힘들어지게 되는데 그럴 때 제일 도움이 될 것 같다.
그리고 명시적인 정적 타입 지정을 통해서 개발자의 의도를 명확하게 코드로 기술이 가능하고 예측이 가능하기 때문에 협업시에도 따로 주석이나 jsdoc을 이용해서 따로타입에 기술하거나 확인하는 절차가 생략될 수 있다.

TypeScript 설치 및 사용

1. 자바스크립트 실행 환경 설치 (node.js, browser: chrome추천)
2. 타입스크립트 컴파일러 설치
   2-1 global

   npm i typescript -g
   tsc test.ts // tsc 명령어로 해당 파일을 javascript로 컴파일=트랜스파일)
   tsc --init // ts설정파일인 tsconfig.json 생성
   tsc -w // watch 모드를 의미하며 코드가 바뀔때마다 자동으로 컴파일 해주고 js로 실행

   2-2 프로젝트별

   npm init -y // npm 프로젝트 생성
   npm i typescript // package.json에 dependencies에 추가됨
   /*
   tsc 명령어를 사용하기 위해 tsc가 있는 루트를 이용하여 사용가능하지만
   npm 버전이 올라가면서 새로운 기능으로 npx tsc를 하면 동일하게 사용가능
   */
   node_modules/.bin/tsc
   node_modules/typescript/bin/tsc
   npx tsc
   npx tsc -w
   npx tsc --init // ts설정파일인 tsconfig.json 생성

First Type Annotation

let a: number;
a = 39;

function hello(b: number){
}
hello('Kim') 
/*
Error: hello는 인자로 number를 받는다는 type annotation이 있기때문에
String은 에러가 뜸
*/