인터페이스 소개
인터페이스는 상호 간에 정의한 약속 혹은 규칙을 의미한다. 타입스크립트에서의 인터페이스는 보통 다음과 같은 범주에 대해 약속을 정의할 수 있다.
•
객체의 스펙 (속성과 속성의 타입)
•
함수의 파라미터
•
함수의 스펙 (파라미터, 반환 타입 등)
•
배열과 객체를 접근하는 방식
•
클래스
변수를 정의하는 인터페이스
interface User {
age: number;
name: string;
}
//변수에 인터페이스 활용
var jaewoong: User = {
age: 31,
name: '재웅'
};
TypeScript
복사
함수의 인자를 정의하는 인터페이스
interface User {
age: number;
name: string;
}
//함수에 인터페이스 활용
function getUser(user: User) {
console.log(user);
}
const jjw = {
name: '재웅',
age: 100
};
TypeScript
복사
함수 구조를 정의하는 인터페이스
//함수의 스펙(구조)에 인터페이스를 활
interface SumFunction {
(a: number, b: number): number; //해당 함수의 인자와 리턴타입을 정의한다
}
var sum: SumFunction;
sum = function(a: number, b: number): number {
return a + b;
}
TypeScript
복사
인덱싱 방식을 정의하는 인터페이스
interface StringArray {
[index: number]: string;
}
var arr: StringArray = ['a', 'b', 'c'];
arr[0] = 10; // '10' 형식은 'string' 형식에 할당할 수 없습니다. error
TypeScript
복사
인터페이스 딕셔너리 패턴
var arr: StringArray = ['a', 'b', 'c'];
//딕셔너리 패턴
interface StringRegexDictionary {
[key: string]: RegExp
}
var obj: StringRegexDictionary = {
cssFile1: 'css', // 'string' 형식은 'RegExp' 형식에 할당할 수 없습니다. error
cssFile2: /\.css$/, //정규표현식이 와야됨
jsFile: /\.js$/
}
obj['cssFile'] = 'a'; // 'a' 형식은 'RegExp' 형식에 할당할 수 없습니다.
TypeScript
복사
인터페이스 확장(상속)
interface Person {
name: string;
age: number;
}
//인터페이스 확장(상속) 전
interface Devloper {
name: string;
age: number;
language: string;
}
//인터페이스 확장(상속) 후 (extends)
interface Devloper extends Person {
language: string;
}
//상속받은 property에 대해 모두 정의해주어야한다.
var jjw: Developer = {
language: 'hi',
age: 100, //Person의 프로퍼티
name: 'jjw' //Person의 프로퍼티
}
TypeScript
복사
