TypeScript 함수의 타이핑

1. 함수의 반환 타입

function 타입이름 (매개변수1, 매개변수2): 함수의 반환 타입{
  // return문
}

//void 타입
function sendGreeting(message, userName): void {
	console.log(`${message}, ${userName}`);
}

//string 타입
function sendGreeting(message, userName): string {
	return 'Hello, Mark';
}

//배열 타입
function sendGreeting(message, userName): string[] {
	return ['Hello', 'Mark'];
}

// number 타입
function add(num1: number, num2: number): number {
	return num1 + num2;
}

// boolean 타입
function isAdult(age: number): boolean {
	return age > 19;
}

• 타입스크립트에서 함수를 작성하기 위해서는 함수의 반환 타입과 함수의 매개변수 타입을 명시
• void 타입 : 아무것도 반환 하지 않는 함수의 반환 값으로만 사용될 수 있는 타입
  
  

2. 선택적 매개변수 (Optional Parameter)

function hello(name: string) {
	console.log(`Hello, ${name || 'world'}`);
}

hello(); // 에러 발생

function hello(name?: string) {
	console.log(`Hello, ${name || 'world'}`);
}

hello();
hello("Sam");
hello(123); // 에러 발생

• 값이 없을 때 대비하는 코드가 있지만, 타입스크립트에서는 보다 명시적으로 알려줘야 함
• 선택적 매개변수 사용, 옵셔널이어도 타입은 항상 지켜줘야 함
  
  

function sendGreeting(message: string, userName?: string): void {
	console.log(`${message}, ${userName}`);
}

sendGreeting('Hello');

• 함수의 매개변수 타입 명시하면 다른 타입을 갖는 전달인자는 전달될 수 없음
• 함수에 정의된 모든 매개변수가 함수에 필요하다고 가정
• 함수 호출시 타입스크립트 컴파일러는 함수에 정의된 매개변수와 함수를 호출할 때 전달되는 전달인자를 비교, 검사하게 됨
• 매개변수와 전달인자의 수가 일치하지 않으면 에러 발생
• 선택적 매개변수 : 있어도 되고, 없어도 되는 매개변수로 매개변수 이름 뒤에 ? 붙임
• 전달되는 매개변수가 여러개이고, 몇가지만 선택적 매개변수인 경우 선택적 매개변수들은 반드시 필수 매개변수 뒤에 위치
• 타입스크립트 규칙상 하나의 매개변수가 선택적 매개변수가 되면 뒤에 위치한 나머지 매개변수들은 선택적 매개변수가 되어야 함
  
  

3. 매개변수의 디폴트 값 (Default Parameter)

const sendGreeting = (message = 'Hello', userName = 'there'): 
void => console.log(`${message}, ${userName}`);

sendGreeting(); // Hello, there
sendGreeting('Good morning'); // Good morning, there
sendGreeting('Good afternoon', 'Jenny'); // Good afternoon, Jenny

• 기본 매개 변수 : 함수 호출 시 아무 값도 전달되지 않을 때, undefined 대신 할당된 기본 값을 출력
• 매개변수 뒤에 = 기본 값 명시
• 기본 매개 변수를 사용할 시에는 선택적 매개변수와 타입이 필요하지 않음
• 매개변수의 타입이 필요하지 않는 이유는 타입 추론과 관련있음
• 매개변수의 기본 값이 주어지는 코드를 통해서 타입스크립트는 타입 추론으로 타입 알아냄
• 따라서 보다 간결한 코드를 위해서는 매개변수의 타입을 지워주는 것이 좋음
  
  

4. 나머지 매개변수와 this의 타입 작성

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

• 나머지 매개변수는 개수가 매번 바뀔 수 있음
• 나머지 매개변수를 사용하면 전달받은 매개변수를 배열로 나타낼 수 있게함
• 그러므로 나머지 매개변수의 타입은 배열 형태로 작성해야 함
  
  

interface User {
	name: string;
}

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

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

function showAll(this: User, age: number, gender: 'm' | 'f') {
	console.log(this.name, age, gender);
}

const a = showName.bind(Sam);
a(); // Sam

const b = showAll.bind(Sam);
b(30, 'm'); // Sam 30 m

• 타입스크립트에서 this의 타입을 정할 때는 함수의 첫번째 매개변수 자리에 작성
• 함수의 매개변수가 있을 때에도 첫번째 자리에 this의 타입을 작성
• 전달인자는 this 다음부터 순서대로 적용됨
  
  

5. 함수 오버로딩

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

function join(name: string, age: string): string;
function join(name: string, age: number): User;
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');

• 함수의 반환값에 대한 타입이 확신이 없어 에러가 날 때 사용
• 전달인자의 타입에 따라서 반환값의 타입이 달라질 때 사용
• 함수 오버로딩 : 전달받은 매개변수의 개수나 타입에 따라 다른 동작을 하게 함
• 함수 위에 같은 형식으로 작성하면 됨
• 동일한 함수이지만 매개변수의 타입이나 개수에 따라 다른 방식으로 동작해야 한다면 오버로딩 사용
  
  

참고 : 땅콩코딩,코딩앙마