Asas Jenis Literal Templat
Bina jenis rentetan daripada kesatuan dan ruang letak.
Asas Jenis Literal Templat ialah pelajaran TypeScript Academy percuma di CoddyKit. Ini ialah pelajaran 1 daripada 4. Anda boleh membaca keseluruhan pelajaran di bawah secara percuma — kemudian berlatih secara praktikal dalam pelayar menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7. Pelajaran ini merupakan sebahagian daripada laluan pembelajaran TypeScript Academy, dan kemajuan anda disegerakkan merentas web serta aplikasi CoddyKit. Kursus TypeScript Academy merangkumi sejumlah 4 pelajaran.
Rentetan pada Peringkat Jenis
Jenis literal templat membina jenis literal rentetan baharu dengan menggabungkan jenis rentetan lain. Jenis ini menggunakan sintaks tanda petik belakang dan ruang letak yang sama seperti rentetan templat masa jalan, tetapi beroperasi sepenuhnya pada jenis.
Jenis Literal Templat Mudah
Bayangkan alias jenis Greeting yang ditakrifkan sebagai literal templat yang mengandungi teks Hello, diikuti ruang letak untuk jenis Name. Jika Name ialah literal 'Ada', maka Greeting ialah jenis literal 'Hello, Ada'.
type Name = "Ada"
// type Greeting = template literal: Hello, then Name
// Greeting is the string literal type "Hello, Ada"
const g: "Hello, Ada" = "Hello, Ada"
console.log(g)Ruang Letak Membenamkan Jenis Lain
Di dalam ruang letak, anda boleh meletakkan sebarang jenis seperti rentetan: literal, parameter jenis, atau kesatuan. TypeScript menggantikannya ke dalam teks sekeliling untuk membentuk jenis literal baharu.
type World = "World"
// A template literal type with text Hello, and placeholder World
// yields the literal "Hello, World"
const hw: "Hello, World" = "Hello, World"
console.log(hw)Penggabungan Kesatuan Menggandakan Varian
Apabila ruang letak mengandungi kesatuan, templat dikembangkan merentasi setiap ahli. Templat yang menggabungkan 'a' | 'b' dengan akhiran tetap menghasilkan kesatuan bagi setiap gabungan.
type Side = "left" | "right"
// template: Side followed by -margin
// expands to "left-margin" | "right-margin"
const m: "left-margin" | "right-margin" = "left-margin"
console.log(m)Beberapa Ruang Letak Berganda Bersama
Dua ruang letak kesatuan membentuk hasil darab silang. Menggabungkan saiz 'sm' | 'lg' dengan warna 'red' | 'blue' melalui pemisah menghasilkan empat jenis literal.
type Size = "sm" | "lg"
type Color = "red" | "blue"
// template Size-Color expands to 4 combinations
const c: "sm-red" | "sm-blue" | "lg-red" | "lg-blue" = "lg-blue"
console.log(c)Mengapa Ini Berguna
Jenis literal templat membolehkan anda menerangkan keluarga rentetan dengan tepat — nama kelas CSS, nama peristiwa dan laluan penghalaan — supaya pengkompil menolak rentetan yang tidak sah sebelum masa jalan.
type Prefix = "btn"
type Variant = "primary" | "ghost"
// template Prefix--Variant => "btn--primary" | "btn--ghost"
const cls: "btn--primary" | "btn--ghost" = "btn--primary"
console.log(cls)Nombor dan Boolean Ditukar
Jenis bukan rentetan yang diletakkan dalam jenis literal templat ditukar kepada bentuk rentetannya. Literal nombor 42 menjadi teks 42 dalam jenis rentetan yang terhasil.
type Id = 42
// template id- followed by Id => "id-42"
const x: "id-42" = "id-42"
console.log(x)Menggunakan Ruang Letak Generik
Fungsi generik boleh membina jenis pulangan literal templat daripada jenis literal argumennya, jadi rentetan tepat diketahui pada setiap tempat panggilan.
function prefixed<T extends string>(s: T) {
return ("app-" + s) as "app-" extends string ? string : never
}
console.log(prefixed("home")) // app-homeMengehadkan Input
Anda boleh mewajibkan sesuatu nilai sepadan dengan jenis literal templat. Hanya rentetan yang mengikut corak yang diterangkan akan diterima, sekali gus mengesan kesilapan ejaan semasa kompilasi.
type Pixel = "left" | "right"
function setSide(s: Pixel) { return s }
console.log(setSide("left"))
// setSide("top") // Error: not assignablestring Luas Memecahkan Corak
Jika ruang letak ialah jenis string yang umum dan bukannya literal, seluruh templat runtuh menjadi string. Kekhususan memerlukan input literal, selalunya melalui as const.
const dynamic: string = "anything"
// a template using dynamic yields just string, not a precise literal
const result: string = "prefix-" + dynamic
console.log(result)Tempat untuk Menggunakannya
Jenis literal templat sesuai digunakan apabila rentetan mengikut struktur tertentu: kelas utiliti CSS, pengecam berawalan, kunci pertanyaan dan nama peristiwa. Jenis ini menukar konvensyen rentetan menjadi kontrak yang disemak pengkompil.
type Theme = "light" | "dark"
// template theme- followed by Theme => "theme-light" | "theme-dark"
const t: "theme-light" | "theme-dark" = "theme-dark"
console.log(t)Semakan Pantas
Uji pemahaman anda tentang asas jenis literal templat.
Ringkasan
Jenis literal templat membina jenis literal rentetan dengan menggantikan ruang letak ke dalam teks sekeliling. Ruang letak kesatuan berkembang menjadi setiap gabungan, manakala beberapa kesatuan membentuk hasil darab silang. Literal bukan rentetan ditukar kepada bentuk teksnya. Ruang letak string yang umum meruntuhkan hasil menjadi string, jadi input literal, selalunya melalui as const, diperlukan untuk mendapatkan jenis yang tepat. Jenis ini menjadikan konvensyen rentetan disemak oleh pengkompil.
Pelajari TypeScript dengan tutor kecerdasan buatan — percuma
Tulis dan jalankan kod sebenar dalam pelayar anda, dapatkan bantuan segera daripada tutor kecerdasan buatan yang tersedia 24/7, dan sambung semula dari tempat anda berhenti di web atau dalam aplikasi.
- Kursus
- 101
- Pelajaran
- 352
Soalan Lazim
Adakah pelajaran “Asas Jenis Literal Templat” percuma?
Ya — teks penuh “Asas Jenis Literal Templat” boleh dibaca secara percuma di web ini. Untuk berlatih secara interaktif menggunakan penyunting kod terbina dalam dan tutor kecerdasan buatan 24/7, serta membuka kunci baki kursus TypeScript Academy, tingkat taraf kepada CoddyKit PRO. Kursus TypeScript Academy merangkumi sejumlah 4 pelajaran.
Apakah yang akan saya pelajari dalam “Asas Jenis Literal Templat”?
Bina jenis rentetan daripada kesatuan dan ruang letak. Anda berlatih TypeScript Academy menggunakan kod praktikal yang dijalankan terus dalam pelayar, manakala tutor kecerdasan buatan 24/7 menjawab soalan anda semasa anda mengikuti pelajaran.
Adakah saya memerlukan pengalaman untuk memulakan TypeScript Academy?
Tiada pengalaman terdahulu diperlukan. Pembelajaran TypeScript Academy di CoddyKit disusun untuk pelajar daripada peringkat pemula hingga lanjutan, jadi anda boleh bermula di sini atau dari awal dan belajar mengikut kadar anda sendiri. Ini ialah pelajaran 1 daripada 4.
Berapa lamakah pelajaran “Asas Jenis Literal Templat” diambil?
Kebanyakan pelajaran CoddyKit mengambil masa kira-kira 5–10 minit. Setiap pelajaran ringkas dan interaktif, jadi anda boleh membuat kemajuan secara berterusan dan menyambung tepat dari tempat anda berhenti di web atau aplikasi.
Bolehkah saya menulis dan menjalankan kod dalam pelajaran TypeScript Academy ini?
Ya. Setiap pelajaran TypeScript Academy menyertakan penyunting kod terbina dalam, jadi anda boleh menulis dan menjalankan kod sebenar terus dalam pelayar serta menerima maklum balas kecerdasan buatan serta-merta — tanpa memerlukan persediaan setempat.
Semua pelajaran dalam kursus ini
- Asas Jenis Literal Templat
- Memodelkan Rentetan Berstruktur
- Kesatuan Rentetan dan Autolengkap
- Jenis Manipulasi Rentetan Intrinsik