코딩 팁

Typescript 함수형 변수(declare function type) 사용법 4개

코딩 기록 vicddory 2020. 1. 29. 07:00


타입스크립트에는 많은 타입이 있습니다. 자바스크립트 콜백 함수 좋아하는 분들에게도 이 글은 도움이 되리라 생각합니다.


Solution 1 - any

가장 안 좋은 방법입니다. 변수를 any 유형으로 선언하면 나중에 다른 함수를 할당할 수도 있습니다.


let a:any;


a = function ():void{

    console.log("It works");

}


Solution 2 - Function

종종 인터페이스를 디자인할 때 실제 정의 형태를 모를 수 있는데, 키워드 Function을 사용하여 유형(정의 형태)의 형태를 쉽게 확인할 수 있습니다.


let a:Function;


a = function ():void{

    console.log("It works");

}


any 보단 괜찮죠? 변수 a에 function 이외의 값을 할당하면 컴파일러 오류가 발생합니다.


Type ‘xxxxx’ is not assignable to type ‘Function’.

Solution 3 - More specific signature:

이제 프로젝트를 진행하면서 함수형 변수에 무슨 일이 일어나는지 완벽히 알 수 있습니다. 따라서, 화려한 화살표 함수를 사용합니다. 선언과 정의를 보다 정확하게 수정하고, ECMA2015에서 표준으로 지정한 기법을 사용합니다.


let a:(para:string)=>string;


a = function (pass:string):string{

    return pass;

}


여기 구문은 매우 간단합니다. Java 또는 C#의 람다 함수와 마찬가지로 화살표 다음의 string은 반환 값 유형입니다. para: string은 매개 변수 유형입니다. a는 string을 반환합니다.


Solution 4 - Use type

type을 함수 타입으로 선언하는데 사용할 수 있습니다.


type read = (name: string) => void;


const test:read = (value: string) => {

  console.log(value);

}


Solution 5 - Interface them all

타입스크립트입니다. 우리는 interface를 사랑해야 합니다. (헤드퍼스트 디자인 패턴을 읽으면 좋습니다)


interface read {

  (name: string): string;

}


const test:read = (value: string) => value;



관련 글


반응형
그리드형(광고전용)