Typescript의 함수에 주석 달기

타입스크립트에서 함수에 주석을 다는 가장 기본적인 방법은 이렇습니다

function add(a: number, b: number): number{
 // logic
}

// or

const add = (a: number, b: number): number => {
    //logic
}

선택적 매개변수에는 물음표 param으로 주석이 추가됩니다. 이렇게

function optional(a: number, b?: number){
    console.log(a)
}

그러나 콜백 함수 또는 인수 유형과 반환 유형이 관련된 함수(이 경우 일반)는 어떻습니까?

---

기능 값

이 JavaScript 함수를 살펴보세요

function multiplier(factor){
    return value => factor * value
}

이런 기능을 사용할 수 있도록;

const n  = multiplier(6)
n(8) // 48

함수 값은 다음과 같이 TypeScript에 주석이 추가됩니다

(param1: type, param2: type)=> type

// or

const add: (a: number, b: number)=> number = function (a, b){
    return a + b
}

승수 기능에 주석을 달기 위해

function multiplier(factor: number): (value: number) => number{
    return value => factor * value
}

귀하의 IDE(바람직하게는) VSCode는 함수 논리에서 값 유형(숫자)을 자동으로 추론합니다

---

일반 함수

이 함수 주석이 잘못되었습니다

function pickFirst(array: Array<t>): T{
    return array[0]
}
</t>

당연히 오류가 발생합니다
이름 T를 찾을 수 없습니다

따라서 일반 함수에 주석을 추가하는 형식은 다음과 같습니다

function fnName <t>(param: T): U{
    //logic
}
</t>

일반 이름이 선언된 위치를 확인하세요. 따라서 위의 함수에 올바르게 주석을 달려면

function pickFirst<t>(array: Array<t>): T{
    return array[0]
}
</t></t>

이제 가능합니다.

하지만 함수 매개변수가 있는 일반 함수는 어떻습니까.

예를 들어, Javascript로 작성된 myMap이라는 사용자 정의 지도 함수에 주석을 달고 싶습니다

function myMap(arr, fn){
    rreturn arr.map(fn)
}

이렇게 주석을 달 수 있습니다

function myMap<input output>(arr: Input[], fn: (item: Input, index?: number) => Output): Output[]{
    return arr.map(fn)
}

위 스니펫에서 주목해야 할 점은 fn 함수가 동일한 유형의 입력 배열 항목을 가져와 출력 유형을 반환한다는 것입니다.

정적 Array.from() 메서드는 어떻습니까?

function myFrom<type>(iterable: Iterable<type>): Array<type>{
    // logic
}
</type></type></type>

또는 array.filter() 메소드?

function myFilter<input>(arr: Input[], fn: (item: Input) => boolean): Input[]{
    return arr.filter(fn)
}

일반 제약조건

일반 변수를 특정 속성이 있는 유형으로 제한할 수도 있습니다. 예를 들어

function pickInnerFirst<t extends number>(array: Array<t>): T{
    return array[0][0]
}
</t></t>

이 함수는 2차원 배열에서 첫 번째 요소를 선택합니다

이렇게 하면 배열과 문자열(대부분)에서만 작동합니다.

pickOne([12, 20, 30]) // wont work.

인터페이스
를 사용할 수도 있습니다.

interface Lengthly{
    length: number;
}

function pickInnerFirst<t extends lengthly>(array: Array<t>): T{
    return array[0][0]
}
</t></t>

---

기능 인터페이스

모르는 경우를 대비해 함수는 객체이며 속성을 ​​가지고 있습니다

const add = (a, b) => a + b

console.log(add.toString()) //(a, b) => a + b

// also
console.log(Object.getPrototypeOf(add) == Function.prototype) //true
console.log(Object.getPrototypeOf(Function.prototype) == Object.prototype) //true

두 번째 예에서는 add 함수가 Object.prototype의 하위(직계 하위가 아니더라도) 따라서 객체임을 나타냅니다.

재밌네요 JavaScript에서는 함수에 속성을 추가할 수 있습니다

function add(a: number, b: number): number{
 // logic
}

// or

const add = (a: number, b: number): number => {
    //logic
}

이 스니펫이 반환됩니다

function optional(a: number, b?: number){
    console.log(a)
}

A에서는 객체로만 가능한 기능에 설명이라는 속성을 첨부했습니다.

결론은 이렇습니다.

객체는 인터페이스로 설명할 수 있습니다(일반적으로). 기능의 경우에도 가능합니다. 그러나 함수에 특수 속성을 추가할 때만 고려해야 할 사항입니다.

function multiplier(factor){
    return value => factor * value
}

댓글 A에는 함수의 인수와 반환 유형을 설명하는 곳이 있습니다.

그래서 TypeScript에서 이전 코드에 주석을 달려면

const n  = multiplier(6)
n(8) // 48

A의 외침 기능에서 인터페이스를 어떻게 사용했는지 살펴보세요.

---

Typescript에서 함수에 주석을 추가하는 방법을 이해해야 하는 이유는 무엇입니까?

글쎄, 훨씬 더 스마트한 유형 시스템을 구축하는 데 도움이 되며 결과적으로 버그 발생 가능성도 줄어듭니다. 라이브러리나 프레임워크를 구축하는 경우 여기에 언급된 개념 중 일부 또는 대부분을 사용해야 할 수도 있습니다.
단지 라이브러리를 사용하는 경우 이러한 개념은 작업 중인 라이브러리에 대해 훨씬 더 깊은 이해를 제공할 수 있지만 실제로는 필요하지 않습니다.

궁금한 점이나 이 글에 틀린 부분이 있으면 댓글로 남겨주세요⭐

위 내용은 Typescript의 함수에 주석 달기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!