Web/[JS] Common

TypeScript

ihl 2021. 2. 24. 21:44

  TypeScript는 좀 더 엄격한 JavaScript 코드를 만들기 위한 언어이다. 좀 더 엄격한 규칙을 가진 TypeScript 코드를 컴파일 하면 JavaScript 코드가 생성된다는 의미이다. 먼저 TypeScript를 작성하기위한 세팅을 진행해보자.

 

1. Install TypeScript

npm install typescript --save-dev
yarn add typescript --dev

  먼저 npm 혹은 yarn으로 typescript를 설치한다.

 

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

  작업 폴더에 tsconfig.json 파일을 생성 후 위와 같이 작성한다. 컴파일 시 추가적으로 지정하고 싶은 옵션이 있다면 tsconfig.json 파일을 변경하면 된다. 주요 설정의 내용은 다음과 같다.

  • outDir : 컴파일 결과인 js 파일이 생성될 경로
  • include: 컴파일 대상인 ts 파일. 여러 파일을 지정하거나 폴더 내의 파일 전체를 지정할 수 있다.

2. Write TypeScript

const name = "Cookies",
  count = 3,
  taste = "salty"

const describeTaste = (name: string, count: number, taste?: string): string => {
  return `There are ${count} ${name}, It is ${taste}`;
};

describeTaste(name, count, taste);

export { };

  TypeScript 코드는 위와 같은 형식으로 되어있다. index.ts에 위와 같이 코드를 쓰고 자세히 분석해보자.

 

  먼저 describeTaste 함수를 자세히 살펴보자. JavaScript와 달리 파라미터의 타입을 지정해줄 수 있다. 위 코드에서는 name과 taste는 string, count는 number의 인자만 받을 수 있다. 또한 함수의 return 타입도 string으로 지정해준 것을 볼 수 있다.

 

  TypeScript는 함수의 인자 갯수도 엄격히 따진다. 원래 JavaScript에선 describeTaste(); 와 같이 인자의 갯수를 맞추지 않고 호출하여도 함수 내에서 인자로 넘어오지 않은 파라미터는 undefined로 사용된다. 그러나 Typescript의 경우 함수 선언 시 파라미터의 갯수와 함수 호출 시 인자의 갯수를 맞추어주지 않으면 오류가 발생한다.

 

  TypeScript에서 Optional한 파라미터는 ? 문자로 표현한다. 위 코드의 경우 taste? 라 표현되어있으므로, describeTaste("Kimchi", 2) 라 호출해도 오류가 발생하지 않는다.

 

interface Human {
  name: string;
  age: number;
}

class Student implements Human {
  public name: string;
  public age: number;
  public level: number;
  constructor(name: string, age: number, level?: number) {
    this.name = name;
    this.age = age;
    this.level = level;
  }
}

const ihl = new Student("ihl", 33);

const sayHi = (person: Human): string => {
  return `I am ${person.name}. ${person.age} years old`;
};

  TypeScript는 Class와 Interface 기능도 제공한다. JAVA의 interface와 class처럼 TypeScript에서도 interface에서  class에서 어떤 프라퍼티와 메소드가 필요한지 명시적으로 선언한 후 class에서 implements 키워드로 연결한 후 실제로 프라터피와 메소드를 구현한다.

 

const ihl:Student = new Student("ihl", 33);
const students: [Student] = [ihl];

  TypeScript는 변수와 배열의 타입도 지정 가능하다. 위 코드에서 students.push("hello")는 오류가 발생한다. students는 Student 타입의 배열이라고 선언하였기 때문이다.

 3. Run TypeScript

npm run tsc
yarn tsc

  위 명령어는 .ts 파일을 .js 파일로 컴파일한다. 이 때 컴파일 대상이 되는 파일은 tsconfig.json의 include 필드에 적어준 파일들이며, 변환된 파일은 node 명령어로 실행할 수 있다.

 

"scripts": {
    "prestart": "yarn tsc", //or npm run tsc
    "start": "node ./dist/index.js"
  }

  yarn start(혹은 npm start) 라는 명령어로 ts파일의 컴파일과 실행을 동시에 하려면 package.json에서 위와 같이 적어줄 수 있다. 작성 후 명령 창에서 yarn start 를 입력하면 yarn tsc가 실행된 후 node dist/index.js가 실행된다.

 

  nodeJS로 서버코드를 작성할 때 코드 변경 시 바로 재컴파일 해주는 nodemon이 있었듯이 TypeScript에도 tsc-watch가 있다. 필요하다면 해당 패키지를 설치 후 package.json을 변경해주면 된다.

 

참고 영상:

www.youtube.com/watch?v=-dyrcJr5NiQ&list=PL7jH19IHhOLNM5mePXxbpnPefi6PiiNCX&index=2