Typescript Day 05 - 함수

함수

매개변수와 반환값의 타입주석은 일반적으로 생략이 가능하지만 좋지 않다

function 함수명(매개변수1: 타입1, 매개변수2: 타입2): 반환타입 {
	//...    
}

const 함수명 = (매개변수1: 타입1, 매개변수2: 타입2): 반환타입 => {
    //...
}

void 타입

아무런 값을 반환하지 않는 함수는 반환 타입이 void이다.

void는 함수의 반환 타입으로만 사용하도록 하자.

함수 시그니처

변수의 타입처럼 함수의 타입을 시그니처라고 한다.

(타입1, 타입2...) => 반환타입

const print: (string, number) => void = function(name: string, age: number): void {
    //...
}

// 매개변수가 없을 시
const pring: () => void = function(): void {
    //...
}

Type Alias

함수 시그니처를 별칭으로 만들어서 사용할 수 있다

type print = (string, number) => void;
const a: print = function(name: string, age: number): void {};

undefined 주의사항

interface IName {
    name: string
}

function getName(o: IName) {
    return o.name;
}

let name = getName(undefined); // 오류

undefined는 최하위 타입이므로 매개변수에 undefined를 넣어도 오류가 발생하지 않지만, return o.name 구문에서 undefined.name이 되므로 런타임 시 타입 오류가 발생한다.

이를 고려하려면 예외처리를 해주어야한다.

interface IName {
    name: string
}

function getName(o: IName) {
    return o !== undefined ? o.name : 'unknown';
}

let name = getName(undefined); // unknown

// 선택 속성에 대한 예외 처리
interface IAge {
    age?: number
}

function getAge(o: IAge) {
    return o !== undefined && o.age ? o.age : 0;
}

let age1 = getAge(undefined); // 0
let age2 = getAge(null); // 0
let age3 = getAge({age: 30}); // 30

선택적 매개변수 (Optional Parameter)

function aa(arg1: string, arg2?: number): void {}

// 선택적 매개변수가 있는 함수의 타입
type OptionalFunc = (string, number?) => void;

콜백 함수

함수 표현식을 매개변수로 받을 수 있다. 매개변수 형태로 동작하는 함수를 콜백함수라고 한다.

const init = (callback: () => void): void => {
    console.log(1);
    callback();
    console.log(2);
}

init(() => console.log(3));

// 1
// 3
// 2

중첩 함수

함수는 변수에 담아 사용할 수 있으므로 또 다른 함수를 중첩할 수 있다.

const calc = (val: number, cb: (number) => void): void => {
    let add = (a, b) => a + b;
    let multi = (a, b) => a * b;
    
    let result = multi(add(1,2), val);
    cb(result);
}

calc(30, (result: number) => console.log(result)); // 90

객체 반환 시 주의

arrow function으로 객체 반환 시 return을 생략하고 다음과 같이 작성하면 오류가 발생한다.

type Person = {name: string, age: number}
const a = (name: string, age: number): Person => {name, age} // 오류, 복합 실핼문으로 해석 
const a = (name: string, age: number): Person => ({name, age})

객체 반환 시 중괄호를 괄호로 한번 더 감싸야한다.

매개변수 비구조화 할당

매개변수에도 비구조화 할당 적용이 된다.

type Person = { name: string, age: number };

const print = ({name, age}: Person): void => {
    console.log(name, age);
};

색인 key, value로 객체 만들기

key, value 값으로 객체를 만들 수 있다.

const makeObject = (key, value) => ({ [key]: value });

const person = makeObject('name', 'jack'); // { name: jack }

타입스크립트에서는 key, value 형태의 타입을 색인 기능 타입(Indexable Type)이라고 한다

type IndexableType = {
    [key: string]: string
}

const makeObj = (key: string, value: string): IndexableType => ({[key]: value});

const person = makeObj('name', 'jack'); // { name: jack }

참고 자료

Do it 타입스크립트 프로그래밍

Typescript-Handbook

Archive

Typescript Day 05 - 함수