03. function in typescript

[TS] 3. Function in TypeScript
by. Jbee

TypeScript에서함수를정의하는데있어서몇가지추가된기능에대해살펴
봅니다.

Table of Contents
Return type, Parameter type
Default Parameter / Rest Parameter
Optional Parameter
Union Type
Overloading

인자와반환값의타입을설정한다.
함수또는메소드를정의할때, 타입을정의해줍니다.
ES6 code
function getMonthFromString(dateOfStringFormat) {
const monthOfNumberFormat = parseInt(dateOfStringFormat.subst
return monthOfNumberFormat;
}

위함수는'201712'이라는문자열을받아서해당하는월을반환하는함수입니
다. (반환값의형식을명시하기 위해바로return하지않고 변수에임시로받아
준뒤반환합니다.) 위와같이String 타입의인자를받아야한다는것을명시
해줘야하기 때문에변수명부터굉장히이상해집니다. 자바스크립트에는타입
이라는것이없기 때문에메소드명또는변수명에타입을명시할수밖에없습
니다.

만약Number 타입의201712를인자로넘겨준다면Number에는substring
이라는함수가 없기 때문에에러가 발생합니다. 위함수를보다안정적으로작
성하기 위해서는다음과 같은if 문이필요하게 됩니다.
function getMonthFromString(dateOfStringFormat) {
if (typeof dateOfStringFormat !== "string") {
throw Error("Invalid format of parameter");
}
const monthOfNumberFormat = parseInt(dateOfStringFormat.subst
return monthOfNumberFormat;
}

기본적으로함수가 수행해야하는비즈니스로직외불필요한방어코드가 코드
를더럽히고 있습니다. 위함수를TypeScript 함수로변경해보겠습니다.

const getMonth = (date: string): number => {
return parseInt(date.substring(4, 6), 10);
}
인자와반환값에타입을설정하여메소드이름과 변수명이훨씬짧아졌습니다.
그럼에도불구하고 해당함수가 하는역할을ES6로작성했을때보다명확해졌
으며, 불필요한방어코드마저사라졌습니다.
wtfjs에서확인하실수있지만자바스크립트에서는타입이멋대로(사실은매
우다양한규칙을기반으로) 캐스팅되는경우가 많은데요, 이를방지하기 위해
우리는불필요한방어코드를작성해왔습니다. 타입을지정함으로써이러한작
업을최소화할수있습니다.

Default Parameter, Rest Parameter
해당스펙은ES6 표준스펙에서도지원하고 있는스펙이므로구체적은설명은
넘어가겠습니다. 자세한내용은첨부하는포스팅을확인해주세요.
ES6. Rest Parameter
ES6. Default Parameter

TypeScript에서도해당스펙을지원합니다.
Default parameter TypeScript code
위코드에서는인자가 넘겨지지않았을경우( undefined ), 지정해준값으로
인자를설정합니다. 명시적으로 null 을인자로넘겨주면default로설정된
parameter를무시하고 null 을인자로넘깁니다. 지정한인자를모두넘기
지않으면에러를뱉던TypeScript도default parameter가 지정되어있으면
에러를발생시키지않습니다.
const getRandomNumber = (min: number = 0, max: number = 10
return Math.floor(Math.random() * (max - min)) + min;
}
console.log(getRandomNumber(1)); // OK!

Rest parameter TypeScript code
rest parameter 의타입은배열(array)이므로인자에해당하는타입을설
정해줍니다.
export const setSkills = (...skills: string[]): void => {
// ...
}

Optional Parameter
TypeScript에서는default parameter 없을경우, signature에서정의한대
로인자를넘겨주지않으면에러가 발생합니다. 하지만파라미터를넘겨주지
않아도되도록설정할수있습니다.
? 를통해서함수에optional한parameter를지정할수있습니다.
const setSpec = (major: string, option?: string): void => {
console.log(major);
console.log(option);
}
setSpec("Computer Science");
// console> Computer Science
// console> undefined

Union Type
파라미터에타입을지정할때, 두가지이상의타입이지정할필요가 있을수
있는데요, 그럴때Union type을통해서파라미터의타입을지정해줄수있습
니다.
sayName(position: string | boolean | number): void {
if (typeof position === "string") {
console.log(`string type position`);
} else if (typeof position === "boolean") {
console.log(`boolean type position`)
} else {
console.log(`else`);
}
}
위코드에서는 position 이라는파라미터가 string , boolean ,
number 세가지의타입일수있다고 signature를지정했습니다. (예제가 송
구스럽네요)

Overloading
바로이전Class 포스팅에서자바와같은오버로딩을지원하지않는다고 했는
데요, optional parameter 와 union type 그리고 any 라는타입을
사용하면자바에서구현하는것과는조금 다르지만오버로딩을구현할수있습
니다.

위와같이동일한메소드명에대해여러Signature를정의할수있습니다. 위
코드에서는 sayName 이라는메소드의Signature가 세개이며마지막메소
드에서만이를구현하고 있습니다. 그리고 메소드body에서는parameter의
타입으로분기를하여로직을수행하고 있습니다.
class Person {
//..
sayName(position: string, option?: string): void;
sayName(position: boolean, option: string): void;
sayName(position: string | boolean, option: any): any {
if (typeof position === "string") {
console.log(`string type position`);
} else if (typeof position === "boolean") {
console.log(`boolean type position`)
} else {
console.log(`else`);
}
}
//..
}

const person: Person = new Person();
person.sayName("FrontEnd");
person.sayName("FrontEnd", "optional);
person.sayName(false, "option required");
// person.sayName(true); Error! (1)
// person.sayName(1); Error! (2)
sayName 을호출하게 되면, 메소드를호출하는시점에서각 상황에맞는
signature가 적용됩니다. Error (1) 을보면 boolean 타입이인자로넘
어갔을경우의signature에따라 option 이 required 인자이므로에러가
발생합니다. Error (2) 는어느signature와도일치하지않으니에러가 발
생합니다. 이렇게 TypeScript에서는여러signature를정의한뒤메소드내
에서이를분기하여오버로딩을구현할수있습니다.

마무리
TypeScript 좀더안정성있는, 간결한, 가독성이좋은함수를작성할수있게
되었습니다. 어떻게 보면타이핑이길어지는결과처럼보일수있겠지만타입
의명시가 필요한부분에있어서는오히려코드가 더짧아지게 되었습니다.
감사합니다.

03. function in typescript

More Related Content

What's hot (20)

Similar to 03. function in typescript (20)

More from Han JaeYeab (18)

03. function in typescript