함수 타입 (Function Types)
함수의 타이핑
아래는 함수에 타입을 더한 예제이다.
function add(x: number, y: number): number {
return x + y;
}
let myAdd = function(x: number, y: number): number { return x + y };
위 예제에서는 매개변수의 타입과 반환 타입을 정해주었다. 하지만 Typescript는 반환 문을 보고 반환 타입을 파악할 수 있으므로 반환 타입은 생략할 수 있다.
함수 타입 작성하기
let myAdd: (x: number, y: number) => number =
function(x: number, y: number): number { return x + y; };
함수의 타입은 매개변수의 타입과 반환 타입이 있다. 매개변수의 타입이 올바르게 나열되어 있으면 함수 타입에 다른 이름을 붙여도 유효하며,
만약 함수가 값을 반환하지 않는다면 void
타입을 사용한다.
타입의 추론
let myAdd: (baseValue: number, increment: number) => number =
function(x, y) { return x + y; };
위처럼 한쪽에만 타입이 있어도 타입을 알아낼 수 있는 형태를 contextual typing
이라 부른다.
선택적 매개변수와 기본 매개변수
Typescript에서는 모든 매개변수가 함수에 필요하다고 가정한다. 하지만 선택적으로 사용할 때는 아래와 같이 물음표 기호를 써 옵셔널하게 사용 가능하다.
function buildName(firstName: string, lastName?: string) {
if (lastName) return firstName + " " + lastName;
else return firstName;
}
let result1 = buildName("Bob"); // O
let result3 = buildName("Bob", "Adams"); // O
매개변수의 초기값을 설정해 놓아도 선택적 매개변수와 동일한 효과를 볼 수 있다.
나머지 매개변수 (Rest Parameters)
나머지 매개변수를 사용해 타입을 지정하게 되면, 해당 선택적 매개변수들의 수를 무한으로 취급한다.
function buildName(firstName: string, ...restOfName: string[]) {
return firstName + " " + restOfName.join(" ");
}
let employeeName = buildName("Joseph", "Samuel", "Lucas", "MacKinzie");
오버로드 (Overloads)
전달되는 매개변수에 따라 다른 결과를 반환하는 함수가 있을 때는 타입을 아래처럼 지정할 수 있다.
function add(a: string, b?: string): string;
function add(a: number, b?: number): number;
function add(a: any, b: any) {
if (b) return a + b;
return a;
}
add(1, 3) // 4
add("hello", "world") // "hello world"
동일한 이름에 매개변수만 다른 여러 함수를 만드는 것을 함수의 오버로딩이라 한다.
'스터디' 카테고리의 다른 글
[Typescript] 유니언 타입과 교차 타입 (0) | 2023.06.11 |
---|---|
[Typescript] 리터럴 타입 (0) | 2023.06.10 |
[Typescript] 인터페이스 (1) | 2023.06.10 |
[Typescript] 기본 타입 (0) | 2023.06.09 |
[UX] 도널드 노먼의 UX 디자인 특강 (9장, 후기) (0) | 2020.09.01 |