[ts] 인터페이스

Lee Tae-Sung·2022년 12월 24일
0

ts

목록 보기
2/7

=> Object에선 특정 속성값들의 정보가 없기 때문.

1. ? 옵셔널

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

let user: User = {
    name: 'xx',
    age: 30
}

선언시 속성값이 선택으로 됨

2. readonly

3. []

grade에 무슨 뜻이 있는건 아님.

=> key와 벨류를 유기적으로 생성할 수 있게 해줌

4. 문자열 리터럴 타입

type Score = 'A' | 'B' | 'C' | 'F';

interface User {
    name: string;
    age: number;
    gender?: string;
    readonly birthYear: number;
    [grade:number]: Score;
}

let user: User = {
    name: 'xx',
    age: 30,
    birthYear: 1,
}

for (let i=0; i<2; i++) {
    user[i] = 'A'
}

console.log(user)

=> 다른 값이 개입하면 에러

5. interface function

interface Add {
    (num1: number, num2:number): number;
}

const add: Add = function(x, y) {
    return x+y;
}

=> 함수도 이렇게 input, output 타입 특정 가능

6. class 에 적용 implements

interface Car {
    color: string;
    wheels: number;
    start(): void;
}

class Bmw implements Car {
    color;
    wheels = 4;

    constructor(c:string) {
        this.color = c;
    }

    start() {
        console.log('go..')
    }
}

let a = new Bmw('black');
console.log(a)
a.start();

7. interface extends

interface Car {
    color: string;
    wheels: number;
    start(): void;
}

class Bmw implements Car {
    color;
    wheels = 4;

    constructor(c:string) {
        this.color = c;
    }

    start() {
        console.log('go..')
    }
}

let a = new Bmw('black');
console.log(a)
a.start();

interface Benz extends Car {
    door: number;
    stop(): void;
}

const benz: Benz = {
    color: 'black',
    wheels: 4,
    door: 5,
    start() {
        console.log('go');
    },
    stop() {
        console.log('stop');
    }
}

console.log(benz)

https://yamoo9.gitbook.io/typescript/interface/extends

  • 여러개의 interfece를 확장에 활용할수도 있음
interface Car {
    color: string;
    wheels: number;
    start(): void;
}

interface Toy {
    name: string;
}

interface ToyCar extends Car, Toy {
    price: number;
}
profile
긍정적인 에너지를 가진 개발자, 이태성입니다.

0개의 댓글