type Add = (a:number, b:number) => number
const add:Add = (a, b) => a+b
{}를 사용했을 때 오류가 발생하는 이유가 기억이 안 나서 다시 찾아봤습니다.
결론부터 말씀드리자면 {}를 사용하면 그 값이 반환값이 함수 내부의 내용으로 처리가 됩니다.
밑의 예시를 보면 이해가 되실거라 생각됩니다.
1. const add:Add = (a,b) => a+b 를 함수로 풀면 다음과 같게 됩니다.
function add(a, b) {
return (a+b)
}
2. const add:Add = (a,b) => {a+b} 를 함수로 풀면 다음과 같게 됩니다.
function add(a, b) {
a+b;
}
즉 애로우함수에서 {}를 사용하게 되면 그 안의 값은 반환이 아니라 함수 내부 내용으로 처리되기에 반환값이 없는 void로 처리됩니다. 이에 따라 위에서 미리 선안한 Add자료형의 반환값은 number라고정해놓은 내용과 충돌하기에 에러가 발생합니다.
//자주 보게 될 오버로딩 예시
type Config = {
path: string,
state: object
}
type Push = {
(path: string): void
(state: Config): void
}
const push: Push = (config) => {
if(typeof config === "string") {console.log(config)}
else {
console.log(config.path)
}
}
//파라미터의 갯수가 다를 경우 optional 설정
type Add = {
(a:number, b:number):number,
(a:number, b:number, c:number):number,
}
const add:Add = (a,b,c? : number) => {
if(c) return a+b+c
return a + b
}
제네릭은 C#이나 Java와 같은 언어에서 재사용 가능한 컴포넌트를 만들기 위해 사용하는 기법입니다. 단일 타입이 아닌 다양한 타입에서 작동할 수 있는 컴포넌트를 생성할 수 있습니다.
(구체적인 타입을 지정하지 않고 다양한 인수와 리턴 값에 대한 타입을 처리할 수 있다.)
타입스크립트에서 제네릭을 통해 인터페이스, 함수 등의 재사용성을 높일 수 있습니다.
type SuperPrint={
<T>(arr:T[]):T;
}
//<T>(arr:T[]) => T
const superPrint:SuperPrint=(arr)=>{
return arr[0]
}
const a=superPrint([1,2,3])
const b=superPrint([true,false,true])
const c=superPrint(["a","b"])
const d=superPrint([1,2,"a","b",true])
any를 사용하게 되면 에러가 발생해도 확인할 수 없음