rhanziy

TS - interface 로 type 키워드 구현 본문

Html_css_js

TS - interface 로 type 키워드 구현

rhanziy 2023. 1. 27. 18:11

원래는 intersection type이라고 & 연산자를 통해 두 타입을 만족하는 코드를 짤 수 있었다.

// intersection type
// 두 타입을 만족하는 타입을 뜻함

type Animal2 = { name : string }
type Cat2 = { age : number } & Animal2  

let munzi :Cat2 = { name : 'munzi', age : 10 }

 

 

그런데 interface로도 가능. extends 하면 되니까.

interface Student{
    name : string;
}

interface Student{
    score : number;
}

interface Teacher extends Student {
    age : number
}

let 학생 :Student = { name : 'kim', score : 100 };
let 선생 :Teacher = { name : 'kim', age : 20, score: 75 }

 

type과 interface의 차이점은

interface는 더 유연해서 중복선언이 가능하다. Student를 한번이상 선언해도 오류X

그리고 중복속성을 미리 에러로 잡아준다.

무슨의미냐면 Student를 확장한 Teacher 인터페이스에서 name : number로 지정하는 실수를 해도 미리 알려준다는 뜻.

 

 

interface ModelInfo{
    brand : string,
    serialNumber : number,
    model : string[]
}

let 상품 :ModelInfo = { brand : 'Samsung', serialNumber : 1360, model: ['TV', 'phone'] }
interface Cart {
    product : string,
    price : number
}

interface NewCart extends Cart {
    card : boolean
}

let 장바구니 :NewCart[] = [
    {
        product : '청소기',
        price : 7000,
        card : true
    },
    {
        product : '삼다수',
        price : 800,
        card : false
    }
]

array object의 interface 타입 지정

 

 

interface Calc {
    plus : (a: number, b:number) => number;
    minus : (a: number, b:number) => number;
}

let homework4 :Calc = {
    plus(a, b){
        return a + b;
    },
    minus(a, b){
        return a - b;
    }
}

homework4.plus(2,5);
homework4.minus(6,5);

함수를 가지고있는 오브젝트의 interface 타입 지정

Comments