Skip to main content

인터페이스

Our First Interface#

interface LabeledValue {
label: string;
}
function printLabel(labeledObj: LabeledValue) {
console.log(labeledObj.label);
}
// 인터페이스의 프로퍼티가 있는지 여부만 판단 (Duck Typing)
let myObj = { size: 10, label: 'Size 10 Object' };
printLabel(myObj); // ok

Optional Properties#

  • 인터페이스에 생략가능한 프로퍼티를 지정할 수 있다.
interface SquareConfig {
color?: string; // '?' 접미사가 있으면 생략 가능
width?: number;
}
function createSquare(config: SquareConfig): { color: string; area: number } {
let newSquare = { color: 'white', area: 100 };
if (config.color) {
newSquare.color = config.color;
}
if (config.width) {
newSquare.area = config.width * config.width;
}
return newSquare;
}
let mySquare = createSquare({ color: 'black' }); // ok

Readonly properties#

  • 인터페이스에 변경할 수 없는 프로퍼티를 지정할 수 있다.
interface Point {
readonly x: number; // 변경 금지
readonly y: number; // 변경 금지
}
let p1: Point = { x: 10, y: 20 };
p1.x = 5; // error!
  • 변경할 수 없는 배열 타입
let a: number[] = [1, 2, 3, 4];
let ro: ReadonlyArray<number> = a; // ReadonlyArray<T>
ro[0] = 12; // error!
ro.push(5); // error!
ro.length = 100; // error!
a = ro; // error!

Excess Property Checks#

  • 일반적으로 인터페이스에 없는 프로퍼티는 허용하나, 특정 경우에는 인터페이스에 정의되지 않은 프로퍼티를 금지한다.
    • 객체 리터럴을 함수의 인자로 사용하거나, 변수에 할당할 경우에 해당
interface SquareConfig {
color?: string;
width?: number;
}
function createSquare(config: SquareConfig): { color: string; area: number } {
// ...
}
// error: 'colour'는 'SquareConfig'에 존재하지 않는다.
let mySquare = createSquare({ colour: 'red', width: 100 }); // error!