[코딩앙마] 타입스크립트 3. 함수 타입 정의

함수 인자의 타입

함수의 인자도 타입을 정해줄 수 있으며 ?를 사용해 옵션을 넣어줄 수 도 있다.

이렇게 적으면 return 값을 적지않아도 타입스크립트가 알아서 string으로 추론해준다.

function sayHello(name? : string) {
  return `Hello ${name || 'world'}`
}

 

위 함수는 이렇게 쓸 수도 있다.

function sayHello(name = 'world') {
  return `Hello ${name}`
}

 

인자를 여러개 받을 때도 옵션으로 넣어 줄 수 있다.

function sayHello(name : string, age? : number) {
  if (age !== undefined) {
  return `Hello ${name}. you are ${age}`
  } else {
  return `Hello ${name}`
  }
}

 

하지만 옵션 파라미터가 앞으로 오면 에러메세지가 뜬다.

// 에러
function sayHello(age? : number, name : string) {
  if (age !== undefined) {
  return `Hello ${name}. you are ${age}`
  } else {
  return `Hello ${name}`
  }
}

 

굳이 옵션 파라미터를 첫번째 인자로 놓고 쓰고 싶다면 이렇게 하면 된다.

function sayHello(age : number | undefined, name : string) {
  if (age !== undefined) {
  return `Hello ${name}. you are ${age}`
  } else {
  return `Hello ${name}`
  }
}

sayHello(undefined, 'bong')

 

 

나머지 매개변수

나머지 매개변수들은 배열로 타입을 정해주면된다.

function add(...nums : number[]) {
  return nums.reduce((acc, cur)=>acc+cur, 0);
}

add(1,2,3,4)

 

 

this

this가 있는 함수에 bind 함수를 쓰려고 할때 this에 타입을 정해주면 에러가 뜬다. 그러면 this에도 타입을 정해주면 된다.

interface User {
 name: string;
}

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

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

const a = showName.bind(Sam);

 

만약 인자가 더 있다면 여러개를 적고 타입을 정해주면 된다. showName에서 정해준 age와 gender 인자는 Sam이 바인딩 된 showName함수 person에서 첫번째 인자와 두번째 인자가 된다.

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 person = showName.bind(Sam);

person(60, 'm');

 

 

함수 오버로딩 ( Function Overloading )

보기에 이 코드는 에러가 없어보이지만 사용하려고 하면 에러가 뜬다.

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', 60);
const Mike : string = join('mike', '60');

Sam이 User 객체를 반환하는지 확신할 수 없어서 그렇다.

 

이럴때 오버로딩을 사용한다. 함수 오버로딩은 전달 받은 매개변수의 개수나 타입에 따라 다른 동작을 하게 하려고 할때 사용한다. 

함수 위에 타입이 들어왔을 때 어떤 타입을 리턴하는지 경우에 따라 여러개 적어주고 함수의 동작을 선언하는 부분에서 인자 값에 들어올 수 있는 타입들을 모두 적어주면 된다. 함수 오버로딩은 인터페이스와 같이 많이 사용되므로 기억해두어야 한다.

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

const Sam : User = join('sam', 60);
const Mike : string = join('mike', '60');