<aside> 🔥 이번에는 기본보다 조금 더 나아가서 interface와 type 그리고 함수에서의 타입 작성

클래스에서의 타입 작성 더 나아가 extends, overload에 대해 알아보았다.

특히 클래스, overload는 다소 개념이 어렵다고 느껴져서 복습을 해야할 것 같다.

</aside>

Typescript 인터페이스

<aside> 🔥 (1) property를 통해서 객체를 표현할 때

let user: object;

user = {
  name: "xx",
  age: 30,
};

// undefined 에러 발생
console.log(user.name);

// 인터페이스 생성
interface User {
  name: string;
  age: number;
}

let user: User = {
  name: "xx",
  age: 30,
};

console.log(user.name);

(2) optional property

// 인터페이스 생성
interface User {
  name: string;
  age: number;
  gender?: string; // ?으로 optional property 지정
}

let user: User = {
  name: "xx",
  age: 30,
};

user.age = 10;
user.gender = "male";

(3) 읽기 전용

// 인터페이스 생성
interface User {
  name: string;
  age: number;
  gender?: string;
  readonly birthYear: number;
}

let user: User = {
  name: "xx",
  age: 30,
  birthYear: 2000,
};

user.age = 10;
user.gender = "male";
user.birthYear = 1990; // 읽기 전용이라 수정 불가.

(4) property 여러개 받기

// 인터페이스 생성
interface User {
  name: string;
  age: number;
  gender?: string;
  readonly birthYear: number;

  // number를 key로 string을 value로 받는 property 여러개 받을 수 있다.
  [grade: number]: string;
}

let user: User = {
  name: "xx",
  age: 30,
  birthYear: 2000,
  1: "A",
  2: "B",
};

user.age = 10;
user.gender = "male";

(5) 문자열 리터럴 타입

제한된 문자열만 받고 싶을 때 type 지정.

type Score = "A" | "B" | "C" | "F";

// 인터페이스 생성
interface User {
  name: string;
  age: number;
  gender?: string;
  readonly birthYear: number;

  // number를 key로 Score을 value로 받는 property 여러개 받을 수 있다.
  [grade: number]: Score;
}

let user: User = {
  name: "xx",
  age: 30,
  birthYear: 2000,
  1: "A",
  2: "B",
};

user.age = 10;
user.gender = "male";

(6) 함수 인터페이스

// 함수 인터페이스
interface Add {
  (num1: number, num2: number): number;
}

const add: Add = function (x, y) {
  return x + y;
};

add(10, 20);

interface IsAdult {
  (age: number): boolean;
}

const a: IsAdult = (age) => {
  return age > 19;
};

a(33) // true

(7) implements extends

// implements

interface Car {
  color: string;
  wheels: number;
  start(): void;
}

class Bmw implements Car {
  color;
  wheels = 4;
  constructor(c: string) {
    this.color = c;
  }
  start() {
    console.log("go...");
  }
}

const b = new Bmw("green");
console.log(b);

// extends

interface Benz extends Car {
  door: number;
  stop(): void;
}

(8) 선택적 매개변수는 앞에 쓸 수 없다.

function hello(age?: number, name: string): string {
  if (age !== undefined) {
    return `Hello, ${name}, You are ${age}.`;
  } else {
    return `Hello, ${name}`;
  }
}

굳이 쓰고싶다면 아래와 같이 쓸 수 있다.

function hello(age: number | undefined, name: string): string {
  if (age !== undefined) {
    return `Hello, ${name}, You are ${age}.`;
  } else {
    return `Hello, ${name}`;
  }
}

(9) this의 타입 정하기

interface User {
  name: string;
}

const Chul: User = { name: "chul" };

function showName(this: User) {
  console.log(this.name);
}

const a = showName.bind(Chul);
a();

(10) 오버로드

동일한 함수지만 매개변수의 타입이나 개수에 따라 다르게 동작하도록 하려면 오버로드를 써야한다.

interface User {
  name: string;
  age: number;
}

function join(name: string, age: number): User;
function join(name: string, age: string): string;
function join(name: string, age: number | string): User | string {
  if (typeof age === "number") {
    return {
      name,
      age,
    };
  } else {
    return "나이는 숫자로 입력해주세요.";
  }
}

const sam: User = join("Sam", 30);
const jane: string = join("Jane", "30"); 

</aside>