TypeScript dan tsconfig.json

Artikel ini menerangkan tentang TypeScript dan tsconfig.json.

Bermula dari peranan asas TypeScript, kami akan menerangkan dengan contoh khusus, bagaimana tsconfig.json berfungsi dalam sebuah projek.

YouTube Video

TypeScript dan tsconfig.json

TypeScript ialah 'JavaScript dengan jenis (types)'. Namun, untuk menggunakan TypeScript secara berkesan dalam projek sebenar, adalah penting untuk memahami tsconfig.json dengan betul dan mengkonfigurasinya secara sengaja.

Mengapa kita memerlukan TypeScript?

Pertama sekali, sebab utama menggunakan TypeScript ialah 'kemampuan untuk mengesan kesilapan sebelum pelaksanaan.'.

1function add(a: number, b: number): number {
2  return a + b;
3}
4
5add(1, "2");

Kod ini tidak akan menyebabkan ralat dalam JavaScript sehingga waktu larian (runtime), tetapi dalam TypeScript ia menghasilkan ralat jenis semasa masa kompilasi.

Pengesanan awal ini sangat meningkatkan kecekapan dan kualiti pembangunan.

Bagaimana TypeScript dijalankan?

Secara prinsipnya, TypeScript tidak boleh dijalankan secara terus. Anda perlu menukarnya kepada JavaScript menggunakan tsc (TypeScript Compiler)..

1npm install -D typescript
2npx tsc --init

• Dengan melakukan operasi ini, tsconfig.json dijana, yang menyediakan fail utama yang menentukan tingkah laku projek TypeScript.

Apakah peranan tsconfig.json?

tsconfig.json ialah fail konfigurasi yang menentukan 'fail mana,' 'dengan peraturan apa,' dan 'bagaimana untuk menukarnya.'. Walaupun ia nampak rumit pada awalnya, hanya beberapa tetapan yang benar-benar penting.

1{
2  "compilerOptions": {
3    "target": "ES2020",
4    "module": "ESNext",
5    "strict": true
6  }
7}

• Dengan hanya tetapan ini, pembangunan TypeScript yang moden dan selamat adalah mungkin.

target: Versi JavaScript yang akan dihasilkan

target menentukan tahap spesifikasi bagi JavaScript keluaran.

1"target": "ES2020"

Dengan ini, TypeScript akan menghasilkan JavaScript yang setara dengan ES2020. Untuk persekitaran lama, pilih ES5; untuk hanya persekitaran terbaru, pilih ES2022, dan sebagainya.

Apabila menetapkan ESNext

1"target": "ESNext"

• ESNext menetapkan untuk menghasilkan sintaks JavaScript terbaru yang tersedia seperti sedia ada. TypeScript tidak menukar sintaksnya, dan sebaliknya menyerahkan kepada persekitaran runtime seperti Node.js atau pelayar untuk menguruskannya.

• Oleh itu, ESNext sesuai apabila hanya menyasarkan Node.js terkini atau anda menggunakan Babel atau pembundel untuk transpile secara berasingan. Sebaliknya, jika persekitaran runtime tidak menyokong sintaks terbaru, ini mungkin menyebabkan ralat semasa runtime, jadi berhati-hatilah.

module: Tetapkan format modul

module menetapkan format modul.

1"module": "ESNext"

• ESNext ialah piawaian dalam frontend dan persekitaran Node.js moden.
• Pilih "CommonJS" hanya jika anda memerlukan CommonJS.

strict: Maksimumkan keselamatan jenis (type safety)

strict ialah suis untuk memaksimumkan keselamatan TypeScript.

1"strict": true

• Mengaktifkan ini akan mengesan jenis yang samar dan pepijat yang berpotensi.

mod strict dan any tersirat (implicit any)

Apabila anda mengaktifkan strict, TypeScript menganggap pembolehubah yang jenisnya tidak dapat disimpulkan sebagai ralat.

1function printValue(value) {
2	console.log(value);
3}

• Pembolehubah value ini tidak mempunyai maklumat jenis semasa deklarasi, jadi TypeScript tidak dapat menentukan jenisnya. Akibatnya, any digunakan secara tersirat, yang akan mencetuskan amaran (ralat) dalam mod strict.

1function printValue(value: number) {
2	console.log(value);
3}

• Dengan menyatakan jenis secara jelas seperti ini, TypeScript boleh memahami bahawa 'pembolehubah ini hanya mengendalikan nombor.'. Dalam TypeScript, lebih penting bahawa jenis boleh ditentukan secara unik berbanding jenis boleh diabaikan.

include/exclude: Mengawal fail mana yang perlu dikompilasi

Dalam tsconfig.json, anda boleh menentukan fail mana untuk dimasukkan dan fail mana untuk dikecualikan daripada proses kompilasi.

1{
2  "include": ["src"],
3  "exclude": ["node_modules"]
4}

