TS) 타입스크립트(TypeScript) 입문 (1)

타입스크립트(TypeScript)란 ??

타입스크립트는 자바스크립트에 타입을 부여한 언어이며 자바스크립트의 확장된 언어라고 볼 수 있다.

타입스크립트를 사용하는 이유는 ??

크게 두 가지가 있다.
1. 에러의 사전 방지

• ex) 두 수의 합을 구하는 함수 코드

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

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

두번째 코드처럼 타입스크립트를 사용한 경우에는 의도하지 않은 코드의 동작을 예방할 수 있다.

2. 코드 가이드 및 자동 완성 ( => 개발 생산성 향상 )

• 코드를 작성할 때 개발 툴의 기능을 최대로 활용할 수 있다.
• VScode는 툴의 내부가 타입스크립트로 작성되어 있어 타입스크립트 개발에 최적화되어 있다.
• 변수에 대한 타입이 지정되어 있기 때문에 VScode에서 해당 타입에 대한 API를 미리 보기로 띄워죽게 되어 API를 일일이 입력하는 것이 아니라 tab으로 빠르고 정확하게 작성해나갈 수 있다.

타입스크립트의 기본 타입

12가지

• Boolean : true/false
• Number 숫자형
• String 문자열
• Object 객체형
• Array 배열
• Tuple 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열형식
• Enum 특정 값(상수)들의 집합
• Any 모든 타입에 대해 허용
• Void 변수에 undefined와 null만 할당하고, 함수에는 반환 값을 설정할 수 없는 타입
• Null
• Undefined
• Never 함수의 끝에 절대 도달하지 않음

타입스크립트에서의 함수

1. 함수의 기본적인 타입 선언

// 기존의 javascript 문법
function sum(a,b) {
  return a+b;
}

// typeScript 적용
function sum(a: number, b: number):number {
  return a+b;
}

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

2. 함수의 인자

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

• 타입스크립트에서는 함수의 인자를 모두 필수 값으로 간주하기 때문에 함수의 매개변수를 설정하면 'undefined'나 'null'이라도 인자로 넘겨야한다.
  -> 정의된 매개변수 값만 받을 수 있고 추가로 인자를 받을 수 없다는 의미

• 정의된 매개변수의 갯수 만큼 인자를 넘기지 않아도 되려면

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

3. REST 문법이 적용된 매개변수

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

4. 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

• 위 코드는 타입스크립트로 컴파일 했을 때 만일 '--noImplictThis' 옵션이 있더라도 에러가 발생하지 않는다.

5. 콜백에서의 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/guide/functions.html#%EC%BD%9C%EB%B0%B1%EC%97%90%EC%84%9C%EC%9D%98-this