Today I Learned

매일 배운 것을 정리하며 기록합니다. 노마드 코더의 강의를 통해 typescript 공부를 했습니다.

---

Setting Typescript Up

1. typescript 설치

타입스크립트 프로젝트는 보통 typescript와 ts-node 패키지를 설치합니다.
노마드 코더에서는 global로 설치 했습니다.

yarn global add typescript

2. tsconfig.json 생성

타입스크립트 컴파일러의 설정파일인 tsconfig.json도 만들어 줘야합니다.
node.js는 타입스크립트를 이해하지 못하기 때문에 자바스크립트 코드로 컴파일하는 작업이 필요하기 때문입니다.
노마드 코더에서는 직접 만들어 주었고 tsc --init 명령으로도 만들 수 있습니다..
tsc --init으로 작성 시 많은 설정들이 생성되어 직접 파일을 만들어 자신에게 필요한 대로 셋업하는 것이 편한 거 같습니다.
타입스크립트를 사용하면서 필요한 설정들이 생기면 tsconfig.json에 추가할 수 있는 옵션에 관한 문서를 찾아보시는 것을 추천합니다.

tsconfig.json 파일 생성 후 셋업

{
  "compileOption": {
    "module": "commonjs",
    "target": "ES2015",
    "sourceMap": true
  },
  "include": ["index.ts"],
  "exclude": ["node_modules"]
}

3. index.ts 생성

index.ts는 index.js로 컴파일 해야 합니다.
tsc를 터미널에 입력하면 index.js와 index.js.map을 만들어 줍니다.

tsc

4. package.json 설정

tsc입력 후 index.js를 실행하는 것을 한 번에 처리하기 위해
package.json에 script를 만들어 yarn start명령어에 넣습니다.
prestart를 통해 컴파일 후 start를 통해 index.js를 실행합니다.
다음과 같이 package.json파일을 설정합니다.

yarn start 입력 시 다음과 같은 결과를 볼 수 있습니다.

---

First steps with Typescript

타입스크립트의 타입 기능이란 어떤 종류의 변수와 데이터인지 설정해 주어야 합니다.
이것이 타입스크립트로 개발할 때 얻을 수 있는 섬세함입니다.
그럼 코드를 작성해 보겠습니다.

1. 일반적인 자바스크립트 코드 느낌입니다.

const name = "Park",
  age = 26,
  gender = "male";

const sayHi = (name, age, gender) => {
  console.log(`Hello ${name}, you are ${age}, you are a ${gender}`);
};

sayHi(name, age, gender);
// 이 파일이 모듈이 된다는 것을 이해할 수 있도록 만들어 주는 코드
export {}; // 1번 줄에서 "블록 범위 변수 'name'을(를) 다시 선언할 수 없습니다.ts(2451)" 에러가 나는 걸 방지해 줌, 약간 버그같은 느낌

yarn start

$ tsc
$ node index.js
Hello Park, you are 26, you are a male

위의 코드에서 sayHi 함수의 인자 gender가 누락되면 어떤 일이 발생하는 지 살펴보겠습니다.

파일을 실행하기 전에 이미 에러 표시가 나오고 실행하면 자세한 메시지가 나옵니다.

자바스크립트에서는 잡아주지 못하는 에러를 타입스크립트에서는 찾아 줍니다.

하지만 의도적으로 gender 파라미터가 선택적으로 사용할 때가 있을 수 있습니다.
그럴 때에는 함수를 만들 때 '?'를 사용하여 해당 파라미터가 선택적이라는 것을 명시할 수 있습니다.

위의 기능을 통해 코드 작성자가 아니더라도 쉽게 해당 함수에서 어떤 파라미터가 필수이고 선택적인지 쉽게 파악할 수 있다는 장점을 누릴 수 있습니다.

---

Reference : 노마드 코더, 『Typescript로 블록체인 만들기』, #0~#0.4.