[TypeScript] 타입스크립트 사용해보기 [5] (Generic, Keyof, as, as keyof, typeof) [5.4.3 version]

📝Generic

/** ---- Generic ---- **/
// function getSize(arr: number[] | string[])

// ---- same as above ----
function getSize<T>(arr: T[]): number{
    return arr.length;
}

const arr1 = [1,2,3];
console.log(getSize<number>(arr1)); // 3

const arr2 = ["a", "b", "c"];
console.log(getSize<string>(arr2)); // 3

const arr3 = [false, true, true]
console.log(getSize<boolean>(arr3)); // 3

const arr4 = [{}, {}, {"name" : "team"}]
console.log(getSize<object>(arr4)); // 3

interface User2 {
    nm: string;
    age: number;
}

interface Book {
    price: number
}

/** ---- Generic extends ---- **/
const user2: User2 = {nm : "lee", age : 20};
const book: Book = {price : 3000};

// Generic을 확장해 nm : string을 반드시 포함시키는 타입만 받는다는 의미
function showMyName<T extends {nm : string}>(data: T): string {
    return data.nm;
}

showMyName(user2); // lee
showMyName(book);  // 에러 발생 (semantic)

/** Generic 추가 예시 **/
// 사용 예시
class Container<T> {
    private data: T[];

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

    getItem(index: number): T {
        return this.data[index];
    }
}

/** -------------------------------------- **/

// 사용 예시
let numberContainer = new Container<number>();
numberContainer.addItem(1);
numberContainer.addItem(2);
let firstItem = numberContainer.getItem(0); // firstItem의 타입은 number

interface Pair<T, U> {
    first: T;
    second: U;
}

let pair1: Pair<number, string> = { first: 1, second: "two" };
let pair2: Pair<string, boolean> = { first: "three", second: true };

/** -------------------------------------- **/

// 제네릭 인터페이스
interface Mobile<T> { 
   name: string;
   price: number;
   option: T; // 제네릭 타입 - option 속성에는 다양한 데이터 자료가 들어온다고 가정
}

// 제네릭 자체에 리터럴 객테 타입도 할당 할 수 있다.
const m1: Mobile<{ color: string; coupon: boolean }> = {
   name: 's21',
   price: 1000,
   option: { color: 'read', coupon: false }, // 제네릭 타입의 의해서 option 속성이 유연하게 타입이 할당됨
};

const m2: Mobile<string> = {
   name: 's20',
   price: 900,
   option: 'good', // 제네릭 타입의 의해서 option 속성이 유연하게 타입이 할당됨
};

/** -------------------------------------- **/

function identity<T extends numOrStr>(p1: T): T {
   return p1;
}

/** -------------------------------------- **/
function translate<T extends (a: string) => number, K extends string>(x: T, y: K): number {
   return x(y);
}

// 문자숫자를 넣으면 정수로 변환해주는 함수
const num = translate((a) => { return +a; }, '10');
console.log('num: ', num); // num : 10

/** -------------------------------------- **/

// 사용 예시
const toArray2 = <T>(a: T, b: T): T[] => { ... }
// 출처: https://inpa.tistory.com/entry/TS-📘-타입스크립트-Generic-타입-정복하기 [Inpa Dev 👨‍💻:티스토리]

 

📝Keyof, as

/** ------ keyof ------ **/

interface Rabbit {
    name: string;
    age: number;
    place: string;
    move: () => void;
}

type KeyofRabbit = keyof Rabbit
// "name" | "age" | "place" | "move"

const rabbit1: KeyofRabbit = "age";  // 🆗 OK!
const rabbit2: KeyofRabbit = "food"; // ⚠️ Error!

/** ------ as ------ **/

const someValue: any = "This Is As Test";
const strLength: number = (someValue as string).length;

console.log(strLength);


/** ------ as keyof ------ **/
week[checkbox.code] → checkbox.code가 어떤 타입인지 몰라서 에러 발생
week[checkbox.code as keyof Week] → as keyof로 명시가능

keyof은 인터페이스에 정의된 “키”를 literal type으로 변경한다

as의 경우 any따위로 두루뭉실하게 잡힌 타입을 “어떠한 타입이다”라고 임시로 정해준다

 

📝typeof

const person = { name: "Alice", age: 25 };
type Person = typeof person; // { name: string; age: number; } 타입

typeof에 변수를 넣을 경우 변수의 타입을 유추해서 type을 만든다