Frontend/TypeScript

[TypeScript] 인터페이스

okojin 2024. 8. 13. 15:48

객체 프로퍼티를 사용할 때 인터페이스를 사용

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

interface User {
    name: string;
    age: number;
    gender?: string; // 있어도 되고 없어도 되면 ? 추가 - 옵셔널 프로퍼티
    readonly birthYear: number;
    [grade:number]: Score; // Score에 입력한거 외에 다른 값 입력하면 에러
}

// 옵셔널 프로퍼티로 선언한 것 외에 모두 선언해야됨 안하면 에러
let user : User = {
    name: 'kim',
    age: 30,
    birthYear: 2000,
    1: 'A',
    2: 'B'
}

user.age = 10;
user.gender = 'male'; // user에 없고 이후에 추가할려면 에러 - 옵셔널 프로퍼티로 해야됨
user.birthYear = 1900; // readonly기 때문에 수정할려고 하면 에러

인터페이스 함수

interface Add {
    // 인자 값: 반환 값
    (num1:number, num2:number): number;
}

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

add(10, 20); // 30;

interface IsAdult {
    (age:number): boolean;
}

const a:IsAdult = (age) => {
    return age > 19;
}

a(33) // true;

인터페이스 클래스

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

// 확장은 여러개 가능
Interface Benz extends Car {
    door: number;
    stop(): void;
}

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

class Bmw implements Car {
    color;
    wheels = 4;

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

    start() {
        console.log("go..");
    }
}

const b = new Bmw('green');
console.log(b)
/*
Bmw: {
    "wheels": 4,
    "color": "green",
}
*/
b.start(); // go..