2. Typescript Basic(with 노마드코더)

아래의 영상을 보고 개인적으로 정리한 글입니다
링크 : 노마드 코더의 타입스크립트 강의

// index.ts
const name = 'Nicolas',
  age = 24,
  gender = 'male'

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

sayHi(name, age);

export {};

index.ts 를 위와 같이 작성하면 sayHi 함수에서An argument for 'gender' was not provided 라는 에러가 발생. 3개의 인자를 받기로 했는데 2개만 넣었다고 말해준다.

// index.ts
const name = 'Nicolas',
  age = 24,
  gender = 'male'

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

sayHi(name, age);

export {};

이번에는 gender 인자 옆에 ? 하나만 추가해주었지만 어떠한 에러도 발생하지 않는다. ? 는 해당 인자가 있을수도 없을수도 있음을 알려준다.

파일이 변경될 때 마다 컴파일을 위해 매번 yarn start 를 해주기 귀찮으므로

yarn add tsc-watch --dev

tsc-watch 를 설치한다.

// package.json
"scripts": {
    "start": "tsc-watch --onSuccess \" node dist/index.js\""
  },

package.json 의 start 스크립트를 위와 같이 변경하고 root 폴더에서 src 폴더와 dist 폴더 2개를 만든다. src 폴더 안에는 .ts 확장자를 가진 파일들이 모이는 곳이고 dist 폴더에는 .ts 파일들이 컴파일 된 .js 파일들이 생길 것이다. 이를 위해서 tsconfig.json 파일을 설정해준다.

// package.json
{
  "compilerOptions": {
    "module": "commonjs", // nodejs 를 사용하고 import 및 export 가능하게 만든다.
    "target": "ES2015", // 어떤 버전의 JavaScript 로 컴파일 되고 싶은지?
    "sourceMap": true, // 소스맵 생성 여부
    "outDir": "dist", // ouput 폴더 지정.
  },
  "include": [
    "src/**/*"
  ], // 컴파일 과정에 포함할 파일 명시.
  "exclude": [
    "node_modules" // 컴파일 과정에 제외할 파일 명시.
  ]
}

// src/index.ts
const sayHi = (name: string, age: number, gender: string): string => {
  return `Hello ${name}, you are ${age}, you are a ${gender}`;
}

console.log(sayHi("Nicolas", 444, "male"));

export {};

src/index.ts 를 위와 같이 변경하고 yarn start 로 실행해보면
결과값이 잘 보일 것이다. tsc-watch 는 파일의 변경을 감지하고 에러가 발생했는지 지켜보는 역할을 하고 재실행 시켜 준다.(마치 nodemon 처럼)