[TS] 인터페이스

매개변수에 타입 지정하기

let person = { name: 'Capt', age: 28 };

function logAge(obj: { age: number }) {
  console.log(obj.age); // 28
}
logAge(person);

 

인터페이스에 타입 지정하기

interface personAge {
  age: number;
}

function logAge(obj: personAge) {
  console.log(obj.age);
}
let person = { name: 'Capt', age: 28 };
logAge(person);

 

인터페이스 interface

옵션 속성 ?

필수로 사용하지 않아도 되는 값을 표시

속성을 선택적으로 적용할 수 있음

interface 인터페이스_이름 {
  속성?: 타입;
}

 

 

읽기 전용 속성 readonly

처음 생성 시에 값을 할당하고 그 이후에는 변경할 수 없음

interface CraftBeer {
  readonly brand: string;
}

let myBeer: CraftBeer = {
  brand: 'Belgian Monk'
};
myBeer.brand = 'Korean Carpenter'; // error!

 

읽기 전용 배열 ReadonlyArray<T>

읽기 전용 배열로 생성하여 값을 변경할 수 없음

let arr: ReadonlyArray<number> = [1,2,3];
arr.splice(0,1); // error
arr.push(4); // error
arr[0] = 100; // error

 

객체 선언과 관련된 타입 체킹

interface CraftBeer {
  brand?: string;
}

function brewBeer(beer: CraftBeer) {
  // ..
}
brewBeer({ brandon: 'what' }); 
// error: Object literal may only specify known properties, but 'brandon' does not exist in type 'CraftBeer'. Did you mean to write 'brand'?

brandon이란 속성이 정의되어 있지 않아 생긴 오류

 

let myBeer = { brandon: 'what' };
brewBeer(myBeer as CraftBeer);

코드를 위와 같이 작성하여 타입 추론을 무시할 수 있음

 

interface CraftBeer {
  brand?: string;
  [propName: string]: any;
}

정의하지 않은 속성을 사용하고 싶은 경우 위와 같이 코드 작성

 

함수 타입 정의하기

interface login {
  (username: string, password: string): boolean;
}

매개변수명이 일치하지 않아도 됨

let loginUser: login;
loginUser = function(id: string, pw: string) {
  console.log('로그인 했습니다');
  return true;
}

let loginUser: login;
loginUser = function(id, pw) {
  console.log('로그인 했습니다');
  return true;
}

 

클래스 타입 정의하기

interface CraftBeer {
  beerName: string;
  nameBeer(beer: string): void;
}

class myBeer implements CraftBeer {
  beerName: string = 'Baby Guinness';
  nameBeer(b: string) {
    this.beerName = b;
  }
  constructor() {}
}

 

인터페이스 확장(상속)

interface Person {
  name: string;
}
interface Developer extends Person {
  skill: string;
}
let fe = {} as Developer;
fe.name = 'josh';
fe.skill = 'TypeScript';

interface Person {
  name: string;
}
interface Drinker {
  drink: string;
}
interface Developer extends Person, Drinker {
  skill: string;
}
let fe = {} as Developer;
fe.name = 'josh';
fe.skill = 'TypeScript';
fe.drink = 'Beer';

 

하이브리드 타입

함수 타입이면서 객체 타입을 정의

interface CraftBeer {
  (beer: string): string;
  brand: string;
  brew(): void;
}

function myBeer(): CraftBeer {
  let my = (function(beer: string) {}) as CraftBeer;
  my.brand = 'Beer Kitchen';
  my.brew = function() {};
  return my;
}

let brewedBeer = myBeer();
brewedBeer('My First Beer');
brewedBeer.brand = 'Pangyo Craft';
brewedBeer.brew();

 

 

 

 

* 참고

implements extends

타입스크립트 핸드북

타입스크립트 공식문서(구)

타입스크립트 공식문서(신)

 

2023.04.27