typescript 기초 정리 - 6

타입스크립트 기본 문법

1) 옵셔널 문법

옵셔널이란? 예컨데 함수가 호출될때 어떠한 파라미터를 받는경우도 있고, 안받는 경우도 있다고 가정하자.

const a = (a:number, b:number, c:number):number => {
		return a+b+c
}

1) a(5,3,7) ok
2) a(5,6) error
3) a(5) error

위의 경우 분명 파라미터를 number타입으로 3개 받는다고 명시했으므로
2번, 3번의 경우는 틀린것이 된다.
그러면 어떻게해야 2번 3번의 경우도 만족시킬수 있을까?
이럴때 사용하는게 옵셔널 문법이다.
옵셔널 문법은 ?로 사용하며, 함수의 경우 파라미터 뒤, 객체의 경우 key뒤에 붙여줘야한다.

const a = (a:number, b?:number, c?:number):number => {
		return a+b+c
}

1) a(5,3,7) ok
2) a(5,6) ok
3) a(5) ok

만약에 여러가지를 옵셔널하게 받고 싶다면?

const a = (...args:number[]):void => {
	console.log(args)
}

1) a(5,3,7,5,2,3,4) ok
2) a(5,6) ok
3) a(5) ok

2) 제네릭 문법

제네릭이란 무엇이고 어떨때 사용할까? 우선은 제네릭은 일종의 타입 변수라고 생각하자.
"타입을 나중에 정한다."
사용법은 <문자> 문자는 보통 T를 많이 사용한다.

함수 선언문
function a<T>(x:T, y:T):T {}

함수 표현식
const a = <T>(x:T,y:T) => {}

const a = <T = unknown>(x:T,y:T):T => {}
리액트에서는 T에 기본값을 넣어줘야 한다. (TS가 추론을 못할떄)
const a = <T,>(x:T,y:T):T => {}
이것도 가능하다고는 하는데 권장되는 방법은 아님.

return 부분은 볼 필요 없음 일부러 표기 x

함수 시그니처
const a:<T>(x:T) => T = (x) => {return x}

a(5, 3) ok
a("아","리랑") ok

인자의 값을 타입 추론하여 들어온대로 타입 추론을 해준다.
호출단에서 타입이 정해지는거니 좀더 자유로워진다고 생각할수 있다.
또한 받는 범위를 제한할수도 있는데 그럴때 사용하는게 extends 키워드이다.

function a<T extends number>(x:T, y:T):T {}
T는 숫자여야한다.

function a<T extends number | string>(x:T, y:T):T {}
T에 숫자 또는 문자열이 들어갈수있다.

function a<T extends number, U extends string>(x:T, y:U):T {}
여러개 동시에 제네릭선언 밑 제한 가능.
T에는 숫자 U에는 문자열이 들어가야 한다.

function a<T extends {a:number}>(x:T):T {
	return x
}
a({a:5}) 처럼 {a:number} 의 형태만 가능.

function a<T extends string[]>(x:T):T {
	return x
}
a(["가","나"]) 문자열 배열만 가능. 

function a<T extends () => number>(x:T):T {
	return x
}
a(() => {return 5}) 콜백 함수의 타입도 지정 가능.
매개변수가 콜백함수의 형태만 가능해진다.
이러면 T는 콜백 함수만 받게 된다.

function a<T extends (...args:any) => any>(x:T):T {
	return x
}
이렇게 extends로 제한을 걸때는 any를 사용해도 된다고 한다.
모든 형태의 함수가 가능.