Typescript - 유니온/교차 타입

interface Car {
    name : 'car',
    color : string,
    start() : void
};

interface Mobile {
    name : "galaxy",
    color : string,
    call() : void
};

function getGift(a: Car | Mobile):void {
    console.log(a.color);
    if(a.name === 'car') {
        a.start()
    } else {
        a.call()
    }
}

위가 유니온

 

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

interface Mobile {
    name : string
    color : string
    call() : void
    net: string
};

const Toy: Car & Mobile = {
    name: "바보",
    color: "Red",
    start(){},
    call(){},
    price: 50000,
    net: "kt"
}

위가 교차

 

 

class Car {
    color:string;
    
    constructor(color:string){
        this.color = color
    }
    stat(){
        console.log("start!!")
    }
}

const bmw = new Car("red")

 

class Car {
    public name:string = "car" // 만역 이 네임이 public이 아닌 private일 경우 상속받은 showName()의 this.name에서 에러가남
    public color:string
    constructor(color:string){
        this.color = color;
    }
    start(){
        console.log("start!!")
        console.log(this.name) // 이게 위의 네임이 퍼블릭이 아닌 프라비잇일 경우 여기서만 this.name을 사용할 수 있음
    }
};

class bmw extends Car {
    constructor(color: string){
        super(color)
    }
    showName() {
        console.log(this.name)
    }
};

const z4 = new bmw("black")

즉 정리하면

public = 자식 클래스, 클래스 인스턴스 모두 접근 가능 (아무것도 적지 않으면 보통 퍼블릭)

private = 해당 클래스 내부에서만 접근 가능 (상속받은 자식 클래스에서도 접근 불가) , 샵~으로도 표현 가능

protected = 해당 클래스 및 상속받은 자식 클래스에서만 접근 가능

 

 

제네릭 설명

코드 재사용하기 용이함

function getSize(index:number[] | string[] | boolean[] | object[]):number {
    return index.length
};

const array1 = [1,2,3];
getSize(array1);

const array2 = ['a','b','c','d'];
getSize(array2);

const array3 = [false,true,true,true,false];
getSize(array3);

const array4 = [{}, {}, {name:"han",age:40}];
getSize(array4);

// function getSize(index:number[] | string[] | boolean[] | object[]):number {
function getSize<T>(index: T[]):number {
    return index.length
};

const array1 = [1,2,3];
getSize<number>(array1); // 꺾쇠 안이 위의 T[]에서 T가 넘버로 바뀜

const array2 = ['a','b','c','d'];
getSize<string>(array2);

const array3 = [false,true,true,true,false];
getSize<boolean>(array3);

const array4 = [{}, {}, {name:"han",age:40}];
getSize<object>(array4);

interface Mobile<T> {
    name: string;
    price: number;
    option: T;
}

const apple:Mobile<object> = {
    name: "아이폰",
    price: 500000,
    option: {
        color: "다크 브라운",
        address: "부산 금정구"
    },
};

const samsung:Mobile<string> = {
    name: "갤럭시",
    price: 500000,
    option: "이것은 갤럭시의 힘!!"
}

 

유틸리티 타입

interface User {
    name: string;
    age: number;
    address: string;
    gender: "m" | "f"
};

type TEST = keyof User; // 여기서 TEST는 "name" | "age" | "address" | "gender" 가 된다.

const a:TEST = "gender" // 이러면 에러가 안남
const b:TEST = "" // 위의 네임,에이지,어드레스,젠더가 아닐 경우 에러가 남

interface User {
    name: string;
    age: number;
    address: string;
    gender: "m" | "f"
    phone?: string
};

let admin:User = { // 이러면 에러가 남, 인터페이스로 정의된 어드레스와 젠더가 입력되지 않았기에
    name: "한주호",
    age: 40
}

// Partial
let admin2:Partial<User> = { // Partial로 감싸주면 에러가 나지 않음. 파셜로 감싸주면 아래와 같다는 의미가 됨
    name: "한주호",
    age: 40
}

// interface User {
//     name?: string,
//     age?: number,
//     address?: string,
//     gender?: "m" | "f"
// }


// Required
let admin3:Required<User> ={ // 리콰이어로 설정할 경우 인터페이스로 정의된 폰의 옵션도 필수로 다 적어야함 그래서 에러가남 (폰을 적으면 에러가 사라짐)
    name: "한주호",
    age: 40,
    address: "부산",
    gender: "m",
}