타입스크립트 - 매개변수 타이핑

함수 매개변수

function example(a: string, b?: number, c = false) {}

example("hi", 123, true);
example("hi", 123);
example("hi");

• a: 필수로 있어야하는 매개변수
• b: ?, 있어도 되고 없어도 되고
• c: 기본값으로 false 설정

나머지 매개변수

• 나머지 매개변수는 ...문법을 사용한다.
• 나머지 매개변수를 사용하는 매개변수는 항상 배열이나 튜플 타입이어야 한다.
• 나머지 매개변수는 배열의 전개 문법과는 달리 매개변수의 마지막에만 위치해야한다.

사용방법

function example(a: string, ...b: number[]) {}

example123("hi", 1, 2, 3, 4);

• 첫번째 매개변수에는 string 타입을, 나머지 매개변수는 number

나머지 매개변수는 마지막에만 위치해야 함

// Error!
// A rest parameter must be last in a parameter list.(1014)
function example(...a: string[], ...b: number[]) {}

매개변수 자리에 전개 문법을 사용할 수도 있다.

function example(...args: [number, string, boolean]) {}
example(2, "hi", false);
// function example(args_0: number, args_1: string, args_2: boolean): void

function example1(...args: [a: number, b: string, c: boolean]) {}
// function example1(a: number, b: string, c: boolean): void

매개변수에 구조분해 할당을 적용할 수 있다.

function destructuring({ props: { nested } }: { props: { nested: string } }) {}

destructuring({ props: { nested: "hello world" } });

함수 내부에서 this 사용하는 경우 명시적으로 표기해야 한다.

명시적으로 표기하지 않으면 any로 추론되어 에러가 발생한다.

// Error!
// 'this' implicitly has type 'any' because it does not have a type annotation.(2683)
function example() {
  console.log(this);
}

function example(this: Document, a: string, b: "this") {}

// Error!
// The 'this' context of type 'void' is not assignable to method's 'this' of type 'Document'
// this가 Document 타입일 수 없음을 알고 있어서 에러가 발생함
example("hello", "this");

// all과 같은 메서드를 사용해 this의 값을 document로 지정해주어야 한다.
example.call(document, "hello", "this");

메서드에서도 this를 사용할 수 있다.

일반적으로는 this 메서드를 갖고 있는 객체 자신으로 추론되기 때문에 this를 명시적으로 작성할 필요 없음

type Animal43 = {
  age: number;
  type: "dog";
};
const person = {
  name: "hyemin",
  age: 28,
  sayName() {
    this;
    // 객체 자기 자신
    // this: {
    //     name: string;
    //     age: number;
    //     sayName(): void;
    //     sayAge(this: Animal43): void;
    // }
    this.name;
  },
  sayAge(this: Animal43) {
    this; // this: Animal
    this.type;
  }
};