TypeScript/TypeScript - 기초부터 실전까지

8. 인터페이스 활용 방법 (변수, 함수 인자, 함수 구조, 인덱싱, 딕셔너리 패턴, 상속)

DEV-Front 2023. 10. 8. 17:21
반응형
interface User{
    age : number;
    name : string
}

// 변수를 인터페이스 활용
var seho : User = {
    age : 33,
    name : '세호'
};

// 함수의 인터페이스 활용 (많이사용)
function getUesr(user : User) : void {
    console.log(user)
}
const capt = {
    age : 44,
    name : '캡틴'
}
getUesr(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 = ['a','b','c']
// arr[0] = 20; //에러

// 인터페이스 딕셔너리 패턴 ★
// RegExp 정규표현식
interface StringRegexDictionary {
    [key : string] : RegExp
}

var obj: StringRegexDictionary = {
    // sth : /abc/,    
    cssFile : /\.css$/,
    jsFile: /\.js$/,
}
// obj['cssFile'] = 'a'; 에러

Object.keys(obj).forEach(function(value){
    console.log(value);
})


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

interface Developer extends Person{
    language : string;
}

var captain : Developer = {
    name : 'capt',
    age : 100,
    language : 'ts'
}
반응형