Rumah > hujung hadapan web > tutorial js > Perjalanan untuk Belajar Skrip Taip.

Perjalanan untuk Belajar Skrip Taip.

Susan Sarandon
Lepaskan: 2024-11-08 16:13:02
asal
869 orang telah melayarinya

A Journey to Learn Typescript.Hai semua, saya baru-baru ini memulakan perjalanan TypeScript saya dan telah membuat kemajuan melalui kursus pembangunan web lanjutan Wira Pengaturcaraan. Saya mempunyai beberapa pengetahuan asas tentang TypeScript tetapi tidak menerokainya secara mendalam. Kursus saya bermula dengan mendalami TypeScript. Seminggu telah berlalu, dan saya telah mencapai kemajuan yang ketara dalam pembelajaran saya. Berikut ialah gambaran ringkas tentang konsep utama yang saya fahami.

TypeScript adalah seperti JavaScript, tetapi dengan kuasa besar!

TypeScript ialah superset JavaScript yang menambahkan penaipan statik pilihan pada bahasa. Ini bermakna anda boleh mengisytiharkan jenis pembolehubah, parameter fungsi dan nilai pulangan, yang boleh membantu menangkap kemungkinan ralat pada awal proses pembangunan.
Faedah Menggunakan TypeScript

  • Pengesanan Ralat Awal
  • Kebolehbacaan Kod yang Dipertingkat
  • Kebolehpercayaan Kod Dipertingkat
  • Pelengkapan Kod dan IntelliSense yang Lebih Baik
  • Sokongan Projek Berskala Besar

Jenis data primitif dan bukan primitif

Jenis data primitif mewakili nilai tunggal dan disimpan terus dalam ingatan. berikut ialah beberapa jenis data primitif yang digunakan dalam skrip taip

  • rentetan
  • nombor
  • boolean
  • tidak ditentukan
  • null
let name : string = "Kishor";
let age : number = 27;
let isDeveloper: boolen = true;
let x : null = null;
let y: undefined = undefined;
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

seperti yang anda lihat dalam contoh untuk menetapkan jenis kepada pembolehubah anda perlu menggunakan simbol bertindih ( : ) selepas mentakrifkan nama pembolehubah dan kemudian jenisnya.

Jenis data bukan Primitif, juga dikenali sebagai jenis rujukan, mewakili struktur data yang kompleks dan disimpan sebagai rujukan kepada lokasi memori. TypeScript menyokong jenis data bukan primitif berikut:

  • Objek
  • Susun atur
  • tuple
  • fungsi
let Person: {name: string, age : number} = {name: "kishor", age: 27}; //object
let numbers: number[] = [1,2,3,4];
let fruits: string[]= ["apple", "pineapple", "banana"];
let tuple: [string, number, boolean] = ["xyz", 123, true];
function greet(name: string) : any {
  return `hello ${name}`
}
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

Taip Alias

Alias ​​jenis dalam TypeScript ialah cara untuk memberikan nama baharu kepada jenis sedia ada. Ini boleh menjadikan kod anda lebih mudah dibaca dan diselenggara, terutamanya apabila berurusan dengan jenis yang kompleks.

// Defining a type alias for a person object
type Person = {
  name: string;
  age: number;
};
// Using the type alias
const person1: Person = {
  name: "Alice",
  age: 30
};
Salin selepas log masuk
Salin selepas log masuk

Dalam contoh ini, Orang ialah alias jenis yang mewakili objek dengan sifat nama dan umur.
Jenis Kesatuan dan Persimpangan dalam TypeScript
Jenis kesatuan mewakili nilai yang boleh menjadi salah satu daripada beberapa jenis. Ia ditakrifkan menggunakan | pengendali.
Jenis persimpangan menggabungkan berbilang jenis menjadi satu jenis. Ia ditakrifkan menggunakan & operator.

