typescript 시작하기, vsc 실습 방법 , javascript와의 차이점

노마드 코더의 타입스크립트 강의를 보며 정리한 글 입니다. 

 

타입스크립트Typescript ? 타입 스크립트가 뭔지 구글에 검색하면 나오는 설명은 이러하다. 

타입스크립트는 자바스크립트의 슈퍼셋인 오픈소스 프로그래밍 언어이다. 마이크로소프트에서 개발, 유지하고 있으며 엄격한 문법을 지원한다. 

 

기존의 자바스크립트 문법에서는 따로 형식을 지정하지 않는다. 그래서 작업을 하기가 더 간단하기도 하다. 하지만 대형 프로젝트 같은 차원에서는 버그 문제가 생길 수 도 있다. 

 

타입스크립트는 자바스크립트와 유사하지만 이러한 점을 보완한다. 타입 스크립트를 컴파일 하면 자바스크립트 파일로 변환이 된다. node는 타입스크립트를 이해할 수 없기 때문이다. 

---

- 타입스크립트 특징(자바스크립트와 비교하여)

 

1. 정적 타이핑 : 타입스크립트에서는 어떤 종류의 변수와, 데이터인지 지정을 해줘야 한다. 

함수가 어떤 타입을 리턴하는지, 변수가 문자열인지 .... 등

그렇기 때문에 컴파일 단계에서 오류를 잡을 수 있다. 또한, 개발자의 의도가 코드에 명확하게 반영되기 때문에 코드의 가독성이 좋아지고, 예측할 수 있어 디버깅이 쉬워지는 장점이 있다. 

 

2. 객체 지향 프로그래밍

인터페이스, 제네릭 등을 이용하여 객체 지향 프로그래밍을 통해 복잡한 코드의 기반을 쉽게 구성할 수 있다. 

---

프로젝트를 생성하고, 

$npm init

 

그리고 tsconfig.json 파일을 만들어서

{
    "compilerOptions":{
        "module" : "commonjs",
        "target" : "ES2015", //어떤 버전의 js로 컴파일 할 건지 
        "sourceMap" : true //sourcemap 처리를 할 건지
    },
    "include": ["index.ts"], //어떤 파일이 컴파일 과정에 포함되는지
    "exclude" : ["node_modules"]
}

를 넣어준다. 이 외에도 다양한 옵션을 넣을 수 있다. 필요한 이유는 nodejs를 이용하고, 다양한 것을 import, export하기 위해서이다. 

 

위에서 컴파일 과정에 포함되는 파일이 index.ts이다. 그럼 이제 index.ts 파일을 하나 만들어보자

 

index.ts

console.log("hello")

 

package.json 에는 이를 추가해준다.

"scripts": {
    "test": "echo \"Error: no test specified\" && exit 1",
    "start" : "node index.js",
    "prestart" : "tsc"
  },

 

우리가 npm start를 하게 되면, 그 전에 prestart에서 tsc를 통해 먼저 컴파일해서  js파일을 만들고, 그 다음 만들어진 js파일을 실행하게 되는 것이다. 

 

그럼 이제 

$npm start를 해보자

 

콘솔 창에 hello가 출력되는 것을 볼 수 있다. 

 

---

 

 

 

index.ts

(export{}; 는 꼭 해줘야 한다. )

sayHi 함수를 호출할 때 에러가 뜬다. 이유는 매개변수의 개수가 맞지 않기 때문이다. 

자바스크립트에서는 이렇게 에러가 뜨지 않는 것이 큰 차이이고, 타입스크립트가 강력한 이유이다. 

 

그런데 여기서 만약,

 

gender에 ?를 붙여주면 에러가 뜨지 않는다. 이는 이 매개변수는 옵션, 즉 없어도 된다는 것이다. 이 상태로 콘솔에 출력하게 된다면 undefined로 나오게 될 것이다. 

 

---

 

타입 지정하기

이제 타입을 지정해보자. 매개변수와 함수의 리턴 타입을 지정해준다. 

호출 시 타입이 맞지 않으면 에러가 뜨는 것을 볼 수 있다.