[typescript] 함수를 정의하는 방법

매개변수값이 없으면 world를 출력하는 함수이나 타입스크립트에서는 optional(?:)을 써주지않으면 오류를 뿜어낸다.

Expected 1 arguments, but got 0.

// before
function hello (name:string) {
    return `hello, ${name || 'world'}`;
}

const result = hello();

// after
function hello (name?:string) {
    return `hello, ${name || 'world'}`;
}

// or
funtion hello2(name = 'world') {
	return `hello, ${name}`;
}

const result = hello();

선택적 매개변수가 필수 매개변수의 앞에 올 수 없다.

A required parameter cannot follow an optional parameter.

만약 앞에 꼭 써야한다면 아래의 after처럼 |를 사용하여 undefined를 지정해 줘야한다. 

// before
function hello(age?: number, name: string):string{
	if(age !=undefined) {
    	return `Hello, ${name}. You are ${age}.`;
    }else{
    	return `Hello, ${name}`;
    }
}

console.log(hello(30, 'jimin'));

// after
function hello(age?: number | undefined, name: string):string{
	if(age !=undefined) {
    	return `Hello, ${name}. You are ${age}.`;
    }else{
    	return `Hello, ${name}`;
    }
}

console.log(hello(30, 'jimin'));
console.log(hello(undefined, 'jimin'));

// or
function hello(name: string, age?: number):string{
	if(age !=undefined) {
    	return `Hello, ${name}. You are ${age}.`;
    }else{
    	return `Hello, ${name}`;
    }
}

console.log(hello('jimin'));

나머지매개변수 ...(rest parameter)

전달받은 매개변수를 배열로 받아 올 수 있다. 

Rest parameter 'nums' implicitly has an 'any[]' type.

그렇기 때문에 매개변수의 타입은 배열타입을 지정해주면 된다.

function add(...nums: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는 무조건 매개변수 제일 앞에 작성해주면 된다.

매개변수 여러개 존재해도 맨 앞에 작성해주면된다.

'this' implicitly has type 'any' because it does not have a type annotation.

// before
interface User {
    name : string;
}

const Sam: User = {name:'Sam'}

function showName(){
    console.log(this.name);
}

const a = showName.bind(Sam);
a();

// after
interface User {
    name : string;
}

const Sam: User = {name:'Sam'}

function showName(this:User){
    console.log(this.name);
}

const a = showName.bind(Sam);
a();

// 매개변수가 많을 시 ...
interface User {
    name : string;
}

const Sam: User = {name:'Sam'}

function showName(this:User, age:number, gender:'m'|'f'){
    console.log(this.name, age, gender);
}

const a = showName.bind(Sam);
a(30, 'm');

overload

동일한 함수에서 여러가지의 경우의 타입이 나올 경우 타입을 따로 지정해줘야한다.

Type 'string | User' is not assignable to type 'User'.
Type 'string' is not assignable to type 'User'.

// before
interface User {
    name : string;
    age:number;
}

function join(name:string, age:number | string):User | string{
    if(typeof age === 'number'){
        return {
            name,
            age
        };
    }else{
        return '나이는 숫자로 입력해 주세요.';
    }
}

const sam: User = join('Sam', 30);
const jane: string = join('jane', '30');

// after
interface User {
    name : string;
    age:number;
}

// 나올 수 있는 타입의 경우를 따로 지정해 줘야한다.
function join(name:string, age:string): string;
function join(name:string, age:number): User;
function join(name:string, age:number | string):User | string{
    if(typeof age === 'number'){
        return {
            name,
            age
        };
    }else{
        return '나이는 숫자로 입력해 주세요.';
    }
}

const sam: User = join('Sam', 30);
const jane: string = join('jane', '30');