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'
}
반응형