[TypeScript] 타입스크립트 함수 사용하기

🎯 TypeScript 함수 사용하기

• 함수 작성 시 반환 타입 명시 권장
• 매개변수와 인수의 타입이 호환 가능하게 작성
• 인수 타입의 전달이 잘못된 경우 오류 발생

 

📝 함수 선언

function sum(a: number, b: number) {
    return a + b;
}

//  함수 선언식
function world(name: string):string {
    return `hello ${name}`;
}

// 함수 표현식
let world2 = function (name: string):string {
    return `hello ${name}`;
}

//화살표 함수 표현식
let world3 = (name: string): string => {
    return `hello ${name}`;
}

// 단축형 화살표 함수 표현식
let world4 = (name: string): string => `hello ${name}`;

• 명시적인 리턴 타입을 권장하지만 반드시 작성할 필요는 없음
• 타입 추론이 가능하다.

 

📝 타입 추론

• 타입스크립트 컴파일러는 방정식의 한쪽에만 타입이 있더라도 타입을 추론할 수 있다.
• 이러한 타입 추론 형태를 "Contextual typing"이라고 한다.
• 이를 통해 프로그램에서 타입을 유지하기 위한 노력을 줄일 수 있다.

 

📝 함수의 매개변수

• 함수에 주어진 인자의 개수는 함수가 기대하는 매개변수의 수와 일치해야 함
• TS에서도 선택적 매개 변수 사용 가능
• 매개변수의 default 값을 설정 가능
• 가변 인수 함수를 만들 수 있음

 

📕 함수 인자 수 = 매개변수 수

function sum(a: number, b: number): number {
    return a + b;
}

// error
let sumAge = sum(2, 3, 4);

let sumWeight = sum(30, 40);

• 함수에 주어진 인자의 수는 함수가 기대하는 매개변수의 수와 일치해야 한다.

 

📕 선택적 매개변수(Optional Parameter)

function addOneOrTwo(a: number, b?: number): number {
    if(b) return a + b;
    return a;
}

console.log(addOneOrTwo(5, 10))
console.log(addOneOrTwo(10))

function sum(a: number, b: number, tupe?: string): number {
    return a + b;
}


let sumWeight = sum(20, 30, 'weight');

// error
let sumHeight = sum(130, 140, 'weight', 'temp');

• JS에서는 모든 매개변수가 선택적으로, 인수가 없다면 undefined가 된다.
• TS에서도 선택적 매개변수를 사용할 수 있다 => 변수명 뒤에 ?를 사용해서 옵션 변수를 추가해 줄 수 있음
• 필수 매개변수 뒤에 위치해야 한다.

 

📕 매개변수 기본값 설정

function sum(a: number, b: number = 10): number {
    return a + b;
}

// 30
let test = sum(20);
console.log(test)

• TS에서는 값을 제공하지 않거나, undefined로 했을 때에 매개변수의 값 할당 가능

 

📕 가변 인자 함수

function buildName(firstName: string, ...restOfName: string[]): string {
    return firstName + ' ' + restOfName.join('');
}

// 에러
buildName();

buildName('Tom'); // Tom

buildName('Tom', 'A', 'B'); // Tom A B

function addTwoOrMore(a: number, b: number, ...c: number[]): number {
    let sum: number = a + b;
    if(c) {    
        for (let i: number = 0 ; i < c.length; i++) {
            sum += c[i]
        }
    } 

    return sum;

}
console.log(addTwoOrMore(2, 1))
console.log(addTwoOrMore(8, 8, 6, 1, 9, 6))

• ...부호로 기본 인자 뒤에 가변 인자를 설정하여 함수 선언 가능
• 가변 인자의 매개변수는 무한으로 넘길 수 있고 아무것도 안 넘겨줘도 됨.