[Typescript] Typescript의 타입과 함수

TypeScript 기본 타입 (12가지)

• Boolean
• Number
• String
• Object
• Array
• Tuple
• Enum
• Any
• void
• Null
• Undefined
• Never

Array

타입이 배열인 경우 간단하게 아래와 같이 선언

let arr: number[] = [1,2,3];
let arr: Array<number> = [1,2,3]; //generic 사용

Tuple

튜플은 배열의 길이가 고정되고 각 요소의 타입이 지정되어 있는 배열 형식을 의미한다.

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

이 때, 정의하지 않은 타입, 인덱스로 접근할 경우 오류가 발생한다.

Enum

C, Java와 같은 다른 언어에서 흔하게 쓰이는 타입으로 특정 값(상수)들의 집합을 의미

enum Avengers { Capt, IronMan, Thor }
let hero: Avengers = Avengers.Capt;

// 1. 이넘은 인덱스 번호로도 접근 가능
let hero: Avengers = Avengers[0];

// 2. 만약 원한다면 이넘의 인덱스를 사용자 편의로 변경해 사용 가능
enum Avengers { Capt == 2, IronMan, Thor }
// => 배열의 인덱스가 2부터 시작!
let hero: Avengers = Avengers[2]; // Capt
let hero: Avengers = Avengers[4]; // Thor

Any

`모든 타입에 대해서 허용`한다는 의미로, 기존에 js로 구현되어 있는 웹 서비스 코드에 ts를 점진적으로 적용할 때 활용하면 좋은 타입

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');
}

Never

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

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

  }
}

Typescript에서의 함수

타입스크립트로 정의할 수 있는 타입 3가지

• 함수의 파라미터(매개변수)
• 함수의 반환
• 함수의 구조

함수의 기본적인 타입 선언

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

기존 자바스크립트 함수의 선언 방식에서 매개변수와 함수의 반환 값에 타입을 추가

이 때, 함수의 반환 값에 탑입을 정하지 않을때는 `void`라도 사용

함수의 인자

ts에서는 함수의 인자를 모두 필수 값으로 간주한다. 따라서, 함수의 매개변수를 설정하면 `undefined`나 `null`이라도 인자로 넘겨야하며 컴파일러에서 정의된 매개변수 값이 넘어 왔는지 확인한다. 달리 말하면 정의된 매개변수 값만 받을 수 있고 추가로 인자를 받을 수 없다는 의미

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

REST 문법이 적용된 매개변수

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

console.log(sum(1,2,3,4,5,6));
// a = 1, nums = [2,3,4,5,6]

this

타입스크립트에서 this가 가리키는 것을 명시하려면 아래와 같은 문법을 사용한다.

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

콜백에서의 this

앞에서 살펴본 일반적인 상황에서의 `this`와는 다르게 콜백으로 함수가 전달되었을 때의 `this`를 구분해줘야 할 때가 있다. 그럴땐 아래와 같이 강제할 수 있다.

interface UIElement {
  // 아래 함수의 `this: void` 코드는 함수에 `this` 타입을 선언할 필요가 없다는 의미입니다.
  addClickListener(onclick: (this: void, e: Event) => void): void;
}

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

Reference

https://velog.io/@soulee__/TypeScript-%ED%83%80%EC%9E%85%EC%8A%A4%ED%81%AC%EB%A6%BD%ED%8A%B8-%EC%9E%85%EB%AC%B8-1#2-typescript-%EA%B8%B0%EB%B3%B8-%ED%83%80%EC%9E%85-12%EA%B0%80%EC%A7%80