Articles
Pengenalan ke TypeScript
Dasar-dasar TypeScript

Dasar-dasar TypeScript

Artikel ini menjelaskan dasar-dasar dari TypeScript.

YouTube Video

Menjalankan "Hello World!"

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

npm install -g typescript

Pasang typescript menggunakan perintah npm.

Buat file tsconfig.json.

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

Buat file .vscode/launch.json untuk memungkinkan menjalankan file main.ts di 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}

Buat file main.ts yang menampilkan "Hello World!". Anda dapat menjalankannya di Visual Studio Code dengan menekan tombol F5.

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

Dengan mengonfigurasi dengan cara ini, Anda dapat menjalankan file TypeScript di dalam VSCode.

Gambaran Umum TypeScript

TypeScript (TS) adalah superset dari JavaScript yang dikembangkan oleh Microsoft. TypeScript mendukung pengetikan statis, memungkinkan kode yang lebih kuat dan terjaga.

Pengetikan Statis

  • TypeScript menambahkan tipe pada JavaScript dan melakukan pemeriksaan tipe saat waktu kompilasi. Ini memungkinkan untuk mencegah bug yang terkait dengan tipe sejak awal.
1let message: string = "Hello, TypeScript";
2console.log(message);

Kompilasi

  • Karena TypeScript tidak bisa dijalankan langsung di browser, maka perlu diubah (dikompilasi) menjadi JavaScript. Gunakan tsc (TypeScript Compiler) untuk mengonversi file TS menjadi file JS.

Anotasi Tipe Opsional

  • TypeScript juga melakukan penafsiran tipe tetapi memungkinkan Anda untuk secara eksplisit menentukan tipe jika diperlukan. Ini meningkatkan keterbacaan dan keandalan kode.
1function greet(name: string): string {
2    return `Hello, ${name}`;
3}
4console.log(greet('John'));

Antarmuka

  • TypeScript menyediakan interface untuk mendefinisikan bentuk dari objek. Ini memungkinkan pengelolaan 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 ekstensi ke sintaks kelas JavaScript dan mendukung 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 dapat menulis kode yang dapat digunakan kembali dan aman dengan menggunakan generik.
1function identity<T>(arg: T): T {
2    return arg;
3}
4console.log(identity<string>("Hello Generics"));

Ekosistem

  • TypeScript sepenuhnya kompatibel dengan ekosistem JavaScript dan dapat menggunakan kode JavaScript yang ada apa adanya. Selain itu, TypeScript terintegrasi dengan pustaka populer seperti React dan Node.js.

Alat Pengembang yang Kuat

  • TypeScript menawarkan fitur-fitur canggih seperti melengkapi otomatis, dukungan refactoring, dan pemeriksaan kesalahan di editor seperti VSCode.

TypeScript sangat berguna untuk meningkatkan keandalan dan produktivitas pengembang dalam proyek besar.

Variabel dalam TypeScript

Ini menjelaskan konsep dasar dan penggunaan variabel dalam TypeScript.

Deklarasi Variabel

Dalam TypeScript, variabel dideklarasikan menggunakan tiga kata kunci: let, const, dan var. Setiap kata kunci memiliki karakteristik yang berbeda.

Contoh penggunaan let:

let memiliki cakupan blok (hanya berlaku di dalam kurung kurawal {}). Nilai dapat diubah nanti.

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

Contoh penggunaan const:

const tidak dapat diubah nilainya, sehingga nilai yang telah ditetapkan sekali tidak dapat diubah. Namun, isi dari objek dan array dapat dimodifikasi.

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 penggunaan var:

var memiliki cakupan fungsi dan dapat diubah nilainya. Namun, jika mengabaikan cakupan blok, ini dapat menyebabkan perilaku yang tidak terduga dibandingkan 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 Tipe

Dalam TypeScript, Anda dapat secara eksplisit memberikan anotasi tipe untuk variabel. Inferensi tipe juga didukung, tetapi anotasi tipe berguna dalam skenario yang kompleks.

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

Variabel yang Tidak Diinisialisasi

Jika sebuah variabel dideklarasikan tanpa inisialisasi, undefined akan diberikan secara default. Variabel yang dideklarasikan dengan let harus secara eksplisit diberikan nilai undefined atau menyertakan undefined dalam tipenya jika tidak diinisialisasi.

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

Cakupan Variabel

let dan const memiliki cakupan blok, jadi hanya berlaku di 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 Variabel (Hoisting)

Karena TypeScript adalah superset dari JavaScript, ia mewarisi fitur hoisting JavaScript. Hoisting mengacu pada perilaku di mana deklarasi variabel dan fungsi diperlakukan seolah-olah diangkat ke bagian atas cakupan mereka. Namun, hanya deklarasi yang diangkat, sedangkan inisialisasi tetap di tempatnya. Variabel yang dideklarasikan dengan var diangkat, tetapi menggunakan let atau const sebelum deklarasi akan menghasilkan kesalahan.

1console.log(a); // undefined
2var a = 10;
3console.log(a); // 10
  • Dalam kasus ini, variabel yang dideklarasikan dengan var diangkat, dan nilai mereka ditampilkan.
