[코딩앙마] 타입스크립트 2. 인터페이스(interface)

프로퍼티에 타입을 정해서 객체를 정의하고자 할때 인터페이스를 사용한다.

인터페이스에서 정해준 타입이 아닌 값을 넣어주려고 해도 에러가 나고, 인터페이스에 있는 모든 프로퍼티를 다 넣어주지 않아도 에러가 난다.

interface User {
  name : string,
  age : number
}

let person : User = {
  name : 'mike',
  age : 60
}

interface User {
  name : string,
  age : number
}

// 에러
let person1 : User = {
  name : 'mike',
  age : '60살'
}

// 에러
let person2 : User = {
  name : 'mike',
}

 

interface외에 새로운 속성을 추가하려고 하면 에러가 발생한다.

interface User {
  name : string,
  age : number
}

let person : User = {
  name : 'mike',
  age : 60
}

// 에러를 띄움
person.rank = 'A'

 

옵션 ?

입력을 해도 되고 안해도 되는 값은 ?을 사용해서 옵션으로 넣어 줄 수 있다.

interface User {
  name : string,
  age : number,
  rank? : string
}

let person : User = {
  name : 'mike',
  age : 60
}

 

readonly

readonly를 붙여 값을 읽기만 하게 할 수도 있다. 최초에만 설정할 수 있고 그 이후에는 수정할 수 없다.

interface User {
  name : string,
  age : number,
  rank? : string,
  birthday : number
}

let person : User = {
  name : 'mike',
  age : 60,
  birthday : 2000
}

// 에러 없음
person.birthday = 2022;

interface User {
  name : string,
  age : number,
  rank? : string,
  readonly birthday : number
}

let person : User = {
  name : 'mike',
  age : 60,
  birthday : 2000
}

// 에러
person.birthday = 2022;

 

인덱스 시그니처

성적을 입력한다고 할 때 이렇게 일부만 입력하면 에러가 나기때문에

interface Student {
  name : string,
  1 : string,
  2 : string,
  3 : string,
  4 : string,
}

let bong : Student = {
  name : 'bong',
  1 : 'A',
  2 : 'C'
}

 

옵션으로 표현할 수 밖에 없다.

interface Student {
  name : string,
  1? : string,
  2? : string,
  3? : string,
  4? : string,
}

let bong : Student = {
  name : 'bong',
  1 : 'A',
  2 : 'C'
}

 

이렇게 길어질 때 문자열 인덱스 시그니처를 사용할 수 있다.

number를 key로 가지고 string을 value로 가지는 프로퍼티를 여러개 가진다는 뜻이다.

interface Student {
  name : string,
  [grade : number] : string; // [key : key타입] : value타입
}

let bong : Student = {
  name : 'bong',
  1 : 'A',
  2 : 'C'
}

 

단순한 타입으로 받기에 너무 광범위해 들어갈 수 있는 값을 정해주고 싶을 때 문자열 리터럴 타입으로 값을 지정해줄 수 있다.

type Score = 'A' | 'B' | 'C' | 'D' | 'F';

interface Student {
  name : string,
  [grade : number] : Score;
}

let bong : Student = {
  name : 'bong',
  1 : 'A',
  2 : 'C'
}

 

함수 정의

interface를 이용해서 함수도 정의할 수 있다.

// (인자1 : 인자1 타입, 인자2 : 인자2타입) return 값 타입
interface Add {
  (num1 : number, num2 : number) : number
}

const add : Add = (a, b) => {
  return a + b
}

 

Class 정의

implements

implements를 사용해서 class도 정의해줄수있다.

interface Car {
  color : string,
  wheel : number,
  start() : void
}

class Bmw implements Car {
  color;
  wheel = 4;
  
  constructor(c:string){
    this.color = c;
  }

  start() {
    console.log('start')
  }
}

const firstCar = new Bmw('red');

 

extends

이미 선언된 interface를 상속받아서 확장할 수 있다.

interface Car {
  color : string,
  wheel : number,
  start() : void
}

interface Benz extends Car {
    stop() : void
}

const benz : Benz = {
  color : 'red',
  wheel : 4,
  start() {
    console.log('start')
  },
  stop() {
    console.log('stop')
  }
}

 

동시에 여러개도 확장할 수 있다.

interface Fruits {
  name : string
}

interface Menu {
  menuType : string
}

interface FruitMenu extends Fruits, Menu {
  price : number
}