
type Score = 'A' | 'B' | 'C' | 'F'
interface User {
name : string;
age : number;
gender? : string;
readonly birthYear : number;
[grade:number] : Score;
}
let user : User = {
name : 'xx',
age : 30,
birthYear : 2000,
1 : 'A',
2 : 'B'
}
위의 코드는 유저 정보를 담고 있는 인터페이스를 정의하고, 인덱서를 사용하여 유저의 등급을 저장할 수 있는 코드입니다. 이를 통해 다양한 등급 값을 저장하고, 필요한 등급 값을 손쉽게 조회할 수 있습니다.
// Dictionary 인터페이스 정의
interface Dictionary<T> {
[key: string]: T; // 인덱서(indexer)로서, string 타입의 속성 이름을 가지고, 해당 속성의 값은 T 타입입니다.
}
// Dictionary<number> 타입의 변수 dict를 선언하고, 값을 할당합니다.
let dict: Dictionary<number> = { a: 1, b: 2, c: 3 };
// dict 객체의 'b' 속성 값을 출력합니다. 출력 결과는 2가 됩니다.
console.log(dict['b']);
위 코드는
Dictionary<T>인터페이스를 정의하고, 이를 이용해dict변수를 선언하고 초기값을 할당합니다.dict변수는Dictionary<number>타입을 가지므로, 인덱서를 이용해 string 타입의 키로number타입의 값을 할당할 수 있습니다. 마지막으로,dict객체의 'b' 속성 값을 출력하면 2가 출력됩니다.
// Add 인터페이스 정의
interface Add {
(num1:number, num2:number): number;
}
// Add 인터페이스를 이용해 add 함수를 정의
const add : Add = function(x, y){
return x + y;
}
// add 함수 호출
add(10, 20);
// IsAdult 인터페이스 정의
interface IsAdult {
(age:number):boolean;
}
// IsAdult 인터페이스를 이용해 a 함수를 정의
const a:IsAdult = (age) => {
return age > 19;
}
// a 함수 호출
a(33);
Add와 IsAdult라는 두 개의 인터페이스를 정의하고, 이를 이용해 각각 add와 a라는 함수를 정의하고 있습니다.
Add 인터페이스는 (num1: number, num2: number) => number 타입의 함수 시그니처를 가지고 있습니다. 즉, num1과 num2라는 두 개의 숫자 타입 인자를 받아서, 숫자 타입을 반환하는 함수입니다.
IsAdult 인터페이스는 (age: number) => boolean 타입의 함수 시그니처를 가지고 있습니다. age라는 숫자 타입 인자를 받아서, boolean 타입 값을 반환하는 함수입니다.
각각의 인터페이스를 이용해서 add와 a라는 두 함수를 정의하고 있습니다.
add 함수는 Add 인터페이스를 이용해서 정의한 것으로, 두 개의 숫자를 더한 결과를 반환합니다.
a 함수는 IsAdult 인터페이스를 이용해서 정의한 것으로, age 인자가 19보다 큰 경우 true를 반환하고, 그렇지 않은 경우 false를 반환합니다.
// Car 인터페이스 정의
interface Car {
color: string;
wheels: number;
start(): void;
}
// BMW 클래스 정의, Car 인터페이스를 구현(implement)함
class BMW implements Car {
color: string;
wheels = 4;
constructor(c:string){
this.color = c;
}
start() {
console.log('go...')
}
}
// BMW 클래스 인스턴스 생성
const b = new BMW('green');
console.log(b);
b.start();
// Toy 인터페이스 정의
interface Toy {
name: string;
}
// ToyCar 인터페이스 정의, Car 인터페이스와 Toy 인터페이스를 확장(extend)함
interface ToyCar extends Car, Toy {
price: number;
}
주어진 코드에서는
Car인터페이스를 정의하고,BMW클래스를 이용해Car인터페이스를 구현하고 있습니다. 이 클래스는color와wheels프로퍼티를 가지고 있으며,start()메소드를 구현하고 있습니다.
Toy인터페이스도 정의되어 있으며,ToyCar인터페이스는Car인터페이스와Toy인터페이스를 확장하고(extend),price프로퍼티를 추가로 가지고 있습니다. 이렇게 정의된ToyCar인터페이스를 이용하면, 자동차와 관련된 속성 뿐 아니라, 장난감 자동차와 관련된 속성까지 모두 다룰 수 있는 유용한 인터페이스를 만들 수 있습니다.