본 글의 모든 내용은 https://goalkicker.com/ 에서 다운로드한 TypeScript Notes For Professionals 를 번역한 내용입니다.
본 글의 목적은 본인의 학습 및 참고자료로 사용하기 위함입니다.
6. 함수
6-1. 기본 파라미터와 옵션 파라미터
옵션 파라미터
타입스크립트에서는 모든 파라미터가 사용되어야한다. 파라미터 이름 끝에 ?를 추가하면 해당 파라미터를 옵션 파라미터로 설정할 수 있다.
단, 첫 번째 파라미터는 항상 반드시 사용되어야 하는 파라미터이며, 옵션 파라미터로 설정할 수 없다.
function buildName(firstName:string, lastName?:string){
//....
}
function buildNameInvalid(firstName?:string, lastName:string){
//Invalid
}
기본파라미터
사용자가 해당 위치의 파라미터를 사용하지 않으면, undefined로 할당되는 argument이다.
기본값이 할당되며, default-initialized 파라미터라고 부른다.
function buildNameDefault(firstName:string, lastName:string = "Smith"){
//lastName => default-initialized parameter
}
buildNameDefault('foo', 'bar'); // firstName = 'foo', lastName = 'bar'
buildNameDefault('foo'); // firstName = 'foo', lastName = 'Smith'
buildNameDefault('foo', undefined); // firstName = 'foo', lastName = 'Smith'
6-2. 파라미터로 사용하는 함수
함수 자체를 함수의 파라미터로 받을 수 있다.
function foo(otherFunc: Function): void {
//...
}
6-2-1. constructor를 함수로 받고싶은 경우, 다음과 같이 수행한다.
function foo(constructorFunc: {new()}){
new constructorFunc();
}
function foo(constructorWithParamsFunc: {new(num:number)}){
new constructorWithParamsFunc(1);
}
가독성을 위해 인터페이스를 constructor에 대한 인터페이스를 선언할 수 있다.
interface IConstructor {
new();
}
function foo(constructorFunc: IConstructor){
new constructorFunc()
}
interface IConstructor {
new(num: number);
}
function foo(constructorWithParamsFunc: IConstructor){
new constructorWithParamsFunc(1)
}
제네릭을 사용하는 방법도 있다.
interface ITConstructor<T, U>{
new(item: T): U;
}
function foo<T,U>(constructorFunc: ITConstructor<T,U>, item: T): U{
return new constructorFunc(item)
}
6-2-2. 단순하거나 constructor를 받을 필요가 없는 경우에도 거의 동일하다.
function foo(func: { (): void}){
func()
}
function foo(constructorWithParamsFunc: { (num:number): void }){
new constructorWithParamsFunc(1);
}
제네릭과 인터페이스를 동시에 사용하여 가독성을 더 높일 수 있다.
interface IFunction {
(): void;
}
function foo(func: IFunction){
func();
}
파라미터와 함께 사용할 수 있다.
interface INumFunction {
(num:number): void;
}
function foo(func: INumFunction){
func(1)
}
제네릭을 추가할 수 있다.
interface ITFunc<T,U>{
(item: T):U;
}
function foo<T,U>(func: ITFunc<T,U>, item:T):U{
return func(item)
}
6-3. Union 타입 함수
타입스크립트의 함수는 여러 개의 파라미터를 받을 수 있고, 미리 정의된 union type을 사용할 수 있다.
function whatTime(hour:number|string, minute:number|string){
return hour+':'+minute;
}
whatTime(1,30);
whatTime('1',30);
whatTime(1,'30');
whatTime('1','30');
모든 결과는 동일하게 '1:30'을 반환한다.
타입스크립트에서 파라미터는 union된 타입이라 해도 하나의 타입으로 간주한다. 함수를 만들 때, union한 타입의 대상 중 하나를 선택하여 반환값의 타입으로 지정해야 한다.
function addTen(start:number|string){
if(typeof start === 'string'){
return parseInt(start)+10;
}
else{
return start+10;
}
}
6-4. 함수의 타입
명명된 함수
function multifly(a,b){
return a*b;
}
익명함수
let multifly = function(a, b) {return a*b;};
람다/화살표 함수
let multifly = (a,b) => { return a*b;};
반응형
'FrontEnd > TypeScript' 카테고리의 다른 글
예시코드와 함께 알아보는 타입스크립트 디자인패턴: 싱글톤 패턴 (0) | 2023.06.22 |
---|---|
예시코드와 함께 알아보는 타입스크립트 디자인패턴: 팩토리 패턴 (0) | 2023.06.22 |
타입스크립트 정리하기 5. Enum (0) | 2020.04.19 |
타입스크립트 정리하기 4. 배열 (0) | 2020.04.19 |
타입스크립트 정리하기 3. 타입스크립트의 주요타입 (0) | 2020.04.13 |