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
인터페이스를 이용하면, 자동차와 관련된 속성 뿐 아니라, 장난감 자동차와 관련된 속성까지 모두 다룰 수 있는 유용한 인터페이스를 만들 수 있습니다.