[코딩앙마] typescript - 3 : 인터페이스

1. 인터페이스 및 초기값 설정 

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


// 1. Interface
interface User {
    name : string;     // 필수
    age : number;      // 필수
    gender? : string;  // 옵션
    readonly birthYear : number;  // 읽기 전용 (수정X)
    [grade : number] : Score;  // 키:number, 값:Score 인 프로퍼티를 여러개 받을 수 있음
}


// 2. Interface 기준으로 초기값 설정
let user : User = {  
    name : 'xx',
    age: 30,
    birthYear : 2000,
    1 : 'A',
    2 : 'B',
}

console.log(user.age) // 30

 

 

2. 인터페이스로 함수 정의

// 1. Interface
interface Add {
  (num1: number, num2: number): number;

}

// 2. Interface를 이용해서 함수 생성
const add : Add = (x,y) => {
  return x + y
}

console.log(add(3,5))  // 8

 

 

3. 인터페이스로 클래스 정의

// 1. Interface
interface Car {
  color: string;
  wheels: number;
  start(): void;
}

// 2. Interface 이용해서 클래스 생성
class Bmw implements Car {
  color;
  wheels = 4;
  constructor(c:string) {  // 생성될때 color를 입력받기
    this.color = c;
  }
  start(){
    console.log('go..')
  }
}

const b = new Bmw('green')
console.log(b) // Bmw: { 'wheels': 4, 'color': 'green'}
b.start() //  "go.."

 

 

3-1. 인터페이스 확장

// 1. Interface
interface Car {
  color: string;
  wheels: number;
  start(): void;
}

// 1-2. Interface 확장
interface Benz extends Car {
  door: number;
  stop(): void;
}

// 1-3. Interface 기준으로 초기값 작성
const benz : Benz = {
  door : 5,
  color : 'black',
  wheels : 4,
  stop(){
    console.log('stop')
  },
  start(){
    console.log('go..')
  }
}

 

 

3-2. 인터페이스 확장

// 1. Car Interface
interface Car {
  color: string;
  wheels: number;
  start(): void;
}

// 2. Toy Interface
interface Toy {
  name: string;
}

// 3. Car와 Toy의 인터페이스 확장
interface ToyCar extends Car, Toy {
  price : number;
}