Articles
Pengenalan kepada TypeScript
Asas-asas TypeScript

Asas-asas TypeScript

Artikel ini menerangkan asas-asas TypeScript.

YouTube Video

Melaksanakan "Hello World!"

Pertama sekali, kita akan jalankan contoh klasik "Hello World!" dalam TypeScript menggunakan Visual Studio Code.

npm install -g typescript

Pasang typescript menggunakan arahan npm.

Cipta fail tsconfig.json.

1{
2  "compilerOptions": {
3    "target": "ES6",
4    "module": "CommonJS",
5    "outDir": "out",
6    "sourceMap": true
7  }
8}

Cipta fail .vscode/launch.json untuk membolehkan menjalankan fail main.ts dalam Visual Studio Code.

 1{
 2    "version": "0.2.0",
 3    "configurations": [
 4        {
 5            "type": "node",
 6            "request": "launch",
 7            "name": "Launch Program",
 8            "skipFiles": [
 9                "<node_internals>/**"
10            ],
11            "program": "${workspaceFolder}/main.ts",
12            "preLaunchTask": "tsc: build - tsconfig.json",
13            "outFiles": [
14                "${workspaceFolder}/out/main.js"
15            ]
16        }
17    ]
18}

Cipta fail main.ts yang memaparkan "Hello World!". Anda boleh jalankannya di Visual Studio Code dengan menekan kekunci F5.

1console.log("Hello World!");

Dengan mengkonfigurasi cara ini, anda boleh menjalankan fail TypeScript dalam VSCode.

Gambaran Keseluruhan TypeScript

TypeScript (TS) ialah subset lanjutan JavaScript yang dibangunkan oleh Microsoft. TypeScript menyokong pengetikan statik, membolehkan kod yang lebih kukuh dan mudah diselenggara.

Pengetikan Statik

  • TypeScript menambah jenis kepada JavaScript dan melakukan pemeriksaan jenis pada masa penyemakan. Ini membolehkan kita mengelakkan pepijat berkaitan jenis lebih awal.
1let message: string = "Hello, TypeScript";
2console.log(message);

Pengkompilasian

  • Memandangkan TypeScript tidak boleh dijalankan secara langsung dalam pelayar, ia perlu ditranspilasi (dikompilasi) kepada JavaScript. Gunakan tsc (Pengkompil TypeScript) untuk menukar fail TS kepada fail JS.

Penjelasan Jenis Pilihan

  • TypeScript juga melakukan inferens jenis tetapi membolehkan anda menyatakan jenis secara eksplisit apabila perlu. Ini meningkatkan kebolehbacaan dan kebolehpercayaan kod.
1function greet(name: string): string {
2    return `Hello, ${name}`;
3}
4console.log(greet('John'));

Antara Muka (Interfaces)

  • TypeScript menyediakan interface untuk mentakrifkan bentuk objek. Ini membolehkan pengurusan struktur objek yang ketat.
1interface Person {
2    name: string;
3    age: number;
4}
5const user: Person = { name: "John", age: 30 };
6console.log(user.name);

Kelas

  • TypeScript menyediakan pelanjutan kepada sintaks kelas JavaScript dan menyokong pewarisan, pengubah akses (public, private, protected), dan kelas abstrak.
 1class Animal {
 2    protected name: string;
 3    constructor(name: string) {
 4        this.name = name;
 5    }
 6    speak(): void {
 7        console.log(`${this.name} makes a sound.`);
 8    }
 9}
10
11class Dog extends Animal {
12    speak(): void {
13        console.log(`${this.name} barks.`);
14    }
15}
16const animal = new Animal('Generic Animal');
17animal.speak();
18
19const dog = new Dog('Buddy');
20dog.speak();

Generik

  • Dalam TypeScript, anda boleh menulis kod yang boleh digunakan semula dan selamat daripada jenis menggunakan generik.
1function identity<T>(arg: T): T {
2    return arg;
3}
4console.log(identity<string>("Hello Generics"));

Ekosistem

  • TypeScript serasi sepenuhnya dengan ekosistem JavaScript dan boleh menggunakan kod JavaScript sedia ada seperti biasa. Selain itu, ia diintegrasikan dengan pustaka popular seperti React dan Node.js.

Alat Pembangun Yang Berkuasa

  • TypeScript menawarkan ciri-ciri canggih seperti pelengkapan automatik, sokongan penstrukturan semula, dan pemeriksaan ralat dalam penyunting seperti VSCode.

TypeScript amat berguna untuk meningkatkan kebolehpercayaan dan memperbaiki produktiviti pembangun dalam projek-projek besar.

Pembolehubah dalam TypeScript

Ini menjelaskan konsep asas dan penggunaan pembolehubah dalam TypeScript.

Pengisytiharan Pembolehubah

Dalam TypeScript, pembolehubah diisytihar menggunakan tiga kata kunci: let, const, dan var. Setiap kata kunci mempunyai ciri yang berbeza.

