타입스크립트에서 함수에 주석을 다는 가장 기본적인 방법은 이렇습니다
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를 찾을 수 없습니다
따라서 일반 함수에 주석을 추가하는 형식은 다음과 같습니다
function fnName <T,U>(param: T): U{ //logic }
일반 이름이 선언된 위치를 확인하세요. 따라서 위의 함수에 올바르게 주석을 달려면
function pickFirst<T>(array: Array<T>): T{ return array[0] }
이제 가능합니다.
하지만 함수 매개변수가 있는 일반 함수는 어떻습니까.
예를 들어, 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 }
또는 array.filter() 메소드?
function myFilter<Input>(arr: Input[], fn: (item: Input) => boolean): Input[]{ return arr.filter(fn) }
일반 변수를 특정 속성이 있는 유형으로 제한할 수도 있습니다. 예를 들어
function pickInnerFirst<T extends {length: number}>(array: Array<T>): T{ return array[0][0] }
이 함수는 2차원 배열에서 첫 번째 요소를 선택합니다
이렇게 하면 배열과 문자열(대부분)에서만 작동합니다.
pickOne([12, 20, 30]) // wont work.
인터페이스
를 사용할 수도 있습니다.
interface Lengthly{ length: number; } function pickInnerFirst<T extends Lengthly>(array: Array<T>): T{ return array[0][0] }
모르는 경우를 대비해 함수는 객체이며 속성을 가지고 있습니다
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의 함수에 주석 달기의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!