Konsep TypeScript lanjutan Setiap Pembangun Perlu Tahu

TypeScript ialah superset JavaScript yang berkuasa yang menambahkan penaipan statik dan ciri lain untuk meningkatkan pengalaman pembangunan. Walaupun ramai pembangun sudah biasa dengan asas, menguasai konsep TypeScript lanjutan boleh meningkatkan keupayaan anda untuk menulis kod yang mantap, boleh diselenggara dan berskala dengan ketara. Berikut ialah 10 konsep TypeScript lanjutan yang perlu diketahui oleh setiap pembangun.

1. Jenis Kesatuan

Jenis kesatuan membenarkan pembolehubah untuk memegang salah satu daripada beberapa jenis, memberikan anda fleksibiliti untuk mengendalikan jenis data yang berbeza sambil tetap memastikan sesuatu jenis selamat. Ia seperti mempunyai pelbagai alat ?️ yang boleh mengendalikan tugas yang berbeza.

Example 1:

let value: string | number;

value = "Hello";
console.log(value); // "Hello"

value = 123;
console.log(value); // 123


Example 2:
type status = "review" | "published" | "expired";

function getJobStatus(status: status): string {
  switch (status) {
    case "review":
      return "Job is on Review";
    case "published":
      return "Job is Published";
    case "expired":
      return "Job is Expired";
    default:
      return "Unknown status";
  }
}

2. Jenis Persimpangan

Jenis persimpangan menggabungkan berbilang jenis menjadi satu, memerlukan pembolehubah mempunyai semua sifat jenis gabungan.

interface Person {
  name: string;
  age: number;
}

interface Employee {
  employeeId: number;
}

type Developer = Person & Employee;

const emp: Developer = {
  name: "Alice",
  age: 25,
  employeeId: 12345
};

console.log(emp);

Dalam contoh ini, kami telah menentukan dua jenis, Orang dan Pekerja, dan kemudian menggunakan persimpangan untuk mencipta jenis Pembangun yang menggabungkan kedua-dua sifat Pekerja dan Orang. Ini mewakili identiti dan peranan pembangun dalam organisasi.

3. Jenis Pengawal

Pelindung jenis membantu anda mengecilkan jenis pembolehubah dalam blok bersyarat, memastikan keselamatan jenis. Fikirkan mereka sebagai penjaga keselamatan? di kelab malam, biarkan hanya jenis yang sesuai.

Contoh

function isString(value: any): value is string {
  return typeof value === "string";
}

function printValue(value: string | number) {
  if (isString(value)) {
    console.log(value.toUpperCase());
  } else {
    console.log(value.toFixed());
  }
}

printValue("Hello"); // "HELLO"
printValue(123); // "123"

Jenis pengawal: kerana kita semua memerlukan sedikit keselamatan dalam hidup kita.

4. Jenis Bersyarat

Jenis bersyarat membolehkan anda mencipta jenis berdasarkan syarat, menawarkan transformasi jenis yang berkuasa. Ia seperti buku pengembaraan pilih-anda-sendiri ?.

Contoh

type IsString<T> = T extends string ? "Yes" : "No";

type Result1 = IsString<string>; // "Yes"
type Result2 = IsString<number>; // "No"

Jenis bersyarat adalah sangat berkuasa, membolehkan anda mencipta jenis dinamik dan fleksibel berdasarkan syarat.

5. Jenis Dipetakan

Jenis yang dipetakan membolehkan anda mengubah jenis sedia ada kepada yang baharu dengan menggunakan transformasi pada setiap sifat.

Contoh

type Readonly<T> = {
  readonly [P in keyof T]: T[P];
};

interface Todo {
  title: string;
  description: string;
}

const todo: Readonly<Todo> = {
  title: "Learn TypeScript",
  description: "Study advanced concepts"
};

// todo.title = "New Title"; // Error: Cannot assign to 'title' because it is a read-only property.


type Nullable<T> = {
  [P in keyof T]: T[P] | null;
};

interface User {
  id: number;
  name: string;
  email: string;
}

type NullableUser = Nullable<User>;

type NullableUser = {
  id: number | null;
  name: string | null;
  email: string | null;
};

// In this example, Nullable transforms each property of User to also accept null.

6. Jenis Tersurat Templat

Jenis literal templat membolehkan anda membuat jenis dengan menggabungkan literal rentetan, menjadikan definisi jenis anda lebih ekspresif.

Contoh

type Color = "red" | "green" | "blue";
type Brightness = "light" | "dark";

type Theme = `${Brightness}-${Color}`;

const theme1: Theme = "light-red";
const theme2: Theme = "dark-blue";

// const theme3: Theme = "bright-yellow"; // Error: Type '"bright-yellow"' is not assignable to type 'Theme'.

Jenis literal templat membolehkan anda menentukan jenis Tema yang mesti mengikut corak Warna Kecerahan. Ia seperti memberi jenis anda panduan gaya untuk diikuti.

7. Jenis Rekursif

Jenis rekursif ialah jenis yang merujuk kepada diri mereka sendiri, membolehkan anda memodelkan struktur data yang kompleks seperti pepohon dan senarai terpaut.

Contoh

Mencipta jenis rekursif untuk struktur pokok:

interface TreeNode {
  value: number;
  left?: TreeNode;
  right?: TreeNode;
}

const tree: TreeNode = {
  value: 1,
  left: {
    value: 2,
    left: { value: 3 },
    right: { value: 4 }
  },
  right: {
    value: 5
  }
};

Jenis rekursif: kerana kadangkala anda memerlukan jenis yang berterusan selama-lamanya, seperti gelung tak terhingga (tetapi dengan cara yang baik).

Kesimpulan

TypeScript ialah alat yang berkuasa dan menguasai konsep lanjutan ini boleh menjadikan kod anda lebih teguh, boleh diselenggara dan sangat hebat. Semasa anda terus meneroka ciri lanjutan ini, anda akan mendapati bahawa kod anda menjadi lebih ringkas, definisi jenis anda lebih tepat dan aliran kerja pembangunan keseluruhan anda lebih lancar.

Sumber Tambahan

• Dokumentasi TypeScript
• Repositori GitHub TypeScript

Selamat pengekodan! ?

Atas ialah kandungan terperinci Konsep TypeScript lanjutan Setiap Pembangun Perlu Tahu. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!