TypeScript 5일차_인터페이스

# TypeScript 

## 인터페이스

• 인터페이스 : 동일한 규칙을 사용하겠다는 상호간의 약속을 의미 한다고 볼수 있음.

interface User {
    age: number;
    name: string;
}

var seho: User = {  // sech라는 변수를 User 타입으로 설정, 위에 정의한 약속에 따라 age, name 정의 필요.
    age: 12,
    name: '조세호'
}

함수의 '인자'를 정의하는 인터페이스.

// 함수에 인터페이스 활용.
function getUser(user: User) {
    console.log(user);
}

const capt: User = {
    age: 11,
    name: '캡틴'
}

getUser(capt);

함수 '구조'를 정의하는 인터페이스.

• 보통 이런 부분은 라이브러리로 만들어서 정의하기도 함.

// 함수의 스펙(=구조)에 인터페이스 활용.
interface SumFunction {
    (a:number, b:number): number;   // 인자, 반환타입 정의.
}

var sum: SumFunction;
sum = function(a:number, b:number): number {
    return a + b;
}

인덱싱 방식을 정의하는 인터페이스.

// 인덱싱
interface StringArray {
    [index: number]: string;
}

var arr:StringArray = ['aa', 'bb', 'cc'];
//arr[0]; // 'aa'
//arr[0] = 10 // string 아니므로 할당 불가.

인터페이스 딕셔너리 패턴.

// 인터페이스 딕셔너리 패턴.
interface StringRegexDictionary {
    [key: string]: RegExp;   // RegExp - 정규표현식 생성자
}

var obj: StringRegexDictionary = {
    //sth: /abc/,
    //cssFile: 'css'  // RegExp가 아닌 string 으로 에러.
    cssFile: /\.css$/,
    jsFile: /\.js$/,
}

//obj.cssFile // 이런식으로 접근 가능.
//obj['cssFile'] = 'a'    // RegExp가 아닌 string 으로 에러.

Object.keys(obj).forEach(function(value) {

})

인터페이스 확장(상속).

// 인터페이스 확장.
interface Person {
    name: string;
    age: number;
}

interface Developer extends Person {
    // name: string;
    // age: number;
    language: string;
}

var captain: Developer ={
    name: 'kim',
    age: 25,
    language: 'hi'
}