Contoh let:

let mempunyai ruang lingkup blok (sah hanya di dalam kurungan keriting {}). Nilai boleh diberikan semula kemudian.

1let count: number = 10;
2console.log(count);  // Outputs: 10
3
4count = 20;
5console.log(count);  // Outputs: 20

Contoh const:

const tidak boleh diberikan semula, jadi nilai yang diberikan sekali tidak boleh diubah. Walau bagaimanapun, kandungan objek dan tatasusunan boleh diubah.

1const pi: number = 3.14;
2console.log(pi);  // Outputs: 3.14
3
4// pi = 3.14159; // Error: Reassignment is not allowed
5
6const fruits: string[] = ["apple", "banana"];
7fruits.push("orange");
8console.log(fruits);  // Outputs: ["apple", "banana", "orange"]

Contoh var:

var mempunyai skop fungsi dan boleh diberikan semula. Namun, kerana tidak mengambil kira skop blok, ia mungkin menyebabkan kelakuan tidak dijangka berbanding dengan let atau const.

 1var message: string = "Hello, world!";
 2console.log(message);  // Outputs: Hello, world!
 3
 4message = "Hello, TypeScript!";
 5console.log(message);  // Outputs: Hello, TypeScript!
 6
 7// (`var` ignores block scope)
 8if (true) {
 9    var localMessage = "Hello again!";
10}
11console.log(localMessage); // "Hello again!"

Anotasi Jenis

Dalam TypeScript, anda boleh secara eksplisit menyatakan jenis untuk pembolehubah. Inferens jenis juga disokong, tetapi anotasi jenis berguna dalam senario yang kompleks.

1let isDone: boolean = false;
2console.log(isDone);  // Outputs: false
3
4let userName: string = "Alice";
5console.log(userName);  // Outputs: Alice

Pembolehubah Tidak Dinisialisasikan

Jika pembolehubah diisytiharkan tanpa inisialisasi, undefined akan diberikan secara lalai. Pembolehubah yang diisytiharkan dengan let mesti secara eksplisit diberikan undefined atau memasukkan undefined dalam jenisnya jika tidak diinisialisasikan.

1let uninitialized: number | undefined;
2console.log(uninitialized);  // Outputs: undefined
3
4uninitialized = 5;
5console.log(uninitialized);  // Outputs: 5

Skop Pembolehubah

let dan const mempunyai skop blok, jadi ia hanya sah dalam blok yang sama.

1if (true) {
2    let blockScoped: string = "Block Scoped";
3    console.log(blockScoped);  // Outputs: Block Scoped
4}
5// console.log(blockScoped);  // Error: blockScoped is out of scope

Pengangkatan Pemboleh Ubah

Oleh kerana TypeScript ialah superset JavaScript, ia mewarisi ciri pengangkatan JavaScript. Pengangkatan merujuk kepada tingkah laku di mana pengisytiharan pemboleh ubah dan fungsi diperlakukan seolah-olah diangkat ke bahagian atas skop mereka. Walau bagaimanapun, hanya pengisytiharan yang diangkat, manakala inisialisasi kekal di tempatnya. Pemboleh ubah yang diisytiharkan dengan var diangkat, tetapi menggunakan let atau const sebelum pengisytiharan akan menyebabkan ralat.

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10
  • Dalam kes ini, pemboleh ubah yang diisytiharkan dengan var diangkat, dan nilainya akan dikeluarkan.
1console.log(b); // ReferenceError
2let b = 20;
  • Pemboleh ubah yang diisytiharkan dengan let tidak diangkat, menyebabkan ralat.

Ringkasan

Berikut adalah ringkasan mengenai let, const, dan var.

  • let boleh diberikan semula dan mempunyai ruang lingkup blok.
  • const tidak boleh diberikan semula dan mempunyai ruang lingkup blok.
  • var boleh diberikan semula dan mempunyai ruang lingkup fungsi.
  • Kesemua mereka membenarkan penjelasan jenis secara eksplisit untuk menetapkan jenis pembolehubah.

Aksara Melarikan Diri dalam TypeScript

Aksara melarikan diri digunakan apabila aksara tertentu tidak boleh dimasukkan secara langsung atau untuk mewakili aksara yang mempunyai makna khas dalam rentetan. Dalam TypeScript, aksara melarikan diri digunakan untuk mewakili aksara kawalan atau aksara khas.

Sebagai contoh, gunakan \n untuk menghasilkan mesej yang mengandungi baris baru.

1const message: string = "Hello,\nWorld!";
2console.log(message);
3// Output:
4// Hello,
5// World!

Melarikan Aksara Khas

Aksara melarikan diri juga berguna apabila memasukkan aksara khas dalam rentetan. Sebagai contoh, anda mungkin mahu menggunakan tanda petikan berganda atau petikan tunggal secara langsung dalam rentetan.

1const singleQuoteExample: string = 'It\'s a beautiful day!';
2console.log(singleQuoteExample);
3// Output: It's a beautiful day!
4
5const doubleQuoteExample: string = "He said, \"Welcome!\"";
6console.log(doubleQuoteExample);
7// Output: He said, "Welcome!"

Melarikan Aksara Backslash Itu Sendiri

Untuk memasukkan aksara backslash dalam rentetan, anda perlu menulisnya sebagai backslash berganda.

1const path: string = "C:\\Program Files\\MyApp";
2console.log(path);
3// Output: C:\Program Files\MyApp

Melarikan Unicode dan Heksadesimal

Dalam TypeScript, titik kod Unicode boleh diwakili menggunakan urutan melarikan diri.

Urutan Melarikan Unicode

Anda boleh mewakili aksara Unicode dengan menyatakan nombor heksadesimal empat digit selepas \u.

1const smileyFace: string = "\u263A";
2console.log(smileyFace);
3// Output: ☺ (Copyright Mark)

Melarikan Heksadesimal

Anda boleh mewakili aksara tertentu dengan menggunakan nombor heksadesimal dua digit selepas \x.

1const letterA: string = "\x41";
2console.log(letterA);
3// Output: A

Literals Templat dan Melarikan

Literal templat ditakrifkan dengan melampirkan mereka dalam backticks dan memberikan cara yang mudah untuk mencipta ekspresi tertanam atau rentetan berbilang baris. Aksara melarikan diri biasa boleh digunakan secara langsung dalam literals templat.

1const multiLine: string = `This is
2a multi-line
3string.`;
4console.log(multiLine);
5// Output:
6// This is
7// a multi-line
8// string.

Kes-Kes Khas

Dalam TypeScript, penggunaan urutan melarikan diri yang tidak sah dalam rentetan boleh menyebabkan ralat sintaks. Oleh itu, adalah penting untuk memeriksa sama ada aksara melarikan diri adalah sah.

1// Invalid escape sequence
2const invalidString: string = "\xZZ"; // Error

Contoh Penggunaan Praktikal

Berikut adalah contoh membina rentetan kompleks menggunakan aksara melarikan diri.

1const jsonExample: string = "{\n\t\"name\": \"John Doe\",\n\t\"age\": 30\n}";
2console.log(jsonExample);
3// Output:
4// {
5//     "name": "John Doe",
6//     "age": 30
7// }

Dalam contoh ini, \n digunakan untuk baris baru dan \t digunakan untuk menambah inden. Ini menjadikan struktur JSON lebih mudah untuk dibaca.

Ringkasan

Aksara pelarian sangat penting apabila bekerja dengan rentetan dalam TypeScript. Apabila anda ingin memasukkan aksara khas atau aksara kawalan dalam rentetan, anda boleh mencipta rentetan ekspresif dengan menggunakan urutan pelarian yang sesuai. Memahami dan menggunakan aksara pelarian dengan betul boleh meningkatkan kebolehbacaan dan penyelenggaraan kod.

Versi TypeScript

Mari kita lihat gambaran umum versi TypeScript di sini.

  1. TypeScript 1.0 (2014)

    Versi stabil pertama bagi TypeScript. Ciri asas seperti jenis, kelas, dan modul telah diperkenalkan.

  2. TypeScript 2.0 (2016)

    Jenis Bukan-Null, Analisis Aliran Kawalan, Sifat Hanya-Baca, dan jenis Never telah diperkenalkan, meningkatkan inferens jenis.

  3. TypeScript 3.0 (2018)

    Sistem jenis yang lebih fleksibel diperkenalkan, dengan ciri seperti Rujukan Projek, lanjutan Jenis Tuple, dan penambahbaikan terhadap Parameter Rehat.

  4. TypeScript 4.0 (2020)

    Ciri seperti Jenis Tuple Variadi, penambahbaikan editor, inferens jenis yang ditingkatkan, dan Elemen Tuple Berlabel ditambahkan untuk meningkatkan pengalaman pembangunan.

  5. TypeScript 4.1 (2020)

    Jenis Literalis Templat diperkenalkan, menjadikan manipulasi jenis string lebih berkuasa.

  6. TypeScript 4.3 (2021)

    Penambahan kata kunci Override, peningkatan pada pengubah akses dalam konstruktor, dan sokongan jenis yang dipertingkatkan untuk WeakMap dan WeakSet.

  7. TypeScript 4.5 (2021)

    Jenis Awaited, ModuleSuffixes, dan keserasian yang dipertingkatkan dengan modul ECMAScript telah ditambah.

  8. TypeScript 5.0 (2023)

    Penyeragaman Decorators, peningkatan kelajuan binaan projek, peningkatan pada sistem jenis, dan sokongan untuk ciri-ciri ECMAScript terkini telah dilakukan.

TypeScript sentiasa berkembang, dengan pelbagai versi dikeluarkan setiap tahun yang memperkenalkan ciri-ciri dan penambahbaikan baharu.

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

YouTube Video

Jenis Data dalam TypeScript