1console.log(b); // ReferenceError
2let b = 20;
  • Variabel yang dideklarasikan dengan let tidak diangkat, yang menghasilkan kesalahan.

Ringkasan

Berikut adalah ringkasan tentang let, const, dan var.

  • let dapat diubah nilainya dan memiliki cakupan blok.
  • const tidak dapat diubah nilainya dan memiliki cakupan blok.
  • var dapat diubah nilainya dan memiliki cakupan fungsi.
  • Semua mendukung anotasi tipe eksplisit untuk menentukan tipe variabel.

Karakter Escape di TypeScript

Karakter escape digunakan ketika karakter tertentu tidak dapat dimasukkan secara langsung atau untuk merepresentasikan karakter yang memiliki arti khusus dalam sebuah string. Di TypeScript, karakter escape digunakan untuk merepresentasikan karakter kontrol atau karakter khusus.

Misalnya, gunakan \n untuk mencetak pesan yang menyertakan baris baru (newline).

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

Melarikan Karakter Khusus

Karakter escape juga berguna saat menyertakan karakter khusus dalam sebuah string. Contohnya, Anda mungkin ingin menggunakan tanda kutip ganda atau tanda kutip tunggal secara langsung dalam sebuah string.

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 Tanda Garis Miring Mundur Itu Sendiri

Untuk menyertakan tanda garis miring mundur dalam sebuah string, Anda perlu menuliskannya sebagai garis miring mundur ganda.

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

Unicode dan Melarikan Hexadesimal

Di TypeScript, titik kode Unicode dapat direpresentasikan menggunakan urutan escape.

Urutan Escape Unicode

Anda dapat merepresentasikan karakter Unicode dengan menentukan nomor hexadecimal empat digit setelah \u.

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

Melarikan Hexadesimal

Anda dapat merepresentasikan karakter tertentu menggunakan nomor hexadecimal dua digit setelah \x.

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

Template Literals dan Escape

Template literal didefinisikan dengan menutupnya menggunakan tanda backtick dan menyediakan cara yang mudah untuk membuat ekspresi tertanam atau string multi-baris. Karakter escape biasa dapat digunakan langsung dalam template literals.

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

Kasus Khusus

Di TypeScript, menggunakan urutan escape yang tidak valid dalam sebuah string dapat menyebabkan kesalahan sintaksis. Oleh karena itu, penting untuk memeriksa apakah karakter escape tersebut valid.

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

Contoh Penggunaan Praktis

Berikut contoh membangun string kompleks menggunakan karakter escape.

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 (newline) dan \t digunakan untuk menambahkan indentasi. Ini membuat struktur JSON lebih mudah dibaca.

Ringkasan

Karakter pelarian sangat penting ketika bekerja dengan string dalam TypeScript. Ketika Anda ingin menyertakan karakter khusus atau karakter kontrol dalam sebuah string, Anda dapat membuat string yang ekspresif dengan menggunakan urutan pelarian yang sesuai. Memahami dan menggunakan karakter pelarian dengan benar dapat meningkatkan keterbacaan dan pemeliharaan kode.

Versi TypeScript

Mari kita lihat gambaran umum versi TypeScript di sini.

  1. TypeScript 1.0 (2014)

    Versi stabil pertama dari TypeScript. Fitur dasar seperti pengetikan, kelas, dan modul diperkenalkan.

  2. TypeScript 2.0 (2016)

    Non-nullable Types, Control Flow Analysis, Read-only Properties, dan tipe Never diperkenalkan, meningkatkan inferensi tipe.

  3. TypeScript 3.0 (2018)

    Sistem tipe yang lebih fleksibel diperkenalkan, dengan fitur seperti Project References, perluasan Tuple Types, dan peningkatan pada Rest Parameters.

  4. TypeScript 4.0 (2020)

    Fitur seperti Variadic Tuple Types, peningkatan editor, peningkatan inferensi tipe, dan Labelled Tuple Elements ditambahkan untuk meningkatkan pengalaman pengembangan.

  5. TypeScript 4.1 (2020)

    Template Literal Types diperkenalkan, membuat manipulasi tipe string menjadi lebih kuat.

  6. TypeScript 4.3 (2021)

    Penambahan kata kunci Override, peningkatan pengakses modifier dalam konstruktor, dan dukungan tipe yang lebih baik untuk WeakMap dan WeakSet.

  7. TypeScript 4.5 (2021)

    Tipe Awaited, ModuleSuffixes, dan kompatibilitas yang lebih baik dengan modul ECMAScript telah ditambahkan.

  8. TypeScript 5.0 (2023)

    Standarisasi Decorators, peningkatan kecepatan pembangunan proyek, peningkatan sistem tipe, dan dukungan untuk fitur terbaru ECMAScript telah dilakukan.

TypeScript terus berkembang, dengan beberapa versi dirilis setiap tahun yang memperkenalkan fitur baru dan peningkatan.

Anda dapat mengikuti artikel di atas menggunakan Visual Studio Code di saluran YouTube kami. Silakan periksa juga saluran YouTube kami.

YouTube Video

Tipe Data di TypeScript