• Dengan tetapan ini, hanya fail di bawah src akan diuruskan oleh TypeScript.
• node_modules yang dinyatakan dalam exclude akan dikecualikan daripada kompilasi walaupun ia berada di bawah laluan yang dimasukkan dalam include.

outDir: Tetapkan direktori output

Tetapkan outDir untuk mengurus lokasi output binaan anda.

1"outDir": "dist"

• Dengan ini, semua hasil kompilasi akan disimpan ke dalam folder dist. Dalam amalan, memisahkan kod sumber daripada artifak binaan adalah standard.

rootDir: Tetapkan direktori sumber

rootDir menetapkan direktori yang dianggap sebagai akar kod sumber oleh TypeScript.

1"rootDir": "src"

• Tetapan ini membolehkan TypeScript mengekalkan struktur direktori berasaskan src semasa menghasilkan fail. Sebagai contoh, src/index.ts akan dikeluarkan sebagai dist/index.js.

• Struktur direktori yang ditentukan dalam rootDir akan disalin ke dalam outDir.

esModuleInterop: Menjambatani CommonJS dan ES Modules

Seterusnya, mari lihat esModuleInterop.

1"esModuleInterop": true

• Jika diaktifkan, anda boleh menggunakan modul CommonJS dengan selamat menggunakan sintaks import.

1import fs from "fs";

• Tetapan ini hampir wajib apabila menggunakan Node.js.

noImplicitAny: Larang jenis 'any' tersirat

Ia juga penting untuk menguatkan semakan jenis dalam tsconfig.json.

1"noImplicitAny": true

• Dengan ini, anda boleh melarang jenis any tersirat. Ini membolehkan anda mengesan dengan pasti tempat di mana anda terlupa untuk menentukan jenis.

Konfigurasi untuk mengesan kod yang tidak digunakan

Tetapan untuk mengesan kod yang tidak digunakan juga sangat membantu dalam meningkatkan kebolehselenggaraan.

1"noUnusedLocals": true,
2"noUnusedParameters": true

• Dengan ini, pembolehubah dan argumen yang tidak perlu akan diberi amaran dengan serta-merta.

lib: Menentukan API terbina dalam yang tersedia untuk digunakan

lib ialah tetapan yang menentukan API piawai yang dianggap wujud oleh TypeScript.

1"lib": ["ES2020", "DOM"]

• Dengan tetapan ini, jenis-jenis berikut boleh digunakan:. Dengan ES2020, ciri moden seperti Promise, Map, dan Set boleh digunakan. Dengan DOM, API pelayar seperti document, window, dan HTMLElement boleh digunakan.

Dalam frontend, sertakan DOM; untuk projek hanya Node.js, keluarkan DOM untuk mengelakkan jenis global yang tidak perlu dimasukkan.

moduleResolution: Peraturan pencarian modul

moduleResolution menentukan bagaimana modul yang dinyatakan dalam arahan import diselesaikan.

1"moduleResolution": "Node"

Dua pilihan utama adalah seperti berikut:.

• Jika anda menetapkan Node, peraturan penyelesaian modul Node.js akan digunakan.
• Classic ialah kaedah lama yang khusus untuk TypeScript, tetapi jarang digunakan hari ini.

Dalam persekitaran yang menggunakan Node.js atau pembundel, adalah selamat untuk menetapkan Node secara jelas.

tsconfig.json minimum yang sedia digunakan untuk produksi

Berdasarkan apa yang telah kita bincangkan, tsconfig.json minimum yang sedia digunakan untuk produksi akan kelihatan seperti berikut:.

 1{
 2  "compilerOptions": {
 3    "target": "ES2020",
 4    "module": "ESNext",
 5    "moduleResolution": "Node",
 6    "lib": ["ES2020", "DOM"],
 7    "strict": true,
 8    "rootDir": "src",
 9    "outDir": "dist",
10    "esModuleInterop": true,
11    "noImplicitAny": true,
12    "noUnusedLocals": true,
13    "noUnusedParameters": true
14  },
15  "include": ["src"]
16}

Konfigurasi ini menyediakan asas yang selamat untuk projek frontend dan Node.js.

Ringkasan: tsconfig.json ialah 'buku peraturan'

tsconfig.json bukan sekadar fail konfigurasi, tetapi 'buku peraturan' yang digunakan untuk keseluruhan projek. Dengan tsconfig.json, polisi penting seperti berikut ditentukan dengan jelas:.

• Tahap keselamatan jenis (type safety).
• Konvensyen pengekodan untuk pasukan anda.
• Pencegahan pepijat di masa hadapan.

Dengan memahami tsconfig.json, anda akan dapat bukan sahaja menulis TypeScript, malah mereka bentuk projek anda untuk penggunaan TypeScript yang selamat.

Anda boleh mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Sila lihat juga saluran YouTube kami.

YouTube Video