Introduction
Typescript는 Javascript의 SuperSet이라고 할 수 있다.
TypeScript는 프로그래밍 언어인데, Javascript처럼 생겼고 컴파일을 해도 Javascript처럼 컴파일된다. 따라서 TypeScript에 작성하는 건 모두 JavaScript로 변할 수 있다.
Javascript는 엄격한 규칙이 없고, 사용하기 쉽고, 사용자가 원하는 방향으로 수정하기 편하다는 장점이 있다. 그러나 큰 프로젝트를 하거나, 팀으로 일하거나, 버그를 최소화 하고 싶을때는 위의 장점이 단점이 되어버린다.
그렇기에 TypeScript가 등장한다. TypeScript는 언어가 예측가능하고, 읽기 쉬운 코드를 제공하여 자바스크립트를 더 잘 사용할 수 있게 해준다. 마치 Javascript의 업그레이드 버젼처럼!
Install TypeScript
- npm init // package.json 파일 생성
- npm i -D typescript ts-node // typescript, ts-node 패키지 설치
- npm i -D @types/node // 여러 타입을 사용하기 위한 패키지
- npx tsc --init // 타입스크립트 설정 파일(tsconfig.json) 생성
package.json
tsconfig.json
tsconfig.json 파일에 Typescript에게 어떻게 Javascript로 변환하는지 알려주면서 몇가지 옵션을 준다. 어떤 Version의 Javascript로 변환해야하는지, 어떤 파일들이 컴파일 과정에 포함되고 배제되는지 등을 설정해준다.
Compile TypeScript To JavaScript
npx tsc명령어를 통해index.ts를index.js로 변환하고index.js.map파일을 생성한다.
npx tsc//index.ts를index.js로 컴파일링node index.js//index.js를 실행ts-node index.ts//index.ts의 컴파일과 실행을 동시에 .npm i -D ts-node를 통해 먼저 설치해준다.
TypeScript Rules
TypeScript는 어떤 종류의 변수와 데이터인지 직접 설정해줘야 한다.
Arguments, ?
위의 코드를 보면 sayHi 함수는 3개의 argument가 필요한데, 실행부분에서 gender를 빼면 빨간줄이 생기며 컴파일도 되지 않는다. 자바스크립트에서는 일어나지 않지만, 타입스크립트에서는 실수가 일어나지 않도록 애초에 방지해준다.
export {}; : 현재 파일이 모듈이 된다는 것을 이해할 수 있도록 파일 마지막에 적는다.
gender?를 설정해주면 gender변수는 선택적으로 사용할 수 있게 된다. Python에서 null=True처럼 안 넣어도 문제가 없는 상황을 생각하면 된다.
string, number, mouse over
함수를 생성하는 경우 변수의 type과 함수의 type을 미리 정해줄 수 있고, 정해진 type이 아닌 다른 type, 예를 들어 위의 코드처럼 number대신 string이 오거나 함수의 return이 없는데(return이 없으면 void or any) string으로 설정되거나 한다면 typescript가 사용자에게 문제를 알려주게 된다.
Interface
TS에서 argument의 type을 일일히 정해주는 것보다, object 형태로 type을 정해주고 사용하는 것을 interface라고 한다.
index.ts
위에서 name, age, gender에 type을 정해준 것과 다를바 없는 결과지만 Interface라는 틀이 있기에 object가 예측 가능해지고 여러 방면으로 활용이 가능하다. Interface는 TS에만 있고 JS에서는 관여하지 않는데, 실제 index.js를 보면 아래와 같다.
index.js
이렇게 문제가 일어나는 걸 막기 위해 Interface는 index.js로 컴파일되지 않지만, 가끔 인터페이스를 js에 넣고 싶을 때가 있다. 그래서 인터페이스 대신 넣는 것이 바로 Class이다.
Class
index.ts
Class Human을 생성하여 name, age, gender를 public으로 설정하고 constructor를 추가하여 클래스가 시작할때마다 호출되도록 한다. Interface와 다르게 Class는 컴파일된 index.js에서도 볼 수 있다. Interface를 사용하면 TS 측면에서는 좀 더 안전하지만, 다른 Framework와 함께한다면 Class를 사용하는 것이 좋다.
index.js
JS에는 변수의 Public, Private이라는 개념이 없기에 index.js에서 나타나지 않는다. 변수를 private으로 설정하면 Class 내부에서만 사용가능하기에, 만약 private age: number로 설정해준다면 sayHi 함수에서 age가 Class 밖에서 사용되어 에러가 난다.
TIL
NestJS를 사용하기 전 Javascript, Typescript, NodeJS에 대한 이해가 반드시 필요한 것 같아 여러가지를 공부하고 있다. 아직 어떤 개념부터 공부해야 하는지, 어느정도 해야하는지 감이 잡히지 않는다. 최대한 빨리 NestJS를 접하는 것도 중요하지만, 기본 지식이 없다면 그만큼 습득력도 떨어질테니 적어도 강의 한편과 NodeJS로 Application 하나쯤은 만들고 넘어가고 싶다.
