Web Dev/ELICE

23 (2/3) :: Generic

HJPlumtree 2021. 11. 25. 14:51

엘리스 SW 엔지니어 트랙 23일차

박성국 강사님 실시간 강의

 

 

23 (1/2) :: TypeScript Interface, 사용 이유 & 예시, 상속
링크 => https://forgottenknowledge.tistory.com/entry/23-12-TypeScript-Interface-%EC%82%AC%EC%9A%A9-%EC%9D%B4%EC%9C%A0-%EC%98%88%EC%8B%9C-%EC%83%81%EC%86%8D

 

23 (1/2) :: TypeScript Interface, 사용 이유 & 예시, 상속

엘리스 SW 엔지니어 트랙 21일차 박성국 강사님 실시간 강의 Interface와 제네릭 타입스크립트에서 조금 더 중요한 개념이라고 하신다 Interface 타입 체크에 사용 변수, 함수, 클래스에 사용 가능

forgottenknowledge.tistory.com

 

 

양이 많아서 2개로 쪼갰다

제네릭 시작!

 

 

Generic

데이터 타입 일반화(Generalize)

재사용성 높은 함수를 만들 때 사용

???? 이해 안간다

밑에 다가가면 이해가길

 

 

<T> 이녀석이 제너릭

number, string 등 넣어주는 곳에 사용하는데

좀 더 유연하게 사용할 수 있어 보인다

function getSize<T>(arr: T[]): number {
    return arr.length
}

const arr1 = [1, 2, 3]
console.log(getSize(arr1))

const arr2 = ['a', 'b', 'c']
console.log(getSize(arr2))

 

 

Generic 사용 함수

function toPair<T, U>(a: T, b: U): [T, U] {
    return [a, b]
}

toPair<string, string>('1', '2') // Good
toPair<string, number>('1', '2') // Error

 

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

const m1: Mobile<object> = {
    name: 's1',
    price: 1000,
    option: {
        color: 'red'
    }
}

const m2: Mobile<string> = {
    name: 's1',
    price: 1000,
    option: 'red'
}

 

// 같은 효과 다른 문법 1
interface GenericLogTextFn<T> {
    
}

// 같은 효과 다른 문법 2
interface GenericLogTextFn {
    <T>(text: T): T
}

 

 

클래스에도 사용

class Stack<T> {
    private data: T[] = []

    constructor() {}

    push(item: T): void {
        this.data.push(item)
    }

    pop(): T | undefined{
        return this.data.pop()
    }
}

 

 

Union Type

타입 여러개 연결 하려고 | 이거 사용하는 것

interface Person {
    name: string
    age: number
}

interface Developer {
    name: string
    skill: string
}

function introduce(someone: Person | Developer) {
    someone.name // Good
    someone.age // Error
    someone.skill // Error
}

 

합치기

interface Person {
    name: string
    age: number
}

interface Developer {
    name: string
    skill: string
}

function introduce(someone: Person & Developer) {
    someone.name
    someone.age
    someone.skill
}

 

 

keyof

function getProperty<T, O extends keyof T>(obj: T, key: O) {
    return obj[key]
}

let obj = {a: 1, b: 2, c: 3}
// 'a' | 'b' | 'c'

getProperty(obj, 'a')

 

 

Type Assertion

interface Person {
    name: string
    age: number
}

interface Developer {
    name: string
    skill: string
}

function introduce(someone: Person | Developer) {
    someone.name // Good
    (someone as Person).age
    (someone as Developer).skill
}