TypeScript - 인터페이스(interface)

 

let user:object;

user = {
 name: 'John',
 age: 30
}

console.log(user.name)

• 여기서 console.log(user.name) 입력하면 error가 발생하게 된다. 그 이유는 객체 내의 특정 속성 값(property)의 정의가 없기 때문이다.
• 이때 interface를 이용해서 나타내면 된다.

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

interface User {
 name : string;
 age : number;
 gender? : string;
 readonly birthYear : number;
 [grade: number] : string; // number를 key로 받고 string을 value로 받는다.
 // [grade: number] : Score; // 이렇게 위에서 type을 선언할 경우 Score에서 정의하지 않은 값이 들어가면 error가 발생한다.
}

let user : User = {
 name : 'John',
 age : 30,
 birthYear : 2000,
 1 : 'A',
 2 : 'B'
}

user.age = 10; // 밖에서 값을 바꿔줘도 동작한다.
user.gender = 'male';
// gender에 ?가 없고 user에서 gender에 대한 정보가 없다면 정보가 정의되지 않아 error 발생
// ?가 있다면 user에서 정의를 안해줘도 괜찮다.

// user.birthYear = 1990; // 여기서 error가 발생한다. readonly는 최초에 기입한 정보만 값을 가지고 있는다.

console.log(user.name)

• interface를 이용하여 property에 대한 정의를 해줬기 때문에 console.log에서는 error가 발생하지 않는다.
• ?는 optional 이므로 입력해도 안해도 괜찮다.
• readonly는 최초 기입에 대한 정보만 계속해서 가지고 있는다.
• 대괄호를 통해 key - value 기입이 가능하다.
• type을 정의할 경우 그 값 외에 값을 사용할 경우 error가 발생한다.

// interface를 이용한 함수 정의

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

const add : Add = function(x, y) {
 return x + y;
}
// num1는 x, num2는 y의 값을 갖는다.

add(10, 20); // 30

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

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

age(33) // true

• 이렇게 interface를 이용하여 함수도 정의할 수 있다.

// interface를 이용해 class 정의 implements

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

class Bwm implements Car {
 color = 'red';
 wheels = 4;
 start(){
  console.log('go..');
 }
}

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

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

// extends
interface Benz extends Car {
 door: number;
 stop(): void;
} // 이렇게 할 경우 Car의 속성을 받을 수 있다.

const benz : Benz = {
 door: 5,
 stop() {
  console.log('stop');
 }
 color: 'black',
 wheels: 4,
 start(){}
} // Car와 Benz의 속성을 모두 입력해줘야 error가 발생하지 않는다.

// 여러 개를 받아 확장 가능하다.
interface Toy {
 name: string;
}

interface ToyCar extends Car, Toy {
 price: number;
}