- Function
매개변수 및 return 값에 대한 type을 지정
- 기본
function 함수명(매개변수: type): return type { // 아무것도 return 하지 않으면 void
}
// arrow function
const 함수명 = (매개변수: type) : return type => {
}
ex)
function add(num1: number, num2: number) : number{
return num1 + num2;
}
- 선택적 매개 변수 (Optional)
ex)
function sayHello(name?: string): string {
return `Hello, ${name || "world"}`;
}
const result = hello();
const result2 = hello("An"); // 둘 다 가능
// 같은 형태 (매개 변수에 default 값 할당)
function sayHello(name = "world") : string {
return "Hello, ${name}";
}
선택적 매개 변수는 당연히 optional 하기 때문에 여러 개의 매개 변수 설정 시 맨 앞에 설정할 수 없다.
- 나머지 매개 변수
ex)
// 전달받은 매개 변수들을 배열로 만듦
function add(...nums: number[]): number {
return nums.reduce((result, num) => result + num, 0);
}
add(1, 2, 3); // 6
add(1, 2, 3, 4, 5, 6, 7, 8, 9, 10); // 55
- this
this의 type을 명시할 때는 가장 맨 앞에 설정해준다.
ex)
interface User {
name : string;
}
const An: User = {name: "An"};
function showName(this:User, age:number, gender: 'm' | 'f'){
console.log(this.name, age, gender);
}
const an = showName.bind(An);
an(31, 'm'); // An 31 m
- overloading 사용
함수 매개 변수 type case에 따라 return type이 불분명할 때 overloading을 사용
ex)
interface User {
name : string;
age : number;
}
// overloading을 사용하지 않으면 type이 불분명하므로 error 발생
function join(name: string, age: string): string; // overloading
function join(name: string, age: number): User; // overloading
function join(name: string, age: number | string): User | string {
if(typeof age === "number"){
return { name, age};
} else {
return "나이는 숫자로 입력해주세요.";
}
}
const an: User = join("An", 31);
const iu: string = join("IU", "30");
'개발에 도움이 되는 > TypeScript' 카테고리의 다른 글
TypeScript 기본 (Utility Type) (0) | 2022.05.02 |
---|---|
TypeScript 기본 (Generic) (0) | 2022.04.29 |
TypeScript 기본 (Literal, Union / Intersection Type) (0) | 2022.04.26 |
TypeScript 기본 (Type, Interface) (0) | 2022.04.12 |
TypeScript 개념 및 설치 방법 (React) (0) | 2022.04.06 |