Rumah > hujung hadapan web > tutorial js > 5 pengendali TypeScript praktikal untuk membantu anda meningkatkan keupayaan pembangunan anda!

5 pengendali TypeScript praktikal untuk membantu anda meningkatkan keupayaan pembangunan anda!

青灯夜游
Lepaskan: 2023-03-15 20:27:33
ke hadapan
1869 orang telah melayarinya

5 pengendali TypeScript praktikal untuk membantu anda meningkatkan keupayaan pembangunan anda!

Dalam siaran ini, saya akan menunjukkan kepada anda cara saya meningkatkan kemahiran saya dalam TypeScript. Saya akan memperkenalkan anda kepada 5 pengendali yang memuaskan yang akan membantu anda memahami TypeScript dengan lebih baik dan cara menggunakannya. Berikut ialah pengendali yang akan saya lindungi:

  • Operator Penegasan Bukan Nol

  • Operator Rantaian Pilihan

  • Pengendali penggabungan null

  • Penegasan jenis eksplisit

  • Penukaran jenis eksplisit

1. Pengendali penegasan bukan nol

Pengendali penegasan bukan nol ialah tanda seru mengekor (!), yang memberitahu TypeScript bahawa nilai ungkapan tidak akan menjadi null atau undefined. Ini mengelakkan ralat jenis kerana kemungkinan nilai null atau undefined. [Pembelajaran yang disyorkan: tutorial video javascript]

Contoh:

const element: HTMLElement | null = document.getElementById("my-element");
const width: number = element!.offsetWidth;
Salin selepas log masuk

Di sini, element mungkin null, tetapi kami menggunakan penegasan bukan nol operasi Simbol memberitahu TypeScript bahawa kita tahu nilai elemen bukan null, jadi tiada ralat jenis akan berlaku.

2. Operator rantaian pilihan

Pengendali rantaian pilihan (?.) membolehkan anda mengakses sifat objek tanpa perlu risau sama ada harta itu wujud. Jika atribut tidak wujud, undefined dikembalikan.

Contoh:

interface Person {
  name: string;
  address?: {
    city: string;
  };
}

const person: Person = {
  name: "John",
};

const city = person.address?.city;
Salin selepas log masuk

Di sini, atribut address adalah pilihan, jadi kami menggunakan operator rantaian pilihan untuk mengakses atribut city dengan selamat tanpa membuang Ralat berlaku.

3. Operator penggabungan null

Operator penggabungan nol (??) ialah cara ringkas untuk memberikan nilai lalai apabila nilai ungkapan Digunakan apabila ia ialah null atau undefined .

Contoh:

const value: number | null = null;
const defaultValue = 42;

const result = value ?? defaultValue;
Salin selepas log masuk

Di sini, apabila value ialah null , nilai result akan menjadi defaultValue.

4. Penegasan jenis eksplisit

Kadangkala, anda mungkin mahu menegaskan satu jenis kepada jenis lain secara eksplisit. Anda boleh menggunakan sintaks <Type> atau sintaks as Type untuk mencapai ini.

Contoh:

const input: unknown = "42";
const value: number = <number>(<string>input).length;
Salin selepas log masuk

atau:

const input: unknown = "42";
const value: number = (input as string).length;
Salin selepas log masuk

Di sini kita tegaskan unknown jenis input hingga string dan kemudian Penegasan panjangnya ialah number.

5. Penukaran jenis eksplisit

Dalam sesetengah kes, anda mungkin mahu menukar nilai daripada satu jenis kepada yang lain. Untuk melakukan ini, anda menggunakan pembina jenis.

Contoh:

const value: string = "42";
const numberValue: number = Number(value);
Salin selepas log masuk

Di sini kami menukar string jenis value kepada number jenis numberValue .

Memahami operator ini akan membantu anda memahami TypeScript dengan lebih baik dan meningkatkan kemahiran anda. Saya harap anda akan memanfaatkan operator ini untuk menambah baik pengaturcaraan TypeScript anda!

Pautan asal: https://dev.to/codeoz/how-i-improve-my-skills-in-typescript-5-satisfies-operator-2312

Untuk lebih banyak pengetahuan berkaitan pengaturcaraan, sila layari: Pengajaran Pengaturcaraan! !

Atas ialah kandungan terperinci 5 pengendali TypeScript praktikal untuk membantu anda meningkatkan keupayaan pembangunan anda!. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Label berkaitan:
sumber:juejin.cn
Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan