Transpilasi adalah proses mengonversi kode sumber dari satu bahasa ke bahasa lain. Dalam kasus TypeScript, ini adalah proses mengonversi kode TypeScript ke kode JavaScript. Ini diperlukan karena browser dan Node.js tidak dapat menjalankan kode TypeScript secara langsung.
Mengompilasi TypeScript ke JavaScript
Cara paling umum untuk menjalankan kode TypeScript adalah mengompilasinya ke JavaScript terlebih dahulu. Anda dapat melakukannya menggunakan kompiler TypeScript tsc.
Langkah 1: Tulis kode TypeScript Anda dalam sebuah file, misalnya example.ts.
type User = {
name: string;
age: number;
};
function isAdult(user: User): boolean {
return user.age >= 18;
}
const justine = {
name: 'Justine',
age: 23,
} satisfies User;
const isJustineAnAdult = isAdult(justine);
Langkah 2: Instal TypeScript secara lokal menggunakan pengelola paket:
Dalam contoh ini, kami akan menggunakan npm. Anda dapat membaca pengantar kami tentang pengelola paket npm untuk informasi lebih lanjut.
npm i -D typescript # -D is a shorthand for --save-dev
Langkah 3: Kompilasi kode TypeScript Anda ke JavaScript menggunakan perintah tsc:
npx tsc example.ts
CATATAN: npx adalah alat yang memungkinkan Anda menjalankan paket Node.js tanpa menginstalnya secara global.
tsc adalah kompiler TypeScript yang akan mengambil kode TypeScript kita dan mengompilasinya ke JavaScript. Perintah ini akan menghasilkan file baru bernama example.js yang dapat kita jalankan menggunakan Node.js. Sekarang setelah kita tahu cara mengompilasi dan menjalankan kode TypeScript, mari kita lihat kemampuan pencegahan bug TypeScript dalam tindakan!
Langkah 4: Jalankan kode JavaScript Anda menggunakan Node.js:
node example.js
Anda akan melihat output kode TypeScript Anda di terminal
Jika terdapat kesalahan tipe
Jika terdapat kesalahan tipe dalam kode TypeScript Anda, kompiler TypeScript akan mendeteksinya dan mencegah Anda menjalankan kode tersebut. Misalnya, jika Anda mengubah properti age dari justine menjadi string, TypeScript akan memunculkan kesalahan:
Kita akan mengubah kode kita seperti ini, untuk secara sukarela memperkenalkan kesalahan tipe:
type User = {
name: string;
age: number;
};
function isAdult(user: User): boolean {
return user.age >= 18;
}
const justine: User = {
name: 'Justine',
age: 'Secret!',
};
const isJustineAnAdult: string = isAdult(justine, "I shouldn't be here!");
Dan inilah yang dikatakan TypeScript tentang hal ini:
example.ts:12:5 - error TS2322: Type 'string' is not assignable to type 'number'.
12 age: 'Secret!',
~~~
example.ts:3:5
3 age: number;
~~~
The expected type comes from property 'age' which is declared here on type 'User'
example.ts:15:7 - error TS2322: Type 'boolean' is not assignable to type 'string'.
15 const isJustineAnAdult: string = isAdult(justine, "I shouldn't be here!");
~~~~~~~~~~~~~~~~
example.ts:15:51 - error TS2554: Expected 1 arguments, but got 2.
15 const isJustineAnAdult: string = isAdult(justine, "I shouldn't be here!");
~~~~~~~~~~~~~~~~~~~~~~
Found 3 errors in the same file, starting at: example.ts:12
Seperti yang Anda lihat, TypeScript sangat membantu dalam mendeteksi bug sebelum terjadi. Inilah salah satu alasan mengapa TypeScript sangat populer di kalangan pengembang.
0 Comments