TypeScript) 함수

1. 함수 형태

• 명시적 타입 지정

• 반환 타입을 명시하지 않아도 TS는 반환값의 타입을 유추할 수 있음

• 하지만 명시적으로 작성하는 것이 좋음

function add(a:number, b:number) {
	return a+b // number 타입을 return
}

2. 함수 선언

• 화살표 함수

• 함수 선언과 같은 동작을 하지만 this바인딩이 다름

•  function 키워드로 선언한 함수와 다르게 this가 부모 컨텍스트의 this를 사용

const add = (a:number, b:number) => a+b

3. Function Signature

• 함수 함수 위에 마우스를 올리면 보이는 것 : 함수를 어떻게 호출하는지, return 타입도 알려줌

• 특정 함수만의 타입 만들기

• 함수 타입 별칭
• 함수 타입을 변수처럼 사용 가능
• 이 타입을 다른 함수에 적용할 수 있음

// 특정 함수만의 타입 선언
type Add = (a:number, b:number) => number; 

• 객체 형태의 함수 서명
• 함수의 서명을 정의할 수 있지만, 더 일반적으로는 함수 타입 별칭을 선호

type Add = {
		(a:number, b:number) : number
} 

• 타입 추론
• 타입을 자동으로 유추할 수 있음
• 명시적으로 타입을 지정하면 코드의 가독성과 유지 보수성이 향상됨

const add:Add = (a, b) => a+b // 타입을 정의하지 않아도 TS가 유추할 수 있음

4. 오버로딩

• 패키지나 라이브러리들은 오버로딩을 많이 사용 함

• 함수가 서로 다른 여러 개의 Function Signature를 가지고 있을 때 발생

• 여러 버전의 함수를 정의할 수 있으며, 인자 타입에 따라 다른 로직을 적용할 수 있음

type Add = {
	(a: number, b: number) : number
	(a: number, b: string) : number
}

const add: Add = (a, b) => { // b의 타입이 뭔지에 따라 +가 가능할 수도 아닐 수도 있음
	if (typeof b=== "string") return a
		 return a + b
}

• 타입 체크 : 함수 내부에서 타입 체크를 통해 오버로딩된 타입에 맞게 동작 처리

type Config = {
	path: string,
	state: object
}

type Push = {
	(path:string):void
	(config: Config):void;
}

const push:Push = (config) => {
	if(typeof config === "string") { // 내부에서 타입 체크함
		console.log(config)
	}else {
		console.log(config.path)
	}
}

• 여러 개의 인자를 가지고 있을 경우

type Add = {
	(a:number, b:number) : number 
	(a:number, b:number, c:number): number,
}

type Add = (a, b, c?:number) => { // 인자가 3개
	if(c) return a + b + c
	return a + b
}

add(1, 2)
add(1, 2, 3)

5. 다형성

• 다양한 타입의 배열을 처리할 수 있도록 구현

• 같은 이름이지만 인자가 다른 경우

type MinPrint = {
	(arr: number[]):void
	(arr: boolean[]):void
	(arr: string[]):void
}

const minPrint: MinPrint = (arr) => {
	arr.forEach(i => console.log(i))
}	

minPrint([1, 2, 3, 4])
minPrint([true, false, true, ture])
minPrint(["a", "b", "c"])

6. 제네릭

• 인자의 타입을 정확히 모를 때 사용

• 함수가 처리할 배열의 타입을 동적으로 지정 가능
• 타입을 섞어서 사용할 때 각 타입을 알려줘야 함

type MinPrint = {
	(arr: number|boolean[]):void
}

const minPrint: MinPrint = (arr) => {
	arr.forEach(i => console.log(i))
}	

minPrint([1, 2, true, false])

• 제네릭 사용하기

type MinPrint = {
	<TypePlaceholder>(arr: TypePlaceholder[]):void // 제네릭
}

const minPrint: MinPrint = (arr) => {
	arr.forEach(i => console.log(i))
}	

minPrint([1, 2, 3, 4])
minPrint([true, false, true, ture])
minPrint(["a", "b", "c"])
minPrint([1, 2, true, false])

type MinPrint = {
	<T>(arr: T[]): T
}

const minPrint: MinPrint = (arr) => arr[0]

const a = minPrint([1, 2, 3, 4])
const b = minPrint([true, false, true, ture])
const c = minPrint(["a", "b", "c"])
const d = minPrint([1, 2, true, false])