타입스크립트 - 기본타입 + 함수

타입스크립트를 쓰는 이유?

 

자바스크립트는 인터프리티어

 

자바스크립트는 알다시피 타입을 정의하지 않고 사용한다.

타입이 틀리다면, 오류가 있다면 브라우저에서 콘솔에서야 확인할 수 있다.

 

이유는 자바스크립트는 인터프리티어이기 때문이다.

인터프리티어란 컴파일 과정을 거치지 않고 바로바로 실행하는 것을 이야기한다.

 

브라우저 개발자도구에서 conosole.log() 하면 바로 출력이 나오듯이 컴파일 과정이 필요가 없기 때문에

브라우저에 와서야 타입오류를 발견 할 수 있다.

 

타입스크립트는 자바스크립트의 타입을 정의하고 타입스크립트 컴파일러 또는 바벨을 통해 자바스크립트 코드로 변환한다.

코딩 중에도 타입에러를 발견 할 수 있기 때문에 에러를 사전에 방지할 수 있고, 미리 정의해둔 타입에 대해서는 자동완성 기능도 주어진다.

 

하지만 코드량이 증가하기 때문에 컴파일 시간이 오래 걸린다는 단점도 있습니다.

---

기본타입은 12가지가 있다.

• Boolean : true, false
• Number : 숫자형
• String : 문자형
• Object : 객체형
• Array : 배열
• Tuple : 배열 길이가 고정되고 각 요소의 타입이 지정되있는 배열 형식, 정의 되지 않는 타입, 인덱스로 접근 할 경우 오류가 발생
• Enum : 특정 값(상수)들의 집합을 의미, 각 요소에 인덱스처럼 번호가 주어진다.
• Any : 모든 타입을 허용
• Void : undefined 와 null 만 할당하고, return 이 없는 함수에 선언
• Null : Null
• Undefined : Undefined
• Never : 함수의 끝에 절대 도달하지 않는다는 의미?

1) 함수

 

함수에서 타입은 3가지로 정의 할 수 있다.

• 파라미터의 타입
• 반환 타입
• 구조 타입

function sum(a, b) {
  return a + b;
}


function sum(a: number, b: number): number {
  return a + b;
}

• 매개변수 a, b 의 타입 정의
• 반환 타입은 return 이 있는 곳이 아닌 파라미터 오른쪽에 : type 을 정의해준다. return 이 없다면 void 를 사용한다.
• 구조의 타입 - 매개변수 이외에는 변수가 없으므로 생략한다.

만약 파라미터의 갯수가 맞지 않게 들어온다면 undefined 나 null 이 아닌 error 가 발생한다.

 

1-1 rest)

배열의 타입만 잘 정해주면 REST 문법도 사용가능하다. 

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

1-2 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

this 역시 타입만 잘 정의해준다면 사용 할 수 있다.

 

여기서 this는 vm의 메서드로 init 함수가 호출됬고 this 바인딩은 vm의 환경변수 el, count, init 함수를 담는다.

init 이 this로 count 를 찾을때 init 함수의 스코프 레벨에서 찾아서 count 의 10을 찾을 수 있는 것임

 

메서드가 아닌 순수함수 또는 화살표함수는 this 바인딩이 되지않는다.

 

1-3) 콜백에서의 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;
    }
}

const uiElement = {
  addClickListener: () => {}
}

let handler = new Handler();
uiElement.addClickListener(handler.onClick); //

addClickListener의 인자로 함수를 받아서 콜백함수를 만들었습니다.

콜백함수가 된 onClick 의 매개변수로 this 의 타입으로 void를 선언했는데

 

Handler에 정의 된 onClick 은 Handler 라는 타입을 보내주고 있네요 당연히 에러입니다.

 

수정)

class Handler {
    info: string;
    onClick(this: void, e: Event) {
        // `this`의 타입이 void이기 때문에 여기서 `this`를 사용할 수 없습니다.
        console.log('clicked!');
    }
}
let handler = new Handler();
uiElement.addClickListener(handler.onClick);

똑같이 콜백함수의 매개변수 this 의 타입도 void 로 맞춰줘야 합니다.

 

정리,

 

자바스크립트는 인터프리티어로 컴파일 하지 않으며 오류는 브라우저가 실행되서야 알 수 있다.

타입스크립트를 이용하면 타입스크립트의 컴파일러 또는 바벨의 도움으로 코딩 중에도 오류를 검출 할 수있고 미리 정의해둔 타입은 자동완성 기능이라는 소소하지만 많은 도움이 되는 기능이 생긴다. api 콜 할때 도움이 많이 됨,

 

기본타입에는 12가지가 있으며

 

ex) let a :string = 'abc'

바로 위의 예시와 같이 간단하고 직관적인 타입 이외에

다소 헷갈릴수 있는 함수의 매개변수나 return의 타입 또는 this, 콜백의 this등도

자신이 정의해둔 타입이 아닌 이상 무조건적으로 error 가 발생한다.