사용자 도구

사이트 도구


typescript:deep:type

Type in Typescript?

How to declare a function type variables in Typescript?

원본

There are many types in typescript, but since we love callback function in javascript, how do we declare them in typescript? Let's take a look from the bottom to the top. And with along some practice thinking.

타입스크립트에는 많은 타입들이 있지만, 우리는 자바스크립트의 콜백함수를 선호하는 이유로 해서, 타입스크립트에서는 그것을 어떻게 선언할까? 밑의 예제를 보고 위로 보면서, 예행적 사고를 가지기 바랍니다.

Solution 1 - any

OK, this is the most ugly way to achieve it, you can simply declare a variable as any type, then later, you can assign a function to it. It's not recommend.

좋아, 이것은 가장 못난 접근 방법이다, 당신은 any타입의 변수를 단순히 선언하고 그것에 함수를 할당한다. 이것을 추천하지 않는다.

<Code:typescript> let a: any;

a = function (): void {

  console.log('It works');

} </Code>

Solution 2 - Function

Sometimes, when you design the interfaces, you have no idea what the actual signature will be, but instead declaring a 'any' type, you can use a keyword 'Function', so you can take advantage of the type checking later.

때로는 인터페이스를 디자인 할 때 실제 서명이 무엇인지 모르지만 'any'유형을 선언하는 대신 키워드 'Function'를 사용하여 나중에 유형 확인을 활용할 수 있습니다.

<Code:typescript> let a: Function;

a = function(): void {

  console.log('It works');
  }

</Code>

OK. So now when you want assign a value other than function to this variable 'a', the compiler will throw an error : 좋아. 이제 변수 'a'에 함수가 아닌 다른 값을 대입할때 컴파일러는 에러를 발생시킨다.

Type 'xxxxx' is not assignable to type 'Function'

Solution 3 - More specific signature:

Now, as your projets goes on, you have whole idea of what's going on there. So you can go back and modify your declaration to a more precise version using the fancy arrow function syntax, feel free to use it, it maked as 'standard' in ECMA2015.

이제, 당신의 프로젝트가 진행됨에 따라, 당신은 거기에 대한 전체를 알고 있다. 그래서 당신은 뒤로 돌아가 당신의 선언를 연습버젼에서 화려한 화살표 함수문법으로 수정할 수 있다. 화살표함수는 ECMA2015에서 표준이 되었다. <Code:typescript> let a: (para: string) ⇒ string; a = function(pass: string): string {

  return pass;
}

</Code>

The syntax here is very simple, it is just like the lambda function in Java or C#, the 'string' after the arrow is the type of the return value. The para: string defines the type of the parameter. It takes a string and return a string.

여기 문법은 매우 단순하고, 이것은 자바와 씨샵의 라므다 함수와 유사하게 화살표후의 'string'은 반환값의 타입이다. 'para: string'은 파라메터의 타입을 선어한다. 이것은 문자열을 받아서 문자열을 반환한다.

Solution 4 - Use type

We can use type to declare a function type:

type을 이용하여 함수 타입을 선언할 수 있다.

<Code:typescript> type read = (name: string) ⇒ void; const test: read = (value: string) ⇒ {

console.log(value);

} </Code>

Solution 5 - Interface them all

We are Typescript, we'd love to use the beloved interface for everything, well, you can, for just a function. 우리는 타입스크립트에서는, 우리는 모든 것에 대해서 사랑하는 interface를 사용를 선호한다. 글쎄, 당신은 함수에 대해서도 할 수 있다. <Code:typescript> interface read {

(name: string): string;

}

const test: read = (value: string) ⇒ value; </Code>

Summary

In pratice, I often use Solution 4 - Type. Maybe just because it looks simpler than interface version.

경험적으로 나는 4번 Type을 선호한다. 아마도 interface버전보다 단순해 보이기 때문이다.

typescript/deep/type.txt · 마지막으로 수정됨: 2025/04/15 10:05 저자 127.0.0.1