타입스크립트 프로그래밍 2주차
함수
함수의 선언과 실행
타입스크립트에서 함수를 실행할 경우 반환값은 타입추론이 가능하지만 특별한 상황이 아닌 이상 매개변수의 타입은 추론하지 않는다.
📌 매개변수의 타입은 개발자가 직접 명시해 주어야 한다.
//매개변수 타입 지정
const human = (name: string, age: number) => {
return `name is ${name}, age is ${age}`
}
console.log(human("Jay", 12))
//name is Jay, age is 12
//매개변수 타입 미지정
const human = (name, age) => {
return `name is ${name}, age is ${age}`
}
console.log(human("Jay", 12))
//Parameter 'name' implicitly has an 'any' type.
//Parameter 'age' implicitly has an 'any' type.
//매개변수와 반환 타입 지정
const human = (name: string, age: number): string => {
return `name is ${name}, age is ${age}`
}
console.log(human("Jay", 12))
//name is Jay, age is 12* 본 책에서는 반환 타입을 명시할 수 있으나 타입스크립트의 타입추론은 강력한 기능이기 때문에 특별한 경우가 아닌 이상 개발자가 굳이 명시할 필요는 없다고 설명하고 있다.
* 타입스크립트에서 함수를 함수 생성자 (new Function()) 통해 함수를 선언하는 것은 매개변수 타입과 반환 타입을 지정해 줄 수 없기 때문에 안전하지 않다.
선택적 매개변수, 기본 매개변수, 나머지 매개변수
📌 함수에서 사용할 수도, 사용하지 않을 수도 있는 매개변수는 ?를 사용해 선택적 매개변수로 명시하여 준다.
📌 기본값을 가지게 되는 매개변수는 = 연산자를 통해 기본 매개변수로 명시하여 준다.
📌 타입스크립트에서의 arguments 객체는 인수들의 타입을 모두 any로 취급하기 때문에 안전하지 않다. arguments객체 대신 전개구문(Spread Syntax)을 사용하여 명시해 준다.
//선택적 매개변수
let sum = (a:number, b:number, c?:number) => {
return c ? a + b + c : a + b
}
console.log(sum(1, 2, 3))
//6
console.log(sum(1, 2))
//3
//선택적 매개변수를 명시하지 않고 함수의 인수를 모자르게 입력했을 경우
let sum = (a:number, b:number, c:number) => {
return c ? a + b + c : a + b
}
console.log(sum(1, 2))
//Expected 3 arguments, but got 2.
//기본 매개변수
let sum = (a:number, b:number, c = 5) => {
return c ? a + b + c : a + b
}
console.log(sum(1, 2))
//8
console.log(sum(1, 2, 3))
//6
//나머지 매개변수
let sum = (...array : number[]) => {
return array.reduce((total, n) => total + n, 0)
}
console.log(sum(1, 2, 3))
//6
* 기본 매개변수 사용시에도 타입을 명시해 줄 수 있지만 (c:number = 3)타입스크립트의 타입추론을 통해 기본값의 타입으로 매개변수의 타입을 지정해 주기 때문에 특별한 경우가 아닌 이상 따로 타입을 명시해 줄 필요가 없다.
호출 시그니처(타입 시그니처)
📌 타입 수준 코드로 함수의 전체 타입을 지정할 때 사용한다.
//단축 시그니처
type Greet = (name: string) => string
//전체 시그니처
type Greet = {
(name: string): string
}
const greet: Greet = (name) => `Hi ${name}!`
console.log(greet("Jay"))
//Hi Jay!* 함수의 타입(Greet)에 이미 매개변수의 타입과 반환 타입을 지정해 주었으므로 함수를 선언할 때 다시 타입을 지정할 필요가 없다.
오버로드 시그니처
📌 호출 시그니처가 여러 개인 함수
//Reservation이라는 타입을 선언했다는 가정하에 Reserve 타입 선언
//타입 시그니처
type Reserve = {
//왕복 예약
(from: Date, to: Date, destination: string): Reservation
//편도 예약
(from: Date, destination: string): Reservation
}
//구현 시그니처
let reserve: Reserve = (
from: Date,
toOrDestination: Date | string,
destination?: string
) => {...}* 오버로드 시그니처를 구현할 경우에는 오버로드 시그니처를 직접 결합하여 선언해 주어야 한다.
* 오버로드 시그니처를 구현할 경우에는 가능한한 타입을 특정하는 것이 좋다. (any 대신 stirng | Date등)
다형성(generic)
📌 함수의 매개변수 혹은 반환값의 타입을 지정할 수 없는 상황에는 제네릭 타입을 사용하여 해결할 수 있다.
📌 제네릭 타입은 꺽쇠를 사용하여 표현해 준다. <T>
type Filter = {
<T>(array: T[], f: (item: T) => boolean): T[]
}* 위의 예에서 Filter라는 타입으로 구현한 함수를 호출할 때 타입스크립트는 인수로 받은 배열의 요소들의 타입을 추론하여 해당 타입을 제네릭 타입 <T>에 할당한다.
* 제네릭 타입의 변수는 꼭 T로 하지 않아도 상관없다.