type StringOrNumber = string | number; //Union type
let value: StringOrNumber = "hello";
value = 42;
type Person = {
    name: string;
    age: number;
};
type Address = {
    street: string;
    city: string;
};
type PersonWithAddress = Person & Address;//Intersection type
const personWithAddress: PersonWithAddress = {
    name: "Alice",
    age: 30,
    street: "123 Main St",
    city: "Anytown"
};
Salin selepas log masuk
Salin selepas log masuk

tidak pernah, tidak diketahui

Jenis tidak pernah mewakili nilai yang tidak pernah berlaku.
Jenis yang tidak diketahui mewakili sebarang nilai. Ia lebih selamat daripada mana-mana jenis kerana anda mesti melakukan semakan atau penegasan jenis sebelum menggunakan nilai jenis yang tidak diketahui.

let name : string = "Kishor";
let age : number = 27;
let isDeveloper: boolen = true;
let x : null = null;
let y: undefined = undefined;
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

Taip Penegasan

Jenis penegasan ialah satu cara untuk memberitahu pengkompil TypeScript bahawa anda lebih tahu tentang sesuatu jenis daripada yang diketahuinya. Ini adalah cara untuk menyatakan secara eksplisit jenis pembolehubah

let Person: {name: string, age : number} = {name: "kishor", age: 27}; //object
let numbers: number[] = [1,2,3,4];
let fruits: string[]= ["apple", "pineapple", "banana"];
let tuple: [string, number, boolean] = ["xyz", 123, true];
function greet(name: string) : any {
  return `hello ${name}`
}
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

Jenis pengawal

Pengadang jenis membolehkan anda mengecilkan jenis pembolehubah berdasarkan syarat tertentu. Dengan menyemak jenis pembolehubah sebelum mengakses sifat atau kaedahnya, anda boleh mengelakkan kemungkinan ralat masa jalan.

  • typeofOperator
  • instanceof Operator
// Defining a type alias for a person object
type Person = {
  name: string;
  age: number;
};
// Using the type alias
const person1: Person = {
  name: "Alice",
  age: 30
};
Salin selepas log masuk
Salin selepas log masuk

Antara muka dalam TypeScript

Antara muka dalam TypeScript ialah pelan tindakan untuk mencipta objek dengan sifat tertentu.

type StringOrNumber = string | number; //Union type
let value: StringOrNumber = "hello";
value = 42;
type Person = {
    name: string;
    age: number;
};
type Address = {
    street: string;
    city: string;
};
type PersonWithAddress = Person & Address;//Intersection type
const personWithAddress: PersonWithAddress = {
    name: "Alice",
    age: 30,
    street: "123 Main St",
    city: "Anytown"
};
Salin selepas log masuk
Salin selepas log masuk

Dalam contoh ini, antara muka Orang mentakrifkan bahawa objek seseorang mesti mempunyai sifat firstName, LastName dan umur. Apabila mencipta objek person1

Generik dalam TypeScript

Generik ialah ciri berkuasa dalam TypeScript yang membolehkan anda mencipta komponen boleh guna semula yang boleh berfungsi dengan jenis data yang berbeza.

function error(message: string): never {
    throw new Error(message);
} //the return type is never because there is no data returned.
let value: unknown = "hello";
if (typeof value === "string") {
  let strLength: number = value.length;
}
Salin selepas log masuk

Dalam contoh ini, T ialah parameter jenis. Ia mewakili pemegang tempat untuk sebarang jenis. Apabila anda memanggil fungsi identiti, anda boleh menghantar sebarang jenis hujah dan fungsi itu akan mengembalikan jenis yang sama.

Kekangan dalam TypeScript

Dalam TypeScript, kekangan generik membolehkan anda menggunakan pengehadan pada jenis yang boleh dihantar sebagai argumen kepada fungsi generik atau digunakan sebagai parameter jenis dalam kelas atau antara muka generik.

let value: unknown = "hello";
let strLength: number = (value as string).length;
Salin selepas log masuk

di sini kata kunci lanjutan digunakan untuk mengekang data

