[ TypeScript ] 타입스크립트의 함수란 ?

타입스크립트의 함수에 대해 알아봅시다~!

---

➿ TypeScript 함수

• TypeScript에도 함수는 JavaScript와 마찬가지로 기명 함수(named function)와 화살표 함수(arrow function) 등으로 만들 수 있다.

함수 선언

//named function (기명 함수)
function add(x: number, y: number):number {
	return x + y;
}

//named function (기명 함수) : 추론된 리턴 타입
function add(x: number, y: number) {
	return x + y;
}

//arrow function (화살표 함수)
let add = (x: number, y: number): number => {
	return x + y;
}

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

기술적으로는 반드시 작성할 필요는 없다.

 

리턴 값이 없는 함수

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

타입 추론 기능을 활용하지 않을 때 필수적으로 void를 사용하여 작성해야 함

 

매개변수의 개수에 맞춰 전달인자를 전달

let greeting = (firstName: string, lastName: string): string => {
	return `hello, ${firstName} ${lastName}`;
}

//에러가 납니다.
greeting('coding');

//정상적으로 작동합니다.
greeting('coding', 'kim');

//너무 많은 매개변수를 보내 에러가 납니다.
greeting('coding', 'kim', 'hacker');

   

기본값 매개변수

let greeting = (firstName: string, lastName: string ="kim"): string => {
	return `hello, ${firstName} ${lastName}`;
}

//정상적으로 작동합니다. 
greeting('coding');

//정상적으로 작동합니다.
greeting('coding', undefined);

//너무 많은 매개변수를 보내 에러가 납니다.
greeting('coding', 'kim', 'hacker');

전달인자를 전달하지 않거나,undefined를 전달 했을 때 할당될 매개 변수의 값을 정해 놓는다.

기본 값을 가질 때 타입스크립트는 그것을 선택적 매개변수와 같이 취급한다고 한다.

 

선택적 매개변수

let greeting = (firstName: string, lastName?: string): string => {
	return `hello, ${firstName} ${lastName}`;
}

//정상적으로 작동합니다.
greeting('coding');

//정상적으로 작동합니다.
greeting('coding', 'kim');

//너무 많은 매개변수를 보내 에러가 납니다.
greeting('coding', 'kim', 'hacker');

선택적 매개변수는 매개변수의 이름 끝에 ?를 붙인다.

만약 greeting('coding'); 와 같이 함수에 전달인자를 하나만 전달한다면 뒤의 매개변수는 undefined로 반환 된다.

---

➿ 실습 정리

JavaScript 코드를 TypeScript로 포팅하기

 

JavaScript 코드

/* 1-1번 */
function sumNumber(a, b) {
  return a + b;
}

/* 1-2번 */
const sumNumber2 = (a, b) => {
  return a + b;
};

/* 2번 */
let sumString = (first, last) => {
  return `${first} ${last}`;
};

console.log(sumString('hi', 'codestates'));

/* 3번 */
let sumString2 = (first, last) => {
  return `${first} ${last}`;
};

//아래 코드도 동작하도록 구현해봅시다.
console.log(sumString2('hi'));

/* 4번 */
let printError = () => {
  console.log('error message');
};

TypeScript 코드로 포팅

/* 1-1번 */
function sumNumber(a: number, b: number): number {
  return a + b;
}

/* 1-2번 */
const sumNumber2 = (a: number, b: number): number => {
  return a + b;
};

/* 2번 */
let sumString = (first: string, last: string): string => {
  return `${first} ${last}`;
};

console.log(sumString('hi', 'codestates'));

/* 3번 */
let sumString2 = (first: string, last: string = 'yoon'): string => {
  return `${first} ${last}`;
};

//아래 코드도 동작하도록 구현해봅시다.
console.log(sumString2('hi'));

/* 4번 */
let printError = (): void => {
  console.log('error message');
};

코드 작성 후 TypeScript를 JavaScript로 컴파일 한 후 코드 결과를 확인한다.

1.  tsc src/index.ts

2.  node src/index.js