Fungsi Anotasi dalam Typescript

Cara paling asas untuk menganotasi fungsi dalam skrip taip adalah seperti ini

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

// or

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

parameter pilihan dianotasi dengan param tanda soal? begini

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

Tetapi bagaimana pula dengan fungsi panggil balik, atau fungsi yang jenis hujah dan jenis pulangan berkaitan (dalam kes itu, generik).

---

Nilai Fungsi

Perhatikan fungsi JavaScript ini

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

supaya kita boleh menggunakan fungsi seperti ini;

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

Nilai fungsi dianotasi dalam skrip taip seperti ini

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

// or

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

Jadi untuk menganotasi fungsi pengganda, kami mempunyai

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

IDE anda (sebaik-baiknya) VSCode, secara automatik akan membuat kesimpulan jenis nilai (menjadi nombor) dalam logik fungsi

---

Fungsi generik

Anotasi fungsi ini salah

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

Sememangnya ini menimbulkan ralat yang
Tidak dapat mencari nama T

oleh itu, format menganotasi fungsi generik ialah

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

Perhatikan di mana nama generik diisytiharkan. jadi, untuk menganotasi fungsi di atas dengan betul;

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

Sekarang berjaya.

Tetapi bagaimana pula dengan fungsi Generik yang mempunyai parameter fungsi.

Sebagai contoh, kami ingin menganotasi fungsi peta tersuai bernama myMap yang ditulis seperti ini dalam Javascript

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

Kita boleh membuat anotasi seperti ini

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

Apa yang perlu kita perhatikan dalam coretan di atas ialah fungsi fn mengambil item daripada jenis tatasusunan Input yang sama dan mengembalikan jenis Output.

Bagaimana pula dengan kaedah Array.from() statik?

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

atau kaedah array.filter()?

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

Kekangan generik

Anda juga boleh mengekang pembolehubah generik kepada jenis yang mempunyai sifat tertentu. Contohnya,

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

Fungsi ini memilih elemen pertama dalam tatasusunan 2 dimensi

Ini memastikan bahawa ia hanya berfungsi untuk tatasusunan dan rentetan (kebanyakannya) dengan cara yang

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

Kami juga boleh menggunakan antara muka

interface Lengthly{
    length: number;
}

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

---

Antara Muka Fungsi

Sekiranya anda tidak tahu, Fungsi ialah objek dan ia mempunyai sifat

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

Contoh kedua menunjukkan bahawa fungsi tambah ialah anak Object.prototype (walaupun ia bukan anak langsung) dan oleh itu ialah objek.

Cukup lucu, anda boleh melampirkan sifat pada fungsi dalam JavaScript

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

// or

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

Coretan ini akan kembali

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

Perhatikan bahawa di A kami melampirkan sifat yang dipanggil perihalan pada fungsi yang hanya boleh dilakukan dengan objek.

Itu untuk membuat kesimpulan bahawa;

Objek boleh diterangkan dengan antara muka (biasanya). Untuk fungsi, ini juga mungkin. walau bagaimanapun, ia hanya sesuatu yang perlu anda pertimbangkan apabila anda menambah sifat istimewa pada fungsi anda.

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

Pada ulasan A ialah tempat kami menerangkan hujah dan jenis pengembalian fungsi.

Jadi, untuk menganotasi kod terdahulu dalam skrip taip,

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

Perhatikan cara kami menggunakan antara muka dalam fungsi jeritan di A.

---

Mengapakah saya perlu memahami cara menganotasi fungsi dalam Typescript?

Nah, ia membantu dalam membina sistem jenis yang jauh lebih pintar yang seterusnya mengurangkan peluang anda dijangkiti pepijat. Jika anda sedang membina perpustakaan atau rangka kerja, anda mungkin perlu menggunakan beberapa atau kebanyakan konsep yang dinyatakan di sini.
Jika anda hanya menggunakan perpustakaan, konsep ini sebenarnya tidak diperlukan, walaupun ia boleh memberi anda pemahaman yang lebih mendalam tentang perpustakaan yang anda bekerjasama.

Sekiranya anda mempunyai sebarang soalan atau terdapat kesilapan dalam penulisan ini, sila kongsikan di ruangan komen di bawah ⭐

Atas ialah kandungan terperinci Fungsi Anotasi dalam Typescript. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!