TypeScript 속성 학습 - 3

Generic 제네릭

클래스나 함수, 인터페이스를 다양한 타입으로 재사용할 수 있다.

function getSize<T>(arr: T[]): number{
    return arr.length;
}
const arr1 = [1, 2, 3];
getSize<number | string>(arr1);

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

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

const arr4 = [{}, {}, {name: "Tom"}];
getSize<object>(arr4);


interface Mobile<T> {
    name: string;
    price: number;
    option: T;
}
// option에 제네릭을 이용할 수 있다.

 

혹은 객체의 모습이 정해저 있다면 다음과 같이 사용해도 된다.

//<{color: string; coupon: boolean}>이라 적어줘도 된다.
const m1:Mobile<object> = {
    name: 's21',
    price: 1000,
    option: {
        color: 'red',
        coupon: false,
    },
}

const m2:Mobile<string> = {
    name: 's20',
    price: 900,
    option: 'good'
}

또다른 예제를 보자

interface User {
    name: string;
    age: number;
}
interface Car {
    name: string;
    color: string;
}
interface Book {
    price: number;
}

const user: User = { name:'a', age: 10 };
const car: Car = { name: 'bmw', color: 'red' };
const book: Book = { price: 3000 };

function showName<T extends {name: string}>(data: T): string {
    return data.name;
}

showName(user);
showName(car);
// showName(book);

extends를 이용해 프로퍼티의 타입을 정해주고 사용해도 된다.

 

 

keyof

인터페이스의 키값중 하나를 이용할 때 사용한다.

interface User {
    id: number;
    name: string;
    age: number;
    gender: "m" | "f";
}
type UserKey = keyof User; // 'id' | 'name' | 'age' | 'gender'
const uk:UserKey = 'id';

 

Partial<T>

프로퍼티를 모두 옵셔널로 바꿔준다.

interface User2 {
    id: number;
    name: string;
    age: number;
    gender: "m" | "f";
}
// interface User2 {
//     id?: number;
//     name?: string;
//     age?: number;
//     gender?: "m" | "f";
// }
let admin: Partial<User> = {
    id: 1,
    name: 'bob',
}

 

 

 

Required<T>

모든 프로퍼티를 필수로 바꿔줌

interface User3 {
    id: number;
    name: string;
    age: number;
    gender: "m" | "f";
}
let admin2: Required<User> = {
    id: 1,
    name: 'bob',
    age: 26,
    gender: "m"
}

 

 

Readonly<T>

읽기 전용으로 바꿔준다.

interface User4 {
    id: number;
    name: string;
    age?: number;
}
let admin3: Readonly<User4> = {
    id: 1,
    name: 'bob',
}
admin3.id = 4;

 

 

Record<K, T>

K는 Key, T는 Type으로 지정가능함

// interface Score {
//     "1": "A" |  "B" |  "C" |  "D";
//     "2": "A" |  "B" |  "C" |  "D";
//     "3": "A" |  "B" |  "C" |  "D";
//     "4": "A" |  "B" |  "C" |  "D";
// }
// const score: Score = {
//     1: "A",
//     2: "B",
//     3: "C",
//     4: "D",
// }
type Grade = "1" | "2" | "3" | "4";
type Score = "A" | "B" | "C" | "D";
const score: Record<Grade, Score> = {
    1: "A",
    2: "B",
    3: "C",
    4: "D",
}

interface User5 {
    id: number;
    name: string;
    age: number;
}
function isValid(user: User5) {
    const result: Record<keyof User5, boolean> = {
        id: user.id >0,
        name: user.name !== '',
        age: user.age > 0
    }
    return result;
}

 

 

Pick<T, K>

T 타입에서 K 프로퍼티만 뽑아 사용함

interface User6 {
    id: number;
    name: string;
    age: number;
    gender: "M" | "W";
}
const admin4: Pick<User, "id" | "name"> = {
    id: 0,
    name: 'Bob'
}

 

 

Omit<T, K>

특정 프로퍼티를 제외하고 사용한다.

interface User7 {
    id: number;
    name: string;
    age: number;
    gender: "M" | "W";
}
const admin5: Omit<User, "age" | "gender"> = {
    id: 0,
    name: 'Bob'
}

 

 

Exclude<T1, T2>

T1에서 T2를 제외시켜 사용(프로퍼티가 아닌 타입에서)

type T1 = string | number | boolean;
type T2 = Exclude<T1, number>;

 

 

NonNullable<Type>

Null과 undefined를 제외시키고 타입을 생성

type T3 = string | null | undefined | void;
type T4 = NonNullable<T3>;