TypeScript Funtion

JavaScript vs. TypeScript

• JavaScript ver.

  // named function
  function add(x, y){
      return x + y;
  }
  
  // arrow function
  let add = (x, y) => {
      return x + y;
  }

• TypeScript ver.

  // named function
  function add(x: number, y: number): number {
    return x + y;
  }
  
  // arrow function
  let add = (x: number, y: number): number => {
    return x + y;
  }

• TypeScript에서 함수를 표현할 때는 매개변수의 타입과 반환 타입을 명시해야 함

• 각 매개변수에 해당하는 타입을 작성한 뒤, 반환되는 타입을 괄호 뒤에 작성 해줘야 함 (타입 추론 기능을 활용하지 않는다고 가정했을 때)

• 만일 함수에 리턴값이 없다면, void를 사용해 작성 가능 (타입 추론 기능을 활용하지 않는다고 가정했을 때)

  let printAnswer = (): void => {
    console.log("YES");
  }

• TypeScript는 JavaScript와 달리 매개변수의 개수에 맞춰 전달인자를 전달해야 함

  let greeting = (firstName: string, lastName: string): string => {
    return `hello, ${firstName} ${lastName}`;
  }
  
  // 에러 발생
  greeting('coding');
  
  // 정상 작동
  greeing('coding', 'kim');
  
  // 에러 발생
  greeting('coding', 'kim', 'hacker');

• 만약 전달인자를 전달하지 않거나, undefined를 전달했을 때 할당될 매개변수의 값을 정해놓을 수도 있음.

• 이는 JavaScript에서의 default parameter와 같은 동작을 함.

  let greeting = (firstName: string, lastName: string ="kim"): string => {
        return `hello, ${firstName} ${lastName}`;
    }
  
    // 정상 작동 
    greeting('coding');
  
    // 정상 작동
    greeting('coding', undefined);
  
    // 에러 발생
    greeting('coding', 'kim', 'hacker');

• 혹은 선택적 매개변수를 원한다면 **매개변수의 이름 끝에 ?**를 붙임으로써 해결할 수도 있음

    let greeting = (firstName: string, lastName?: string): string => {
        return `hello, ${firstName} ${lastName}`;
    }
  
    // 정상 작동
    greeting('coding');
  
    // 정상 작동
    greeting('coding', 'kim');
  
    // 에러 발생
    greeting('coding', 'kim', 'hacker');