TypeScript Function

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;
  };

• When expressing functions in TypeScript, parameter types and return types must be specified

• After writing the type corresponding to each parameter, the return type must be written after the parentheses (assuming type inference is not used)

• If the function has no return value, void can be used (assuming type inference is not used)

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

• Unlike JavaScript, TypeScript requires passing arguments according to the number of parameters

  let greeting = (firstName: string, lastName: string): string => {
    return `hello, ${firstName} ${lastName}`;
  };
  
  // Error occurs
  greeting('coding');
  
  // Works normally
  greeting('coding', 'kim');
  
  // Error occurs
  greeting('coding', 'kim', 'hacker');

• You can also set the value to be assigned to a parameter when no argument is passed or undefined is passed

• This works the same as default parameters in JavaScript

  let greeting = (firstName: string, lastName: string = 'kim'): string => {
    return `hello, ${firstName} ${lastName}`;
  };
  
  // Works normally
  greeting('coding');
  
  // Works normally
  greeting('coding', undefined);
  
  // Error occurs
  greeting('coding', 'kim', 'hacker');

• Or if you want optional parameters, you can solve it by adding ? at the end of the parameter name

  let greeting = (firstName: string, lastName?: string): string => {
    return `hello, ${firstName} ${lastName}`;
  };
  
  // Works normally
  greeting('coding');
  
  // Works normally
  greeting('coding', 'kim');
  
  // Error occurs
  greeting('coding', 'kim', 'hacker');