TypeScript

interface

객체

객체는 object라는 타입으로 정의합니다. 하지만 객체의 property를 정의하여 사용할 경우에는 interface를 사용합니다. 아래 예시를 통해 알아보겠습니다.

type Score = 'A' | 'B' | 'C' | 'F'; --- (4)

interface User {
  name: string;
  age: number;
  gender?: string; --- (1)
  readonly birthYear: number; --- (2)
  [grade: number]: string; --- (3)
  [grade: number]: Score; --- (4)
}

이제 `user`를 사용하기 위해서는 `User`타입으로 선언하여 사용합니다.

let user: User = {
  name: 'kim',
  age: 20,
  birthYear: 2000, --- (2)
  1: 'A', --- (3)(4)
  2: 'B', --- (3)(4)
}

(1) User에서 보면 gender뒤에 물음표'?' 가 있는 것을 확인하실 수 있습니다. 이는 선택적인 변수를 사용할 경우에 물음표를 붙여서 변수를 선언합니다. 위 코드에서 user에 name과 age를 선언하지 않으면 에러가 발생하지만 gender는 optional한 변수이므로 선언하지 않아도 에러가 발생하지 않습니다.

(2) 다음은 readonly에 대해 알아보겠습니다. readonly는 말 그대로 읽기 전용이므로 수정이 불가합니다. user에서 선언하는 것은 가능하지만 user.birthYear = 1980;으로 재 선언 시에는 에러가 발생합니다.

(3)

interface User {
  1?: string;
  2?: string;
  3?: string;
  4?: string;
}

User에서 1~4학년까지의 학점을 기입하고 싶다면 위 코드와 같이 입력해도 되지만 이를 문자열로 선언하게 되면 (3)과 같이 깔끔하게 정의할 수 있습니다.

(4) (3)번에서의 성적을 string으로 받기에는 범위가 너무 넓습니다. 이럴 경우에는 문자열 리터럴 타입을 사용할 수 있습니다. 이를 type Score = 'A' | 'B' | 'C' | 'F';로 지정했다면 user에서 학년별 성적에는 A, B, C, F 이외의 string은 받을 수 없습니다.

함수

interface Add {
  (num1:number, num2:number): number;
}

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

const addNum = add(10, 20)

console.log(addNum)

// 결과: 30

(num1:number, num2:number): number;에서 제일 마지막 number는 함수의 반환값에 대한 변수 타입입니다. 이렇게 함수의 반환값에 대한 타입을 지정할 수 있습니다.

class

interface로 class를 정의할 때는 implements를 사용합니다. Implements와 Extends에 대한 내용은 아래의 블로그를 참고하시면 됩니다.

Implements & Extends

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

class Bmw implements Car{
  color = 'black';
  wheels = 4;
  start(){
    console.log('start');
  }
}

위 코드와 같이 Bmw class에서 Car를 implements하여 선언할 수 있습니다. 여기서 color로 constructor를 사용해 보겠습니다.

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

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

//결과
// Bmw: {
//   "wheels": 4,
//   "color": "green"
// }

다음은 extends를 사용하여 확장해보도록 하겠습니다.

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

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

class benz: Benz = {
  color: 'black',
  wheels: 4,
  start(){
    console.log('start')
  },
  door: 4,
  stop(){
    console.log('stop')
  }