자료조사 : 타입스크립트(TypeScript)

- 타입스크립트란?

* 자바스크립트에 타입을 부여한 언어

 

- 사용 이유

* 에러의 사전 방지
* 개발 생산성 향상

* 완전한 객체 지향 프로그래밍 환경을 조성하기 위해

 

- 기본 타입

※ 타입 표기(Type Annotation) : 자바스크립트 코드에 타입을 정의하는 방식

• Boolean
• let str: string = 'hi';​
• Number

  let num: number = 10;​

• String

  let isLoggedIn: boolean = false;​

• Object
• Array

  let arr: number[] = [1,2,3];
  // 또는
  let arr: Array<number> = [1,2,3];​

• Tuple : 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식

  let arr: [string, number] = ['hi', 10];
  
  // 정의하지 않은 타입이나 인덱스로 접근할 경우 오류 발생
  arr[1].concat('!'); // Error, 'number' does not have 'concat'
  arr[5] = 'hello'; // Error, Property '5' does not exist on type '[string, number]'.​

• Enum : 특정 값(상수)들의 집합을 의미

  enum Avengers { Capt, IronMan, Thor }
  let hero: Avengers = Avengers.Capt;
  
  // 인덱스 번호로 접근 가능
  enum Avengers { Capt, IronMan, Thor }
  let hero: Avengers = Avengers[0];
  
  // 인덱스를 사용자 편의로 변경하여 사용 가능
  enum Avengers { Capt = 2, IronMan, Thor }
  let hero: Avengers = Avengers[2]; // Capt
  let hero: Avengers = Avengers[4]; // Thor​

• Any : 모든 타입에 대해 허용

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

• Void : 변수에는 undefined와 null만 할당, 함수에는 반환 값을 설정할 수 없는 타입

  let unuseful: void = undefined;
  function notuse(): void {
      console.log('sth');
  }​

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

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

 

- 함수

• 함수의 타입 선언
  기존 자바스크립트 함수의 선언 방식에서 매개변수와 함수의 반환 값에 타입을 추가
  ※ 함수의 반환 값에 타입을 정하지 않을 때는 void라도 사용
  

  // js
  function sum(a, b) {
      return a + b;
  }
  
  // ts
  function sum(a: number, b: number): number {
      return a + b;
  }​

• 함수의 인자
  타입스크립트에서 함수는 인자값이 필수적이며, 함수의 매개변수를 설정하게되면 undefined나 null(위에서 설명한 void 타입)이라도 인자로 넘겨야 함
  

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

  위와 같은 특성은 정의된 매개변수의 갯수 만큼 인자를 넘기지 않아도 되는 자바스크립트의 특성과 반대되며, 이러한 특성을 타입스크립트에서도 살리고 싶다면 ' ? '를 이용해서 아래와 같이 정의할 수 있음
  

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

  매개변수 초기화는 ES6 문법과 동일
  
  
• REST 문법이 적용된 매개변수
  타입스크립트에서의 Rest 문법 (아래)
  

  function sum(a: number, ...nums: number[]): number {
      const totalOfNums = 0;
      for (let key in nums) {
          totalOfNums += nums[key];
      }
      return a + totalOfNums;
  }​

  
  
  
• this
  타입스크립트에서는 자바스크립트의 this가 잘못 사용되었을 때 감지할 수 있음
  타입스크립트에서 this가 가리키는 것을 명시하려면 아래와 같은 문법을 사용합니다.
  

  function 함수명(this: 타입) {
      // ...
  }​

   예제)
  

  interface Vue {
      el: string;
      count: number;
      init(this: Vue): () => {};
  }
  
  let vm: Vue = {
      el: '#app',
      count: 10,
      init: function (this: Vue) {
          return () => {
              return this.count;
          }
      }
  }
  
  let getCount = vm.init();
  let count = getCount();
  console.log(count); // 10​

  위 코드를 타입스크립트로 컴파일 했을 때는 --noImplicitThis 옵션이 있더라도 에러가 발생하지 않음
  
  
• 콜백에서의 this
  앞에서의 일반적인 this와는 다르게 콜백으로 함수가 전달되었을 때의 this를 구분해줘야 할 때는 아래와 같이 강제 할 수 있음
  

  interface UIElement {
      // 아래 함수의 `this: void` 코드는 함수에 `this` 타입을 선언할 필요가 없다는 의미
      addClickListener(onclick: (this: void, e: Event) => void): void;
  }
  
  class Handler {
      info: string;
      onClick(this: Handler, e: Event) {
          // 위의 `UIElement` 인터페이스의 스펙에 `this`가 필요없다고 했지만 사용했기 때문에 에러가 발생
          this.info = e.message;
      }
  }
  
  let handler = new Handler();
  uiElement.addClickListener(handler.onClick); // error!​

  만약 UIElement 인터페이스의 스펙에 맞춰 Handler를 구현하려면 아래와 같이 변경※ 클래스의 메서드 방식으로 선언하는 것과 변수에 화살표 함수를 연결하는 것의 차이점!
• class Handler { info: string; onClick(this: void, e: Event) { // `this`의 타입이 void이기 때문에 여기서 `this`를 사용할 수 없음 console.log('clicked!'); } } let handler = new Handler(); uiElement.addClickListener(handler.onClick);​

 

- 인터페이스

ㅇㅇ

 

- 이넘

ㅇㅇ

 

 

출처 : https://joshua1988.github.io/ts/intro.html