TypeScript - Triple-Slash Directives: A Beginner's Guide

Hai there, bakat pengkomputeran masa depan! ? Adakah anda bersedia untuk melantikan ke dunia menarik TypeScript? Hari ini, kita akan mengenalpasti sebuah topik yang mungkin kelihatan menakutkan pada permulaan: Triple-Slash Directives. Tetapi jangan bimbang! Pada akhir pelajaran ini, anda akan menjadi pakar penggunaan alat ini seperti seorang pro. Jadi, mari kita mula!

TypeScript - Triple-Slash Directives

Apa Itu Triple-Slash Directives?

Sebelum kita melompat ke lubuk dalam, mari kita mulakan dengan asas. Triple-slash directives adalah komen khas dalam TypeScript yang bermula dengan tiga garis miring (///). Mereka seperti pesan rahsia yang kami tinggalkan untuk compiler TypeScript, memberikan arahan khas tentang bagaimana hendak mengendalikan kod kami.

Ini adalah contoh triple-slash directive:

/// <reference path="myFile.ts" />

Bandingkan ia dengan catatan kecil yang kita tinggalkan untuk compiler TypeScript, katakan, "Hei, kawan! Pastikan anda periksa fail ini juga!"

Jenis Triple-Slash Directives

Sekarang kita tahu bagaimana directive ini kelihatan, mari kita jelajahi dua jenis utama:

Reference Directives
Module System Directives

Kita akan masuk dalam setiap jenis ini. Siap? Mari kita teruskan!

Reference Directives

Apa Itu Reference Directives?

Reference directives adalah seperti papan tanda dalam kod anda. Mereka memberitahu TypeScript, "Hei, ada sesuatu yang penting di sini yang anda perlu tahu!"

Directive `<reference path>`

Ini adalah jenis reference directive yang paling umum. Ia digunakan untuk memberitahu TypeScript bahawa ia perlu menyertakan fail lain semasa mengkompilkan.

mari lihat contoh:

/// <reference path="./utils.ts" />

function greetUser(name: string) {
console.log(`Hello, ${name}!`);
}

greetUser(getUserName());

Dalam contoh ini, kita memberitahu TypeScript untuk menyertakan fail utils.ts. Fail ini mungkin mengandungi fungsi getUserName() yang digunakan dalam kod kami.

Directive `<reference types>`

Directive ini digunakan untuk menyatakan dependensi kepada paket. Ia terutamanya berguna ketika anda bekerja dengan fail deklarasi (.d.ts files).

Ini adalah contoh:

/// <reference types="node" />

import * as fs from 'fs';

fs.readFile('example.txt', (err, data) => {
if (err) throw err;
console.log(data);
});

Dalam kes ini, kita memberitahu TypeScript bahawa kita menggunakan jenis dari paket 'node'. Ini membantu TypeScript memahami modul fs yang kita import.

Module System Directives

Sekarang, mari kita beralih ke module system directives. Mereka seperti menetapkan peraturan bagaimana kod kami hendak bermain dengan yang lain.

Directive `<amd-module>`

Directive ini digunakan ketika anda bekerja dengan modul AMD (Asynchronous Module Definition). Ia membolehkan anda menetapkan nama modul.

Ini adalah contoh:

/// <amd-module name="GreetingModule"/>

export function sayHello(name: string) {
return `Hello, ${name}!`;
}

Dalam kes ini, kita memberitahu TypeScript untuk menamakan modul AMD ini "GreetingModule".

Directive `<amd-dependency>`

Directive ini digunakan untuk memberitahu compiler tentang dependensi yang perlu disertakan ke dalam modul.

Ini adalah contoh:

/// <amd-dependency path="legacy/moduleA" name="moduleA"/>
import moduleA = require('moduleA');
moduleA.doSomething();

Dalam contoh ini, kita memberitahu TypeScript tentang dependensi kepada modul legasi, dan memberikan nama yang boleh digunakan dalam kod kami.

Menggabungkan Semua

Sekarang kita telah mengenalpasti directives ini, mari lihat bagaimana mereka mungkin bekerja bersama-sama dalam kes dunia nyata:

/// <reference path="./types.d.ts" />
/// <reference types="node" />
/// <amd-module name="MyAwesomeModule"/>

import * as fs from 'fs';
import { MyCustomType } from './types';

export function processData(data: MyCustomType) {
fs.writeFile('output.txt', JSON.stringify(data), (err) => {
if (err) throw err;
console.log('Data written to file');
});
}

Dalam contoh ini, kita menggunakan beberapa directives:

Kita merujuk kepada fail definisi jenis tempatan.
Kita menyatakan dependensi kepada jenis 'node'.
Kita menamakan modul AMD kami.

Kemudian, kita menggunakan kedua-dua modul fs dan jenis custom dalam fungsi kami.

Kesimpulan

Dan begitu sahaja! Anda telah mengambil langkah pertama ke dalam dunia triple-slash directives TypeScript. Alat ini yang kuat dapat membantu anda menguruskan dependensi, bekerja dengan sistem modul yang berbeza, dan menjaga projek TypeScript anda teratur.

Ingat, seperti mana-mana alat dalam pengkomputeran, kunci adalah latihan. Jadi jangan takut untuk mencuba directives ini dalam projek anda sendiri. Sebelum anda tahu, anda akan menggunakan mereka seperti seorang pro!

Selamat berkoding, master TypeScript masa depan! ?

Directive	Tujuan	Contoh
`<reference path>`	Sertakan fail lain	`/// <reference path="./utils.ts" />`
`<reference types>`	Nyatakan dependensi kepada paket	`/// <reference types="node" />`
`<amd-module>`	Tetapkan nama untuk modul AMD	`/// <amd-module name="GreetingModule"/>`
`<amd-dependency>`	Nyatakan dependensi AMD	`/// <amd-dependency path="legacy/moduleA" name="moduleA"/>`