타입스크립트(TypeScript) 알아보기

타입스크립트란?

• Microsoft에 의해 개발/관리되고 있는 오픈소스 프로그래밍 언어이다.
• 자바스크립트에 타입을 부여한 언어로 자바스크립트의 확장된 언어라고 볼 수 있다.
  • 자바스크립트의 Superset이므로 기존의 자바스크립트 문법을 그대로 사용할 수 있다.
    
    
    

자바스크립트 타입스크립트 차이점

• 동적타입(자바스크립트) vs 정적타입(타입스크립트)
• 인터프리터(자바스크립트) vs 컴파일(타입스크립트)
• 객체 지향 기능(타입스크립트)
  
  

타입스크립트 특징

• 강력한 정적 타입 지정
  • 컴파일 단계에서 오류를 포착할 수 있다.
• 컴파일 동작
  
  • tsc 명령어로 타입스크립트를 자바스크립트로 컴파일 후 사용한다.

  npm install -g typescript
  tsc --version
  tsc ./src/index.ts

• 외부 라이브러리를 위한 type definition 파일 지원(.d ts 파일)
  • 기존에 정의 되지않은 모듈의 타입 정보를 별도로 선언할 수 있는 설정 문서
• 타입 추론
  • 명시적으로 타입 선언이 되어있지 않은 경우 타입스크립트는 타입을 추론해 제공한다.

  let num = 12;
  num = 'Hello type!';
  // TS2322: Type '"Hello type!"' is not assignable to type 'number'.

  
  

타입스크립트의 장단점

🔍 장점

• 기존 자바스크립트 소스와의 호환

• ECMAScript의 가장 최신 업데이트를 빠르게 반영한다.

• 에러의 사전 방지

  • 런타임이 아닌 컴파일 환경에서 에러가 발생해 의도하지 않은 코드의 동작을 예방할 수 있다.

  // math.js
  function sum(a, b) {
  	return a + b;
  }
  
  sum('10', '20'); // 1020

  // math.ts
  function sum(a: number, b: number) {
  	return a + b;
  }
         
  sum('10', '20'); // Error: '10'은 number에 할당될 수 없습니다.

• 객체 지향 프로그래밍 지원

  • 인터페이스, 클래스, 상속 등의 기능을 제공하며 객체 지향 코드를 작성할 수 있다.

  // 인터페이스
  interface ITodo {
  	id: number;
  	content: string;
  	completed: boolean;
  }
  
  // 클래스와 상속
  class Animal {
  	move(distanceInMeters: number = 0) {
  		console.log(`Animal moved ${distanceInMeters}m.`);
  	}
  }
         
  class Dog extends Animal {
  	bark() {
  		console.log('Woof! Woof!');
  	}
  }
  
  const dog = new Dog();
  dog.bark();
  dog.move(10);
  // "Woof! Woof!"
  // "Animal moved 10m."

• 인텔리센스(자동완성)

  • 타입스크립트는 인터페이스 등을 통해 큰 틀을 미리 정의해놓고 코드를 작성하기 때문에 타입 자체가 하나의 훌륭한 documentation 역할을 한다.

🔍 단점

• 컴파일 옵션, 모듈 사용, 프레임워크 사용때 초기 설정이 까다롭다.
• 작성할 코드가 많아진다.
• class, interface 이름 때문에 오류가 생길 수가 있다.
  
  

타입스크립트 기본 타입

:를 이용하여 자바스크립트 코드에 타입을 정의하는 방식을 타입 표기(Type Annotation)라고 한다.

• 문자열 (: string)

  let str: string = 'hello';

• 숫자 (: number)

  let num: number = 10;

• 진위값 (: boolean)

  let show: boolean = true;

• 객체 (: object)

  let obj: object = {name: 'henry', age: 29};

  객체의 타입 지정도 가능

  let obj: { name: string, age: number } = {
  	name: 'henry',
  	age: 29
  }

• 배열 (: 타입[])

  let arr: string[] = ['a', 'b', 'c'];

  제네릭을 사용할 수 있다. (: Array<타입>)

  let arr: Array<number> = [1,2,3];

• 튜플 (: [타입, 타입])

  • 타입의 길이와 타입을 지정

  let arr: [string, number, number] = ['hi', 1, 2 ];

• Any (: any)

  • 모든 타입에 대해서 허용

  let str: any = 'hi';
  let num: any = 10;
  let arr: any = ['a', 2, true];

• Void (: void)

  • 변수에는 undefined와 null만 할당

  let unuseful: void = undefined;

  • 함수에는 반환 값을 설정할 수 없는 타입

  function notuse(): void {
  	console.log('msg');
  }

• null, undefined

  • 기본적으로 null 과 undefined는 다른 모든 타입의 하위 타입

  let num: number = undefined;
  let str: string = null;
  let obj: { a: 1, b: false } = undefined;
  let arr: any[] = null;
  let und: undefined = null;
  let nul: null = undefined;
  let voi: void = null;

  • 컴파일 옵션 "strictNullChecks": true 를 사용하면 any와 각자 자신들 타입에만 할당 가능
    • ex) any = null, any = undefined, null = null, undefined = undefined
    • 예외적으로 undefined는 void에 할당 가능
    • null 또는 undefined를 허용하고 싶은 경우 유니온 타입 사용
      • ex) string | null, number | undefined

• Never (: never)

  • 함수의 끝에 절대 도달하지 않는다는 의미를 지닌 타입

  function neverEnd(): never {
  	while (true) {
  
  	}
  }

  
  

타입스크립트에서의 함수

• 함수의 기본적인 타입 선언

  • 함수의 반환 값에 타입을 정하지 않을 때는 void라도 사용

  function sum(a: number, b: number): number {
  	return a + b;
  }
  
  sum(10, 20); // 30

• 함수의 파라미터에 타입을 정의

  • 타입스크립트는 함수의 인자를 모두 필수 값으로 간주하므로 함수의 매개변수를 설정하면 undefined나 null이라도 인자로 넘겨야한다.

  function sum(a: number, b: number) {
  	return a + b;
  }
  
  sum(10); // error, too few parameters
  sum(10, 20, 30); // error, too many parameters

• 함수의 반환 값에 타입을 정의

  function add(): number {
  	return 10;
  }

  
  

자바스크립트에 타입스크립트 적용하기

🔍 주의사항

• 기능적인 변경은 하지 않을 것
• 테스트 커버리지가 낮을 땐 함부로 타입스크립트를 적용하지 않을 것
• 처음부터 타입을 엄격하게 적용하지 않을 것 (점진적으로 strict 레벨을 증가)
  • any 타입으로 선언 후 올바른 타입으로 변환하는 것을 추천

🔍 적용 절차

• 타입스크립트 환경 설정

  • 프로젝트 생성 후 NPM 초기화 명령어 npm init으로 package.json 파일을 생성
  • 프로젝트 폴더에서 npm i typescript로 타입스크립트 라이브러리를 설치
  • 타입스크립트 설정 파일 tsconfig.json을 생성하고 기본 값을 추가

• 자바스크립트 파일을 타입스크립트 파일로 변환
• any 타입 선언
• any 타입을 더 적절한 타입으로 변경
• 타입스크립트 컴파일 명령어 tsc로 타입스크립트 파일을 자바스크립트 파일로 변환