깜놀하는 해므찌로

typescript interface, extends, object 활용 예시 본문

IT

typescript interface, extends, object 활용 예시

agnusdei1207 2023. 5. 17. 11:00
반응형
SMALL
type Score = "A" | "B" | "C"; // 사용자정의 타입

interface User{
    name : string;
    age : number;
    gender? : string; // ? : 필수값 X
    readonly birth : number; // readonly : 읽기만 가능
    [grade:number] : Score; // grade 변수명 number 키 / Score 값
}

/** 기본 object */
let user : User = {
    name : "이름",
    age : 30,
    birth : 20001010,
    1 : "A",
    2 : "B"
}

user.gender = "male";

/* 함수 interface 예 */
interface Add{
    (num1:number, num2:number): number; // (인자): 리턴타입
}

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

add(10, 20);

/* 성인 여부 확인 함수 */
interface IsAdult{
    (num1:number): boolean; 
}

let isAdult: IsAdult = (age) =>{
    return age > 19; // boolean 타입 리턴
}

isAdult(30);

/** implements : 클래스 정의 */
interface Car{
    brand : string;
    color : string;
    start() : void // start 라는 이름의 함수 구현해야 함
}

class Bmw implements Car{
    color;
    brand = "BMW";
    constructor(c:string){ // 클래스 생성 시 값을 셋팅하도록 설정
        this.color = c;
    }
    start(){
        console.log("start 함수 구현 완료");
    }
}

let bmw = new Bmw("black");
console.log(bmw);
bmw.start();

/** extends */

interface Benz extends Car{ // Car 에 있는 속성을 그대로 받음
    age : number; // 속성 추가
    stop() : void // 함수 추가
}

let benz : Benz = {
    age : 10,
    stop(){
        console.log("stop 함수 구현");
    },
    brand : "Benz",
    color : "red",
    start(){
        console.log("start 함수 구현");
    }

}

/** 2개 이상 extends */

interface Toy{
    name:string;
}

interface ToyCar extends Toy, Car{
    price:number;
}

 

반응형
LIST