[TIL] [타임어택9기][리뉴얼] 타입스크립트 올인원 : Part1. 기본 문법편 - (10) : 옵셔널, 제네릭 기본 / 기본값 타이핑

옵셔널, 제네릭 기본

 

 

 

 

 

 

? : 있어도 되고 없어도 된다 라는 뜻

function abc(a: number, b?: number) {}
abc(1)
abc(1, 2)
abc(1, 2, 3)

 

 

 

인터페이스나 타입 alias에서도 사용 가능 : b는 있어도 그만 없어도 그만

let obj: { a: string, b?: string } = { a: 'hello', b: 'world' }
obj = { a: 'hello' }

 

 

 

add함수는 잘못된 케이스

function add(x: string | number, y: string | number): string | number { return x + y };
add(1, 2); // 3
add('1', '2') // '12'

 

 

 

 

왜냐하면, 아래 경우를 생각하지 못 했기 때문에

그렇다면, 위에 경우는 되고 아래 경우는 안 되게 하는 법은? -> 제네릭

add(1, '2'); // '12'
add('1', 2); // '12'

 

 

 

 

제네릭은 함수 선언할 때말고 함수를 쓸 때 정해질 수 있도록 하는 타입

지금 타입은 모르겠는데 나중에 정할래요

function add<T>(X: T, y: T): T {
    return x + y;
}
add(1, 2); // 3 ==> O
add('1', '2') // '12' ==> O

add(1, '2'); // '12' ==> X;서로 다르기 때문에
add('1', 2); // '12' ==> X

 

 

 

 

그치만 아래 경우는 원치 않는다

add(true, true);

 

 

 

 

T는 반드시 string이어야 한다, 부분집합 느낌

function add<T extends string>(X: T, y: T): T {
    return x + y;
}
function add<T extends string | number>(X: T, y: T): T {
    return x + y;
}


function add<T extends { a: string }>(X: T): T {return x;}
add({ a: 'hello'});


function add<T extends string[]>(X: T): T {return x;}
add([ '1', '2', '3']);

// 콜백함수 형태
function add<T extends (a: string) => number>(x: T): T {return x;}
add((a) => +a);

 

 

 

 

---

 

 

 

 

 

 

기본값 타이핑

기본값으로 타입추론

const a = (b = 3, c = 3) => {
    return '3';
}

const a = (b: number = 3, c: number = 3) => {
    return '3';
}


const a = (b: { children: string } = { children: 'zerocho'}) => {}

 

 

 

 

리액트에서 사용하는 jsx에서 T에 extends나 기본값을 넣어 타입스크립트가 헷갈리지 않게 할 수 있다

const add = <T = unknown>( x: T, y: T ) => ({ x, y });
const add = <T extends unknown>( x: T, y: T ) => ({ x, y });
const add = <T,>( x: T, y: T ) => ({ x, y });
const result = add(1, 2);