5. 인터페이스

인터페이스: 상호간의 약속

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

// 변수에 활용한 인터페이스
var seho: User={
    age: 2,
    name: 'john'
}

 

< 함수의 인자를 정의하는 인터페이스 >

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

function getUser(user: User){
    console.log(user);
}

 getUser라는 함수는 User라는 특정 형식의 데이터만 받겠다는의미이다!!!!!   

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

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

const capt = {
    name: '캡틴',
    age: 100
}
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 = ['a', 'b', 'c'];
arr[0]= 10   //오류난다!!!1
arr[0]= 'a'

 

<인터페이스 딕셔너리 패턴>

//딕셔너리 패턴
interface StringRegexDictionary {
    [key: string]: RegExp;
}

var obj: StringRegexDictionary = {
    // sth: /abc/,
    cssFile: /\.css$/,
    jsFile: /\.js$/,
}

obj['cssFile'] = 'a' // RegExp가 아니고 string이여서 오류난다.

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

<인터페이스 확장(상속)>

interface Person{
    name: String;
    age: number;
}

interface Developer{
    name: String;
    age: number;
    language: String;
}

이걸 확장하면

interface Person{
    name: String;
    age: number;
}

interface Developer extends Person{
    language: String;
}

var capt2: Developer = {
    language: 'en',
    age: 14,
    name: 'dfdf'
}