반응형
함수는 객체다
함수는 호출이 가능한(callable) '행동 객체(action object)’라고 이해하면 쉽습니다.
- 우리는 함수를 호출 할 수 있을 뿐만 아니라
- 객체처럼 함수에 프로퍼티를 추가·제거하거나
- 참조를 통해 전달할 수도 있습니다
함수 타입 표현식
가장 간단한 함수 타입 표현 방법은 아래와 같이 작성하는 것이다.
function greeter(fn: (a: string) => void) {
fn("Hello, World");
}
function printToConsole(s: string) {
console.log(s);
}
또 해당 글의 주제에서 벗어나지만 재미있는 타입은 생성자 시그니처다.
type SomeConstructor = {
new (s: string): SomeObject;
};
function fn(ctor: SomeConstructor) {
return new ctor("hello");
}
함수 생성자로도 동작하고, 일반 함수처럼도 동작하는 함수의 타입은 다음과 같다.
type SomeConstructor = {
new (s: string): SomeObject;
};
function fn(ctor: SomeConstructor) {
return new ctor("hello");
}
Call Signature
JavaScript에서 함수는 호출 가능할 뿐만 아니라 속성을 가질 수 있다.
그러나 함수 타입 표현식 구문은 속성 선언을 허용하지 않는다.
속성으로 호출 가능한 것을 설명하려면 객체 타입에 호출 서명을 작성할 수 있다.
type DescribableFunction = {
description: string;
(someArg: number): boolean;
};
function doSomething(fn: DescribableFunction) {
console.log(fn.description + " returned " + fn(6));
}
참고
https://ko.javascript.info/function-object
https://www.dofactory.com/javascript/function-objects
https://www.typescriptlang.org/docs/handbook/2/functions.html
반응형
'FrontEnd' 카테고리의 다른 글
[Storybook/ Vue3] Play 함수를 이용하여 컴포넌트 상호작용 자동화 (0) | 2022.12.19 |
---|---|
[번역] Vite 플러그인 만들기 (0) | 2022.12.19 |
[Vue3] Composition API와 Composable이란 무엇인가? (0) | 2022.12.18 |
[Vue3] watch vs watchEffect 사용사례 비교 (0) | 2022.12.18 |
[React 디자인 패턴] Renderless Component 패턴 (0) | 2022.12.17 |