Menyiapkan TypeScript dalam Proyek JavaScript

TypeScript adalah superset kuat dari JavaScript yang memperkenalkan pengetikan statis, perkakas yang lebih baik, dan pemeliharaan yang lebih baik. Mengintegrasikan TypeScript ke dalam proyek JavaScript yang sudah ada dapat meningkatkan kualitas kode dan menangkap potensi bug lebih awal. Dalam panduan ini, kami akan memandu Anda dalam menyiapkan TypeScript dalam proyek JavaScript selangkah demi selangkah.

1. Menginstal TypeScript

Pendekatan awal untuk menggabungkan TypeScript ke dalam proyek JavaScript adalah dengan menginstalnya. Anda dapat menginstal TypeScript secara global, namun, untuk penggunaan di tingkat proyek, cukup instal sebagai ketergantungan dev dengan:

npm install --save-dev typescript

Atau jika Anda menggunakan yarn run:

yarn add --dev typescript

sumber: theodo.com

2. Membuat File Konfigurasi TypeScript

Setelah menginstal TypeScript, Anda harus membuat tsconfig. Langkah kedua adalah memulai tsconfig. Jalankan perintah berikut ini:

tsc --init

Ini akan membuat berkas tsconfig.json dengan pengaturan default. Anda dapat menyesuaikan file ini agar sesuai dengan kebutuhan proyek Anda.

Konfigurasi tsconfig.json yang disarankan

Untuk transisi bertahap dari JavaScript ke TypeScript, pertimbangkan konfigurasi berikut ini:

{
"compilerOptions": {
"target": "ES6",
"module": "CommonJS",
"strict": true,
"allowJs": true,
"checkJs": true,
"outDir": "dist",
"rootDir": "src",
"esModuleInterop": true
},
"include": ["src"],
"exclude": ["node_modules"]
}

Konfigurasi ini memungkinkan TypeScript untuk memeriksa berkas JavaScript (allowJs: true dan checkJs: true), sehingga proses migrasi menjadi lebih lancar.

3. Mengganti nama file menjadi TypeScript (.ts atau.tsx)

Untuk memulai dengan TypeScript, ganti saja nama file. js Anda menjadi. ts. Jika Anda menggunakan React, ganti nama file. jsx menjadi. tsx. Hal ini memungkinkan TypeScript untuk memverifikasi dan menerapkan tipe.

Anda dapat memulai dengan mengganti nama beberapa file dan mengatasi kesalahan tipe secara bertahap.

4. Menyiapkan Definisi Tipe TypeScript

Beberapa pustaka JavaScript yang signifikan tidak memiliki definisi TypeScript bawaan. Anda mungkin harus memasang definisi tipe secara terpisah dengan repo DefinitelyTyped. Sebagai contoh:

npm install --save-dev @types/node @types/express

Ganti node dan express dengan paket yang Anda gunakan.

5. Memperbarui Skrip Build Anda

Modifikasi berkas package.json untuk menambahkan skrip build TypeScript:

"scripts": {
"build": "tsc"
}

Jalankan npm run build untuk mengkompilasi berkas TypeScript ke dalam JavaScript.

6. Mengatur Linter Anda untuk TypeScript

Jika Anda sudah menggunakan ESLint, instal plugin khusus TypeScript, dan perbarui konfigurasi ESLint Anda.

npm install --save-dev @typescript-eslint/parser @typescript-eslint/eslint-plugin

Kemudian, modifikasi. eslintrc. json untuk mendukung TypeScript:

{
"parser": "@typescript-eslint/parser",
"extends": [
"eslint:recommended",
"plugin:@typescript-eslint/recommended"
]
}

7. Migrasi Bertahap dan Penggunaan Komentar JSDoc

Jika Anda tidak dapat mem-porting semuanya sekaligus, pertimbangkan hal ini untuk adopsi bertahap: Komentar JSDoc.

/** @type {import('express').RequestHandler} */
const handler = (req, res) => {
res.send("Hello, TypeScript!");
};

Hal ini memungkinkan TypeScript untuk menyimpulkan tipe tanpa mengonversi file sepenuhnya.

Kesimpulan

Menyiapkan TypeScript dalam proyek JavaScript akan meningkatkan keandalan dan pemeliharaan kode. Dengan mengikuti langkah-langkah ini, Anda dapat mengintegrasikan TypeScript secara bertahap dan memanfaatkan pengetikan statis, perkakas yang lebih baik, dan skalabilitas. Mulailah dari yang kecil, lakukan migrasi secara bertahap, dan nikmati manfaat TypeScript dalam alur kerja pengembangan Anda!

Kembali ke>>>> Menggunakan TypeScript dengan JavaScript: Panduan Komprehensif