일반 함수에서의 사용
- In javascript
function jsAdd(a, b) {
return a + b;
}- In typescript
function jsAdd(a: number, b: number): number {
return a + b; // number값만 인자로 전달 가능
}
//
function jsAdd(a: string, b: string): string {
return a + b; // string값만 인자로 전달 가능
}- JS의 경우, 타입이 결정되지 않았기 때문에
string, number 등의 인자 타입에 제한을 받지 않고 해당 로직을 처리할 수 있다. (type으로 따지면, any에 속한다.)
- TS의 경우, 지정된 타입으로만 인자 전달 및 로직 처리가 가능하다.
return값 또한, 전달된 인자에 따라서 type을 지정해주도록 한다.
(argument: number => return: number, argument: string=> return:string)
Promise에서의 사용
- In javascript
function jsFetchNum(id) {
// code...
// code...
// code...
return new Promise((resolve, reject) => {
resolve(100);
});
}- In typescript
function tsFetchNum(id: string): Promise<number> {
// code...
// code...
// code...
return new Promise((resolve, reject) => {
resolve(100);
});
}- Promise에서도 마찬가지로, 인자의 해당 타입만 들어올 수 있다.
- return값은
number값을 가진 Promise이다.
Optional parameter(조건 매개변수)
function printName(firstName: string, lastName?: string): string {
return firstName + lastName;
}
console.log(printName("yongmin", "Jeon")); // yongmin Jeon
console.log(printName("yongmin")); // yongmin undefined
console.log(printName("yongmin", undefined)); // yongmin undefined
?을 사용하여 해당 인자를 전달하거나 혹은 전달하지 않도록 조건을 지정할 수 있다. (위 함수에서는 lastName에 해당 조건을 지정하였다.)lastName?: string 는 lastName: string | undefined과 같다.- 전달하지 않은 인자는, 해당 값에
undefined이 나타나게 된다. (undefined를 명시해서 전달했을 때에도 undefined가 뜨게된다.)
default parameter
const printMessage = (message: string = "default"): string => {
return message;
};
console.log(printMessage("yongmin")); // yongmin
console.log(printMessage()); // default
- 자바스크립트와 동일하게
default parameter 사용이 가능하다.
- 인자를 전달하지 않을시,
default값으로 지정했던 값이 나타나게 된다.
Rest parameter
function addNumbers(...numbers: number[]): number {
return numbers.reduce(
(accumulator, currentValue) => accumulator + currentValue
);
}
console.log(addNumbers(1,2,3,4,5,6)); // 21
- 자바스크립트와 동일하게
Rest parameter 사용이 가능하다.
- 위 예시의 경우, number 값을 배열로 전달해야 하므로 타입을
number[]로 지정했다. (Array<number>로 지정해도 무방하다.)
Reference