TypeScript memiliki hubungan yang tidak biasa dengan JavaScript. TypeScript menawarkan semua fitur JavaScript, dan lapisan tambahan di atasnya. Sistem tipe TypeScript
Misalnya, JavaScript menyediakan primitif bahasa seperti
ts
const user = {
name: "Hayes",
id: 0,
};
Try6 dants
const user = {
name: "Hayes",
id: 0,
};
Try7, tetapi tidak memeriksa apakah Anda telah menetapkan ini secara konsisten. TypeScript melakukannyaIni berarti bahwa kode JavaScript Anda yang berfungsi saat ini juga merupakan kode TypeScript. Manfaat utama TypeScript adalah dapat menyoroti perilaku tak terduga dalam kode Anda, menurunkan kemungkinan bug
Tutorial ini memberikan gambaran singkat tentang TypeScript, dengan fokus pada sistem tipenya
Jenis berdasarkan Inferensi
TypeScript mengetahui bahasa JavaScript dan akan menghasilkan tipe untuk Anda dalam banyak kasus. Misalnya dalam membuat variabel dan menugaskannya ke nilai tertentu, TypeScript akan menggunakan nilai tersebut sebagai tipenya
ts
let helloWorld = "Hello World";
let helloWorld: string
TryDengan memahami cara kerja JavaScript, TypeScript dapat membangun sistem tipe yang menerima kode JavaScript tetapi memiliki tipe. Ini menawarkan sistem tipe tanpa perlu menambahkan karakter tambahan untuk membuat tipe eksplisit dalam kode Anda. Begitulah cara TypeScript mengetahui bahwa
ts
const user = {
name: "Hayes",
id: 0,
};
Try8 adalahts
const user = {
name: "Hayes",
id: 0,
};
Try6 dalam contoh di atasAnda mungkin telah menulis JavaScript dalam Visual Studio Code, dan memiliki pelengkapan otomatis editor. Kode Visual Studio menggunakan TypeScript di bawah tenda untuk membuatnya lebih mudah bekerja dengan JavaScript
Mendefinisikan Jenis
Anda dapat menggunakan berbagai pola desain dalam JavaScript. Namun, beberapa pola desain mempersulit jenis untuk disimpulkan secara otomatis (misalnya, pola yang menggunakan pemrograman dinamis). Untuk mengatasi kasus ini, TypeScript mendukung ekstensi bahasa JavaScript, yang menawarkan tempat bagi Anda untuk memberi tahu TypeScript apa jenisnya.
Misalnya, untuk membuat objek dengan tipe kesimpulan yang mencakup
ts
interface User {
name: string;
id: number;
}
Try0 dants
interface User {
name: string;
id: number;
}
Try1, Anda dapat menulists
const user = {
name: "Hayes",
id: 0,
};
TryAnda dapat secara eksplisit mendeskripsikan bentuk objek ini menggunakan deklarasi
ts
interface User {
name: string;
id: number;
}
Try2ts
interface User {
name: string;
id: number;
}
TryAnda kemudian dapat mendeklarasikan bahwa objek JavaScript sesuai dengan bentuk
ts
interface User {
name: string;
id: number;
}
Try2 baru Anda dengan menggunakan sintaks sepertits
interface User {
name: string;
id: number;
}
Try4 setelah deklarasi variabelts
const user: User = {
name: "Hayes",
id: 0,
};
TryJika Anda memberikan objek yang tidak cocok dengan antarmuka yang Anda berikan, TypeScript akan memperingatkan Anda
ts
interface User {
name: string;
id: number;
}
const user: User = {
username: "Hayes",
Type '{ username: string; id: number; }' is not assignable to type 'User'. Object literal may only specify known properties, and 'username' does not exist in type 'User'.2322Type '{ username: string; id: number; }' is not assignable to type 'User'. Object literal may only specify known properties, and 'username' does not exist in type 'User'.id: 0,
};
TryKarena JavaScript mendukung kelas dan pemrograman berorientasi objek, TypeScript juga mendukung. Anda dapat menggunakan deklarasi antarmuka dengan kelas
ts
interface User {
name: string;
id: number;
}
class UserAccount {
name: string;
id: number;
constructor(name: string, id: number) {
this.name = name;
this.id = id;
}
}
const user: User = new UserAccount("Murphy", 1);
TryAnda dapat menggunakan antarmuka untuk menganotasi parameter dan mengembalikan nilai ke fungsi
ts
function getAdminUser(): User {
//...
}
function deleteUser(user: User) {
// ...
}
TrySudah ada sekumpulan kecil tipe primitif yang tersedia di JavaScript.
ts
interface User {
name: string;
id: number;
}
Try5,ts
interface User {
name: string;
id: number;
}
Try6,ts
interface User {
name: string;
id: number;
}
Try7,ts
const user = {
name: "Hayes",
id: 0,
};
Try7,ts
const user = {
name: "Hayes",
id: 0,
};
Try6,ts
const user: User = {
name: "Hayes",
id: 0,
};
Try0, dants
const user: User = {
name: "Hayes",
id: 0,
};
Try1, yang dapat Anda gunakan di antarmuka. TypeScript memperluas daftar ini dengan beberapa lagi, sepertits
const user: User = {
name: "Hayes",
id: 0,
};
Try2 (mengizinkan apa pun), (memastikan seseorang yang menggunakan tipe ini menyatakan apa tipenya), (tidak mungkin tipe ini bisa terjadi), dants
const user: User = {
name: "Hayes",
id: 0,
};
Try5 (fungsi yang mengembalikants
const user: User = {
name: "Hayes",
id: 0,
};
Try1 atauAnda akan melihat bahwa ada dua sintaks untuk tipe bangunan. . Anda harus memilih
ts
interface User {
name: string;
id: number;
}
Try2. Gunakants
const user: User = {
name: "Hayes",
id: 0,
};
Try_8 saat Anda membutuhkan fitur tertentuJenis Penulisan
Dengan TypeScript, Anda dapat membuat tipe kompleks dengan menggabungkan yang sederhana. Ada dua cara populer untuk melakukannya. dengan serikat pekerja, dan dengan obat generik
Serikat pekerja
Dengan serikat pekerja, Anda dapat mendeklarasikan bahwa suatu tipe bisa menjadi salah satu dari banyak tipe. Misalnya, Anda dapat mendeskripsikan tipe
ts
interface User {
name: string;
id: number;
}
Try_5 sebagaits
interface User {
name: string;
id: number;
}
const user: User = {
username: "Hayes",
Type '{ username: string; id: number; }' is not assignable to type 'User'. Object literal may only specify known properties, and 'username' does not exist in type 'User'.2322Type '{ username: string; id: number; }' is not assignable to type 'User'. Object literal may only specify known properties, and 'username' does not exist in type 'User'.id: 0,
};
Try0 atauts
interface User {
name: string;
id: number;
}
const user: User = {
username: "Hayes",
Type '{ username: string; id: number; }' is not assignable to type 'User'. Object literal may only specify known properties, and 'username' does not exist in type 'User'.2322Type '{ username: string; id: number; }' is not assignable to type 'User'. Object literal may only specify known properties, and 'username' does not exist in type 'User'.id: 0,
};
Try1ts
type MyBool = true | false;
TryCatatan. Jika Anda mengarahkan kursor ke
ts
interface User {
name: string;
id: number;
}
const user: User = {
username: "Hayes",
Type '{ username: string; id: number; }' is not assignable to type 'User'. Object literal may only specify known properties, and 'username' does not exist in type 'User'.2322Type '{ username: string; id: number; }' is not assignable to type 'User'. Object literal may only specify known properties, and 'username' does not exist in type 'User'.id: 0,
};
Try2 di atas, Anda akan melihat bahwa itu digolongkan sebagaits
interface User {
name: string;
id: number;
}
Try5. Itu adalah properti dari Sistem Tipe Struktural. Lebih lanjut tentang ini di bawah iniKasus penggunaan yang populer untuk jenis gabungan adalah untuk mendeskripsikan himpunan
ts
const user = {
name: "Hayes",
id: 0,
};
Try6 atauts
const user = {
name: "Hayes",
id: 0,
};
Try7 yang boleh menjadi nilaits
type WindowStates = "open" | "closed" | "minimized";
type LockStates = "locked" | "unlocked";
type PositiveOddNumbersUnderTen = 1 | 3 | 5 | 7 | 9;
TrySerikat pekerja juga menyediakan cara untuk menangani jenis yang berbeda. Misalnya, Anda mungkin memiliki fungsi yang menggunakan
ts
interface User {
name: string;
id: number;
}
const user: User = {
username: "Hayes",
Type '{ username: string; id: number; }' is not assignable to type 'User'. Object literal may only specify known properties, and 'username' does not exist in type 'User'.2322Type '{ username: string; id: number; }' is not assignable to type 'User'. Object literal may only specify known properties, and 'username' does not exist in type 'User'.id: 0,
};
Try6 atauts
const user = {
name: "Hayes",
id: 0,
};
Try6ts
function getLength(obj: string | string[]) {
return obj.length;
}
TryUntuk mempelajari jenis variabel, gunakan ________13______8
TypePredicatestringts
interface User {
name: string;
id: number;
}
const user: User = {
username: "Hayes",
Type '{ username: string; id: number; }' is not assignable to type 'User'. Object literal may only specify known properties, and 'username' does not exist in type 'User'.2322Type '{ username: string; id: number; }' is not assignable to type 'User'. Object literal may only specify known properties, and 'username' does not exist in type 'User'.id: 0,
};
Try9numberts
interface User {
name: string;
id: number;
}
class UserAccount {
name: string;
id: number;
constructor(name: string, id: number) {
this.name = name;
this.id = id;
}
}
const user: User = new UserAccount("Murphy", 1);
Try0booleants
interface User {
name: string;
id: number;
}
class UserAccount {
name: string;
id: number;
constructor(name: string, id: number) {
this.name = name;
this.id = id;
}
}
const user: User = new UserAccount("Murphy", 1);
Try1undefinedts
interface User {
name: string;
id: number;
}
class UserAccount {
name: string;
id: number;
constructor(name: string, id: number) {
this.name = name;
this.id = id;
}
}
const user: User = new UserAccount("Murphy", 1);
Try2functionts
interface User {
name: string;
id: number;
}
class UserAccount {
name: string;
id: number;
constructor(name: string, id: number) {
this.name = name;
this.id = id;
}
}
const user: User = new UserAccount("Murphy", 1);
Try3arrayts
interface User {
name: string;
id: number;
}
class UserAccount {
name: string;
id: number;
constructor(name: string, id: number) {
this.name = name;
this.id = id;
}
}
const user: User = new UserAccount("Murphy", 1);
Try4Misalnya, Anda dapat membuat suatu fungsi mengembalikan nilai yang berbeda bergantung pada apakah fungsi tersebut meneruskan string atau larik
ts
const user = {
name: "Hayes",
id: 0,
};
Try0Generik
Generik menyediakan variabel untuk tipe. Contoh umum adalah array. Array tanpa obat generik dapat berisi apa saja. Array dengan generik dapat menggambarkan nilai-nilai yang berisi array
ts
const user = {
name: "Hayes",
id: 0,
};
Try_1Anda dapat mendeklarasikan tipe Anda sendiri yang menggunakan obat generik
ts
const user = {
name: "Hayes",
id: 0,
};
Try_2Sistem Tipe Struktural
Salah satu prinsip inti TypeScript adalah pemeriksaan tipe berfokus pada bentuk yang dimiliki nilai. Ini terkadang disebut "pengetikan bebek" atau "pengetikan struktural"
Dalam sistem tipe struktural, jika dua objek memiliki bentuk yang sama, mereka dianggap memiliki tipe yang sama
ts
const user = {
name: "Hayes",
id: 0,
};
Try_3Variabel
ts
interface User {
name: string;
id: number;
}
class UserAccount {
name: string;
id: number;
constructor(name: string, id: number) {
this.name = name;
this.id = id;
}
}
const user: User = new UserAccount("Murphy", 1);
Try_5 tidak pernah dinyatakan sebagai tipets
interface User {
name: string;
id: number;
}
class UserAccount {
name: string;
id: number;
constructor(name: string, id: number) {
this.name = name;
this.id = id;
}
}
const user: User = new UserAccount("Murphy", 1);
Try6. Namun, TypeScript membandingkan bentukts
interface User {
name: string;
id: number;
}
class UserAccount {
name: string;
id: number;
constructor(name: string, id: number) {
this.name = name;
this.id = id;
}
}
const user: User = new UserAccount("Murphy", 1);
Try5 dengan bentukts
interface User {
name: string;
id: number;
}
class UserAccount {
name: string;
id: number;
constructor(name: string, id: number) {
this.name = name;
this.id = id;
}
}
const user: User = new UserAccount("Murphy", 1);
Try6 dalam pemeriksaan tipe. Mereka memiliki bentuk yang sama, sehingga kodenya lolosPencocokan bentuk hanya membutuhkan subset bidang objek untuk dicocokkan
ts
const user = {
name: "Hayes",
id: 0,
};
Try_4Tidak ada perbedaan antara bagaimana kelas dan objek menyesuaikan diri dengan bentuk
ts
const user = {
name: "Hayes",
id: 0,
};
Try5Jika objek atau kelas memiliki semua properti yang diperlukan, TypeScript akan mengatakan mereka cocok, terlepas dari detail implementasinya