4. 인터페이스

CHOYEAH·2023년 11월 5일
0

TypeScript

목록 보기
4/23
post-custom-banner
  • 변수와 함수에 활용
    interface User {
       age: number;
       name: string; 
    }
    
    // 변수에 활용한 인터페이스
    const choyeah: User = {
        age: 38,
        name: 초예
    }
    
    // 함수에 활용한 인터페이스
    function getUser(user: User) {
        console.log(user);
    }
  • 함수의 스펙에 인터페이스를 활용
    interface SumFunction {
        (a: number, b: number): number;
    }
    
    var sum1: SumFunction;
    sum1 = (a: number, b: number): number => {
        return a + b;
    }
  • 인덱싱
    interface StringArray {
        [index: number]: string;
    }
    
    var arr: StringArray = ['a', 'b', 'c'];
    arr[0] = 'Only strings are possible';
  • 인터페이스의 딕셔너리 패턴
    interface StringRegexDictionary {
        [key: string]: RegExp;
    }
    
    const obj: StringRegexDictionary = {
        'cssFile': /\.css$/,
        'jsFile': /\.js$/ 
    }
    
    Object.keys(obj).forEach((key, idx) => {
        console.log(key, idx);
    })
    
    // [LOG]: "cssFile",  0 
    // [LOG]: "jsFile",  1
  • 인터페이스 확장(상속)
    // 인터페이스 확장(상속)
    interface Person {
        name: string;
        age: number;
    }
    
    interface Developer extends Person{
        language: string;
    }
    
    var choyeah: Developer = {
        name: '초예',
        age: 100,
        language: 'ts'
    }

    상속받은 인터페이스의 타입들 모두 정의를 해줘야한다.

profile
Move fast & break things
post-custom-banner

0개의 댓글