[TypeScript ] #2 함수

함수의 기본적인 타입 선언

기존의 자바스크립트 함수를 타입스크립트로 바꾸려면 중요하다고 생각 되어 지는 부분이라 자세히 알아보려고 한다.

자바스크립트 타입스크립트 차이점

---

• 자바스크립트

function sum(a, b) {
  return a + b;
}

• 타입스크립트

function sum(a: number, b: number): number {
  return a + b;
}

매개변수와 함수의 리턴 값의 타입을 :으로 추가.
(함수의 반환 값에 타입을 정하지 않을 때는 void라도 사용)

function sayHi(): void {
console.log('Hi')
}

---

• 타입스크립트

function sum(a: number, b: number): number {
  return a + b;
}
sum(10, 20); // 30
sum(10, 20, 30); // error, too many parameters
sum(10); // error, too few parameters

• 타입스크립트는 함수의 인자를 모두 필수 값으로 간주한다.
  함수의 매개변수를 설정하면 undefined나 null이라도 인자로 넘겨야한다.
  즉, 정의된 매개변수 값만 받을 수 있고 추가로 인자를 받을 수 없다.
  지정된 개수의 파라미터를 전달하지 않았을 때도 에러가 발생하기 때문에 정상적으로 리턴되는 자바스크립트에 비해서 에러 핸들링에 유리하다.

function sum(a: number, b?: number): number {
  return a + b;
}
sum(10, 20); // 30
sum(10, 20, 30); // error, too many parameters
sum(10); // 타입 에러 없음

• 타입스크립트에서는 지정된 타입의 지정된 인자를 전달받아야 정상적으로 함수가 실행되지만,
  선택적으로 인자를 설정하고 싶은 경우 (파라미터가 전달되지 않아도 함수가 정상적으로 실행되게 하고 싶을 경우) 파리터뒤에 ?를 작성해주면 된다.

• 주의

1. 필수 파라미터는 선택적 파라미터보다 먼저 작성되어야 한다.

2. 선택적 파라미터를 먼저 작성하고 싶은 경우에는|(유니온 타입)과 undefined를 사용하는 방법이 있다.

//주의사항 1
function sum(a?: number, b: number): number {
  return a + b;
} 
//error, A required parameter cannot follow an optional parameter.

//주의사항 2
function sum(a: number | undefined, b: number): number {
  if(a !== undefined) {
    return a + b
    } else {
      return b
    }
}
sum (undefined, 10)  //10

---

• 타입스크립트

function sum(a: number, b = '100'): number {
  return a + b;
}
sum(10, undefined); // 110
sum(10, 20, 30); // error, too many parameters
sum(10); // 110

• 매개변수 초기화는 ES6 문법과 동일.

---

REST 문법이 적용된 매개변수

function sum(a: number, ...nums: number[]): number {
  const totalOfNums = 0;
  for (let key in nums) {
    totalOfNums += nums[key];
  }
  return a + totalOfNums;
}
sum(1)  //1
sum(1,2,3)  //6
sum(1,2,3,5,6)  //17

• javaSciprt의 REST 파라미터를 사용하면 인자를 배열 형태로 받아오기 때문에 인자를 배열로 정의해주어야 한다.

---

this

타입스크립트에서 자바스크립트의 this가 잘못 사용되었을 때 감지할 수 있다.

function 함수명(this: 타입) {
  // ...
}

예제

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

//에러가 발생하게 되는 곳
function showName() {
  console.log(this.name)
}

const a = showName.bind(Sam);

a(); //errors, 'this' implicitly has type 'any' because it does not have a type annotation.

• showName 함수에 Sam 객체를 바인드해서 this.name을 콘솔에 출력하는 a 함수가 있다.
  타입스크립트에서는 this에 타입 지정이 되지 않아서 에러가 발생하게 된다.

아래와 같이 고치면 this에 타입을 지정했기 때문에 에러가 나지 않는다.

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

// this에 타입을 지정
function showName(this:User) {
  console.log(this.name)
}

//this를 Sam 객체로 강제 바인딩한 것임 
const a = showName.bind(Sam);

a(); //'Sam'

• 만약 인자를 전달해야 한다면 첫번째 파라미터로 this의 타입을 동일하게 작성해주고 다음 파라미터에 인자를 전달해주면 된다.

interface User {
  name: string
}
const Sam: User = { name:'Sam' }
function showName(this:User, age:number) {
  console.log(this.name, age)
}
const a = showName.bind(Sam);
a(27);  //'Sam', 27

• 만약 동일한 함수지만 매개변수의 타입이나 개수에 따라 다르게 동작해야하는 경우 아래와 같이 함수를 오버로드 해줘야 한다.

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

function join(name:string, age:string): string;
function join(name:string, age:number): User;
//만약 age로 number를 받거나 string을 받는다면
// 위 처럼 함수를 오버로드 해줘야한다.
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");