Typescript 함수 타입

함수 타입

 

 

function getText(name: string, age: number): string {
    const nameText = name.substr(0, 10);
    const ageText = age >= 35 ? 'senior' : 'junior';
    return `name:${nameText}, age: ${ageText}`;

    const v1: string = getText('mike', 23) // 통과
    const v2: string = getText('mike', '23') //'23' age 타입 오류
    const v3: number = getText('mike', 23) //v3 함수 반환 타입 오류

• 타입스크립트의 함수 타입은 위와 같은 코드가 기본이다.
• 매개변수에 타입을 각각 정할 수 있으며 함수의 반환 타입 또한 매개변수 () 뒤에  :' 타입' 을 붙여 타입을 정해줄 수 있다.
• 그래서 매개변수에 들어가는 값들이 정해진 타입과 다르거나 변수로 정의된 함수의 타입이 다르다면 바로 오류를 알아차릴 수 있게 되었다.

 

 

const getText: (name: string, age: number) => string = function (name, age) {
    return 'text';
};

위와 같이 화살표 함수로도 표현할 수 있다.

 

 

 

 

선택 매개 변수

 

function getText(name: string, age: number, language?: string): string {
    const nameText = name.substr(0, 10);
    const ageText = age >= 35 ? 'senior' : 'junior';
    const languageText = language ? language.substr(0, 10) : ''; // ''과 같은 undefinded도 가능해짐
    return `name:${nameText}, age: ${ageText}, language: ${languageText}`;

getText('mike', 23, 'ko') //통과
getText('mike', 23)	//통과
getText('mike', 23, 123) //오류

• 선택매개 변수는 ' ? ' 을 붙여주면 발동 가능하다. 즉 language?: string은 문자 타입도 가능하고 undefinded도 가능하다고 볼 수 있다.
• 주의할 상항은 language?: string이 두 번째 인자로 사이에 들어가 있으면 뒤에 있는 세번째 인자로 인하여 오류가 나타난다는 것이다.

 

 

매개변수 기본값

 

function getText(name: string, age: number = 15, language: 'korean'): string {
    return '';
}
console.log(getText('jin')); //통과
console.log(getText('mike', 23)); //통과
console.log(getText('mike', 35, 'english')); //통과

• 위와 같이 특정 타입의 각각의 숫자, 문자을 입력해주면 그 해당 값의 타입 종류를 타입으로 정한다고 볼 수 있다.
• 예를 들어 따로 타입을 language: 'korean' 처럼 따로 타입을 정해주지 않아도 'korean'이라는 문자 타입으로 인하여 language는 문자 타입을 가지게 된다.
• 또 기본값을 사용한 age와 language는 ?가 붙어있는 선택 매개 변수로도 변환되어있다는 것을 확인 할 수 있다.

 

 

 

나머지 매개변수

 

function getText(name: string, ...rest: number[]): string {
    return '';
}
console.log(getText('mike', 1, 2, 3)); //통과

• 위와 같이 ... 의 나머지 매개변수를 이용하여 두번 째 인자부터 들어 오는 매개변수들을 한꺼번에 타입을 정하고 담을 수 있다.
• 대신 나머지 매개변수의 타입은 항상 []을 붙여주어 배열로 정의해야한다.

 

 

 

 

this 타입

 

 

function getParam(this: string, index: number): string {
    const params = this.split(',');
    if (index < 0 || params.length <= index) {
        return '';
    }
    return this.split(',')[index];
}

• this에 타입을 정할때는 매개변수 첫 번째 인자로 this: string 이런식으로 타입을 지정해주면 된다. 
• 이때 두 번째 인자는 this 때문에 인자가 밀려나도 함수의 매개 변수는 두번 째 인자부터가 첫 번째 매개 변수로 시작된다고 보면된다.

 

 

interface Object {
    getShortKeys(this: object): string[];
}

Object.prototype.getShortKeys = function () {
    return Object.keys(this).filter((key) => key.length <= 3);
};

const obj = {
    a: 1,
    bb: 2,
    ccc: 3,
    dddd: 4
};

console.log(obj.getShortKeys());
//[ 'a', 'bb', 'ccc' ]

• 위의 코드처럼 프로토타입을 이용하여 메소드 기능을 주입할 수 있다.
• 대신 interface라는 기능을 통해 Object의 타입을 정의해야만 Object가 프로토타입을 사용할 수 있다.

 

 

오버로드

 

오버로드 예를 위한 함수 실습

 

• add 함수 작성하기 조건
• 두 매개변수가 모두 문자열이면 문자열을 반환한다.
• 두 매개변수가 모두 숫자이면 수자를 반환한다.
• 두 매개변수를 서로 다른 타입으로 입력하면 안된다.

function add(x: number, y: number): number; //오버로드
function add(x: string, y: string): string; //오버로드
function add(x: number | string, y: number | string): number | string {
    if(typeof x === 'number' && typeof y === 'number') {
        return x + y;
    } else {
        const  result = Number(x) + Number(y);
        return result.toString();
    }
}
const v1: number = add(1, 2); //통과
console.log(add(1, '2')); //오류

• 위의 코드를 보면 오버로드라는 기능을 이용하였는데 오버로드를 사용하게 되면서 v1 변수의 타입이 오류없이 통과되도록 되었다.
• 그 이유로 오버로드가 없었다면 두 매개변수가 같은 타입이라도 반듯이 v1이 타입 number로서 반환된다는 보장이 없다고 코드는 읽기 때문이다.
• 하지만 매개변수가 같은 타입일때 number 혹은 string로 반환된다는 오버로드를 추가해주면 보장을 받고 통과할 수 있게 되었다. 
• 즉 로직으로는 표현이 되었지만 타입으로는 정의가 안되었다는 의미이다.

 

 

 

name 파라미터

 

export {};

function getText({
    name,
    age = 15,
    language,
} : {
    name: string;
    age?: number;
    language?: string;
}): string {
    const nameText = name.substr(0, 10);
    const ageText = age >= 35 ? 'senior' : 'junior';
    return `name: ${nameText}, age: ${ageText}, language: ${language}`
}

getText({name: `aaa`})

• 이렇게 name 파라미터를 이용하여 타입을 지정해 줄 수도 있다.
• age와 language는 선택 매개 변수이므로 매개변수로 안넣어줘도 상관없다.

 

interface Param {
    name: string;
    age?: number;
    language?: string;
}

function getText({ name, age = 15, language }: Param): string {
    const nameText = name.substr(0, 10);
    const ageText = age >= 35 ? 'senior' : 'junior';
    return `name: ${nameText}, age: ${ageText}, language: ${language}`;
}

getText({ name: `aaa` });

name 파라미터를 다른 곳에서 사용하고 싶으면 이렇게 interface을 이용하여 떨어트려 사용해도 된다.