[JS & TS] 제네릭 , 타입가드

1. 제네릭

1-1. 제네릭의 사용

t

ype User = {

    id: number;

    name: string;

}

type Address = {

    zipcode: string;

    address: string;

}

function pipeOne(value: any): any {

    return value;

}

 

 

넣은걸 그대로 반환하는 함수이다.

이건 잘못 넣으면 당연히 잘못 나오게 된다.

 

• pipeOne 함수는 전달된 값을 그대로 반환하지만, any 타입을 사용하기 때문에 정확한 타입 검사가 이루어지지 않습니다.
• 잘못된 타입을 입력해도 에러가 발생하지 않아, 타입 안전성이 보장되지 않습니다.

 

function pipeTwo<T>(value: T): T {

    return value

}

 

T 라는 타입으로 들어오면 인자 값에 타입으로 T를 쓸거야~ 그리고 반환값으로 T를 쓸거야

 

pipeTwo<User>({ id: 1, name: 'Kim' })처럼 호출하면 User 타입을 강제하며,

User 타입에 맞지 않는 객체를 전달하면 에러가 발생합니다.

 

제네릭이 명확하게 드러나는 것은 객체이다

const pipeObjectOne = <T>(obj: T): T => {

    return obj;

}

 

let po2 = pipeObjectOne<User>({id: 1, name: '김', zipcode: 50213});

 

제네릭 타입으로 명시적으로 User타입을 사용하는 것을 확정한다.

그 내부 객체들의 User타입 기준으로 검사한다.

1-2. 클래스 제네릭

class State<S, Config={}>{

    private _state: S;

    config: Config;

    constructor(state: S, config: Config) {

        this._state = state;

        this.config = config;

    }

    getState(): S {

        return this._state;

    }

}

let s1 = new State<Address, { active: boolean}>({

    zipcode: 50213,

    address: '서울시',

}, {

    active: true,

})

const s1Data = s1.getState();

console.log(s1Data.zipcode, s1Data.address, s1.config.active);

 

• State 클래스는 제네릭 타입 S와 Config를 사용하여 각각 상태와 설정을 저장
• 객체 생성 시에 S와 Config 타입을 지정하여, 클래스의 멤버 변수 _state와 config가 각각 Address와 { active: boolean } 타입으로 강제된다.
• 이렇게 하면 타입이 지정된 상태를 유지하면서 특정 타입의 상태 데이터와 설정 데이터를 안전하게 다룰 수 있다.

 

 

1-3. 인터페이스 제네릭

입력값으로 객체를 주고 

그 객체에서 그 객체가 가지고있는 키 중에 하나의 값을 반환하는 함수를 만든다고 해보자

 

function getProperty<Type, Key extends keyof Type>(obj: Type, key: Key){

    return obj[key];

}

let x = {a:1, b:2, c:3, d:4};

getProperty(x, "a");

getProperty(x, "m");

 

interface KeyPair<T, U>{

    key: T;

    value: U;

}

let kv1 : KeyPair<number, string> = {key:1, value: 'Kim'};

let kv2 : KeyPair<number, number> = {key:2, value: 12345};

 

 

• KeyPair 인터페이스는 key와 value의 타입을 각각 제네릭 T와 U로 설정
• kv1과 kv2와 같이 서로 다른 타입을 가진 key와 value 쌍을 안전하게 생성할 수 있다.

 

 

2. 타입가드

**타입 가드(Type Guard)**는 TypeScript에서 특정 조건을 통해 변수의 타입을 좁히는 기능입니다. 타입 가드를 사용하면 TypeScript가 컴파일 시점에 변수가 어떤 타입인지 명확하게 판단할 수 있어, 코드의 타입 안전성을 높일 수 있다.

function doubleTypeFunction(a: number | string){

    if(typeof a === 'string'){

        return a.replace('x', 'X');

    }

    return a.replace('Y', 'y');

}

 

여기서 a가 string이 아닌 경우면 

replace라고하는 js메소드가 존재하지 않을 가능성이 있기 때문에

타입스크립트가 미리경고해주는 것이다.

타입 가드를 통해 TypeScript가 a의 타입을 추론할 수 있게 도와주며, 잘못된 타입 사용을 방지합니다.

 

-> 컴파일 타임의 타입가드 기능을 타입스크립트가 제공하고 있다!

function foo(a?:number | null){

    if(a === null) return; // 타입 가드: `a`가 null인 경우 종료

    console.log('display before');

    console.log(a?.valueOf());  //number의 값을 리턴하는

    //?는 옵션이 아니라 null이면 없는상황이면 undefined로 만드는 기능

    console.log('display after');

}

 

a?.valueOf()는 a가 undefined일 경우에도 안전하게 undefined를 반환하도록 하는 선택적 체이닝(?.)을 사용해 타입 오류를 방지합니다.

2-1. 인터페이스를 활용한 타입가드

interface Foo{

    foo:string;

    common:string;

}

function isFoo(arg: any): arg is Foo {

    return arg.foo !== undefined;

}

console.log(isFoo({foo:'ok', common: 'wow', active: false}));

 

 

 

isFoo는 객체를 리턴하는데, 

Foo 인터페이스와 argument가 같은지 확인한다.

 

 

• 함수의 반환 타입을 arg is Foo로 정의하여, 타입 가드 역할을 수행합니다.
• isFoo 함수는 arg에 foo 속성이 있는지를 검사하여 Foo 타입인지 판단합니다.
• 이처럼 사용자 정의 타입 가드를 사용하면 특정 타입을 조건부로 체크할 수 있으며, TypeScript는 isFoo 함수가 true를 반환할 경우 arg가 Foo 타입임을 인식합니다.

 

typeof나 instanceof 같은 연산자를 활용해 기본 타입을 검사하거나, null 체크를 통해 타입을 좁힐 수 있습니다~~