[TS] 함수

 

목차

 

 

 

📌  함수

 

 

📍함수 매개변수

 

 💁매개변수란? 함수를 정의할 때 사용되는 변수를 의미

타입 스크립트에서 함수는 자바스크립트처럼 생성할 수 있으나, 매개변수의 타입과 반환 타입을 설정해야 한다.

 

// 타입을 선언하지 않으면 any로 간주한다
function sing(song : string){
	console.log('Singing : ${song}!');
}

 

 

🔗 필수 매게변수와 선택적 매게변수

 

필수 매게변수

 

타입스크립트는 함수에 정의된 모든 매개변수가 함수에 필요하다고 가정한다.

 

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

 

🙋‍♀️

매개변수가 2개 이상인 함수 호출 시 argument를 하나만 전달하고 싶다면??

 

Error!!! 타입스크립트 컴파일 시 모든 매게변수가 들어오지 않았으므로 에러가 난다.

👉👉 해결법  : 선택적 매게변수

 

선택적 매게변수

 

선택적 매게변수란, 물음표를 사용하여 매게변수를 선택 사항으로 표시 할 수 있음을 의미한다.

 

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

// 위 코드와 동일
function sum(a: number, b: number | undefined): number {
  return a + b;
}
sum(10, 20); // 30
sum(10); // 타입 에러 없음

 

❗️❗️❗️주의사항

선택적 매게변수들은 반드시 필수 매게변수 뒤에 위치시켜야 한다.

하나의 매개변수가 선택적 매개변수가 되면 선택적 매개변수의 오른쪽에 위치한 다른 매개변수들 또한

선택적 매개변수가 되어야 하기 때문이다.

 

🔗 기본 매게변수와 나머지 매게변수

기본 매게변수

 

기본 매게변수를 사용하면 선택적 매게변수가 | undfined 가 아닌, default 값을 갖게 할 수 있다. 

 

 

'선택적 매게변수' = '할당할 값'

 

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

 

 

나머지 매게변수

 

나머지 매개 변수는 (마지막 인자가 ...argumentName으로 표시됨) 함수에서 여러 인자를 배열로 받는다.

 

function iTakeItAll(first, second, ...allOthers) {
    console.log(allOthers);
}
iTakeItAll('foo', 'bar'); // []
iTakeItAll('foo', 'bar', 'bas', 'qux'); // ['bas','qux']

 

 

📍 반환 타입

 

암묵적으로 타입스크립트는 반환 타입을 정한다.

아래 코드를 보면 타입을 정하지 않아도 반환 타입은 number이다.

 

const foo = (num1: number, num2: number) => {
	return num1 + num2; // number
};

 

함수 또한 명시적 반환타입이 유용한 경우가 있다.(ex -> num : number)

 

• 가능한 반환값이 많은 함수가 항상 동일한 타입의 값을 반환하도록 강제
• 타입스크립트는 재귀 함수의 반환 타입을 통해 타입을 유추하는 것을 거부
• 수백 개 이상의 타입스크립트 파일이 있는 매우 큰 프로젝트에서 타입스크립트 타입 검사 속도를 높일 수 있다.

 

 

📍 함수 타입

 

함수 자체에서도 타입을 지정할 수 있다

함수 타입은 어떤 타입을 가진 매게변수를 받아 어떤 타입의 값을 반환하는지를 말한다

 

변수: (매개변수의 타입) => 반환값의 타입

 

let combineValues: (a:number, b:number) => number;

 

// 이 코드는 함수 타입을 명시하지 않았기 때문에 Error 
function add(n1: number, n2: number) {
	return n1 + n2;
}

let combineValues;

combineValues = add; 
combineValues = 5;

// 타입을 명시해주어야 에러가 나지 않는다
function add(n1: number, n2: number) {
	return n1 + n2;
}

// ✨ 함수타입 지정
let combineValues: (a: number, b: number) => number;

combineValues = add;

 

 매게변수 타입 추론

 

매개변수에 기본 값이 있으면 매개변수에 값을 할당 하지 않아도 된다.

더불어 기본 값이 있으면 굳이 인자 타입을 선언하지 않아도 된다. 

 

function sum(a: number, b = 100): number { // 매개변수 기본 값이 있으면 굳이 인자 타입을 선언하지 않아도 된다 (타입 추론)
   return a + b;
 }

 

함수 타입 별칭

 

타입 별칭이란? 재사용하는 타입에 더 쉬운 이름을 할당

함수 매게변수도 함수 타입을 참조하는 병칭을 입력할 수 있다

 

type NumberToString = (input : number) => string;
...

 

 

🔗  그 외 반환 타입 void, never

 

void

이 함수는 아무것도 반환하지 않는다

 

const greetMaker = (phrase: string): void => {
	console.log(phrase);
};

 

never

(의도적으로)항상 오류를 발생 시키거나 무한 루프를 실행하는 함수

 

const greetMaker = (phrase: string): never => {
	console.log(phrase);
};

 

 

🔗  함수 오버로드

동일한 이름에 매개 변수만 다른 여러 버전의 함수를 만드는 것을 함수의 오버로딩이라고 한다.

 

 

🙋‍♀️

Function overloading은 언제 사용하고 왜 사용 할까?

파라미터만 달라지고, 비슷한 로직이 반복되는 경우에 사용할 수 있다.

코드의 중복을 줄이고 재사용성을 높이기 위해 사용된다.

 

// 문제 없는 함수 오버로딩 선언
class User {
    constructor(private id: string) {}
    setId(id: string): string;
    setId(id: number): string;
}
 
 
// Error
class User {
    constructor(private id: string) {}
    // 선언 시에 에러는 나지 않지만 오버로딩 함수 정의 시에 에러
    setId(id: string): void;
    setId(id: string): number; // 반환 타입 다름
    setId(radix: number, id: number): void; // 인수 순서 다름
}