Pengendali Keyof

Operator keyof dalam TypeScript digunakan untuk mendapatkan jenis kesatuan semua nama sifat sesuatu jenis objek. Ini amat berguna apabila bekerja dengan jenis generik dan jenis dipetakan.

//typeof
function printValue(value: unknown) {
    if (typeof value === "string") {
        console.log(value.toUpperCase());
    } else if (typeof value === "number") {
        console.log(value.toFixed(2));   
    }
}
//instanceof
function printDate(date: unknown) {
    if (date instanceof Date) {
        console.log(date.toISOString());
    }
}
Salin selepas log masuk

Jenis utiliti

Pick: Pilih sifat khusus daripada T

interface Person {
  firstName: string;
  lastName: string;
  age: number;
}
const person1: Person = {
  firstName: "Alice",
  lastName: "Johnson",
  age: 30
};
Salin selepas log masuk

Abaikan: Abaikan sifat khusus daripada T

function identity<T>(arg: T): T {
  return arg;
}
identity<string>(string);
Salin selepas log masuk

Separa: Menjadikan semua sifat T sebagai pilihan.

interface Person {
    name: string;
    age: number;
}
function identity<T extends Person>(arg: T): T {
  return arg;
}
const result  = identity<Person>({
    name: "aa";
    age: 12;
});
Salin selepas log masuk

yang lain suka,
Diperlukan
Baca sahaja
Rekod

Kelas dalam TypeScript

Dalam TypeScript, kelas ditakrifkan menggunakan kata kunci kelas.

interface Person {
  name: string;
  age: number;
}
type PersonKeys = keyof Person; // Type: "name" | "age"
Salin selepas log masuk

Akses Pengubahsuai dalam TypeScript

awam Keterlihatan lalai ahli kelas adalah awam. Ahli awam boleh diakses di mana-mana
ahli yang dilindungi hanya kelihatan kepada subkelas kelas yang diisytiharkan masuk.
Ahli persendirian hanya boleh diakses dalam kelas.

Ahli Statik dalam TypeScript

Ahli statik dalam TypeScript ialah ahli (sifat dan kaedah) yang dimiliki oleh kelas itu sendiri, bukannya kepada kejadian individu kelas.

let name : string = "Kishor";
let age : number = 27;
let isDeveloper: boolen = true;
let x : null = null;
let y: undefined = undefined;
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

Pelaksanaan dalam TypeScript

Dalam TypeScript, antara muka mentakrifkan kontrak untuk kelas dilaksanakan. Kelas yang melaksanakan antara muka mesti mempunyai semua sifat dan kaedah yang diisytiharkan dalam antara muka. Kata kunci implement digunakan

let Person: {name: string, age : number} = {name: "kishor", age: 27}; //object
let numbers: number[] = [1,2,3,4];
let fruits: string[]= ["apple", "pineapple", "banana"];
let tuple: [string, number, boolean] = ["xyz", 123, true];
function greet(name: string) : any {
  return `hello ${name}`
}
Salin selepas log masuk
Salin selepas log masuk
Salin selepas log masuk

Kesimpulan:

Itu adalah beberapa kes penggunaan asas Skrip Taip yang saya pelajari minggu ini. Saya telah mempelajari banyak perkara yang menarik, tetapi masih banyak lagi yang perlu ditemui. TypeScript sentiasa berkembang, jadi saya cuba mengikuti keluaran dan ciri terkini dan mengikuti dokumentasi rasmi dan blog TypeScript untuk berita terkini dan amalan terbaik. 
Terima kasih kerana mengikuti perjalanan saya.

Atas ialah kandungan terperinci Perjalanan untuk Belajar Skrip Taip.. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

sumber:dev.to
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
Artikel terbaru oleh pengarang
Tutorial Popular
Lagi>
Muat turun terkini
Lagi>
kesan web
Kod sumber laman web
Bahan laman web
Templat hujung hadapan