Konsep skrip taip Lanjutan Teratas yang Perlu Tahu Setiap Pembangun

TypeScript ialah bahasa pengaturcaraan moden yang sering diutamakan berbanding JavaScript untuk keselamatan jenis tambahannya. Dalam artikel ini, saya akan berkongsi 10 konsep TypeScript teratas yang akan membantu mempertajam kemahiran pengaturcaraan TypeScript anda. Adakah anda bersedia? Jom.

1.Generik : Menggunakan generik kita boleh mencipta jenis boleh guna semula, yang akan membantu dalam menangani data hari ini serta data hari esok.
Contoh Generik:
Kami mungkin mahukan fungsi dalam Typescript yang mengambil hujah sebagai beberapa jenis dan kami mungkin mahu mengembalikan jenis yang sama.

function func<T>(args:T):T{
    return args;
}

2.Generik dengan Kekangan Jenis : Sekarang mari kita hadkan jenis T dengan mentakrifkannya untuk menerima rentetan dan integer sahaja:

function func<T extends string | number>(value: T): T {
    return value;
}

const stringValue = func("Hello"); // Works, T is string
const numberValue = func(42);      // Works, T is number

// const booleanValue = func(true); // Error: Type 'boolean' is not assignable to type 'string | number'

3.Antara Muka Generik:
Generik antara muka berguna apabila anda ingin menentukan kontrak (bentuk) untuk objek, kelas atau fungsi yang berfungsi dengan pelbagai jenis. Ia membolehkan anda menentukan pelan tindakan yang boleh menyesuaikan diri dengan jenis data yang berbeza sambil mengekalkan struktur yang konsisten.

// Generic interface with type parameters T and U
interface Repository<T, U> {
    items: T[];           // Array of items of type T
    add(item: T): void;   // Function to add an item of type T
    getById(id: U): T | undefined; // Function to get an item by ID of type U
}

// Implementing the Repository interface for a User entity
interface User {
    id: number;
    name: string;
}

class UserRepository implements Repository<User, number> {
    items: User[] = [];

    add(item: User): void {
        this.items.push(item);
    }

     getById(idOrName: number | string): User | undefined {
        if (typeof idOrName === 'string') {
            // Search by name if idOrName is a string
            console.log('Searching by name:', idOrName);
            return this.items.find(user => user.name === idOrName);
        } else if (typeof idOrName === 'number') {
            // Search by id if idOrName is a number
            console.log('Searching by id:', idOrName);
            return this.items.find(user => user.id === idOrName);
        }
        return undefined; // Return undefined if no match found
    }
}

// Usage
const userRepo = new UserRepository();
userRepo.add({ id: 1, name: "Alice" });
userRepo.add({ id: 2, name: "Bob" });

const user1 = userRepo.getById(1);
const user2 = userRepo.getById("Bob");
console.log(user1); // Output: { id: 1, name: "Alice" }
console.log(user2); // Output: { id: 2, name: "Bob" }

4.Kelas Generik:: Gunakan ini apabila anda mahu semua sifat dalam kelas anda mematuhi jenis yang ditentukan oleh parameter generik. Ini membolehkan fleksibiliti sambil memastikan setiap sifat kelas sepadan dengan jenis yang dihantar kepada kelas.

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

class UserDetails<T extends User> {
    id: T['id'];
    name: T['name'];
    age: T['age'];

    constructor(user: T) {
        this.id = user.id;
        this.name = user.name;
        this.age = user.age;
    }

    // Method to get user details
    getUserDetails(): string {
        return `User: ${this.name}, ID: ${this.id}, Age: ${this.age}`;
    }

    // Method to update user name
    updateName(newName: string): void {
        this.name = newName;
    }

    // Method to update user age
    updateAge(newAge: number): void {
        this.age = newAge;
    }
}

// Using the UserDetails class with a User type
const user: User = { id: 1, name: "Alice", age: 30 };
const userDetails = new UserDetails(user);

console.log(userDetails.getUserDetails());  // Output: "User: Alice, ID: 1, Age: 30"

// Updating user details
userDetails.updateName("Bob");
userDetails.updateAge(35);

console.log(userDetails.getUserDetails());  // Output: "User: Bob, ID: 1, Age: 35"
console.log(new UserDetails("30"));  // Error: "This will throw error" 

5. Mengekang Parameter Jenis kepada Jenis yang Dilalui: Ada kalanya, kami mahu jenis parameter bergantung pada beberapa parameter lulus lain. Kedengarannya mengelirukan, mari lihat contoh di bawah.

function getProperty<Type>(obj: Type, key: keyof Type) {
  return obj[key];
}

let x = { a: 1, b: 2, c: 3 };
getProperty(x, "a");  // Valid
getProperty(x, "d");  // Error: Argument of type '"d"' is not assignable to parameter of type '"a" | "b" | "c"'.

6.Jenis Bersyarat : Selalunya, kita mahu jenis kita sama ada satu jenis atau yang lain. Dalam situasi sedemikian, kami menggunakan jenis bersyarat.
Contoh mudah ialah:

function func(param:number|boolean){
return param;
}
console.log(func(2)) //Output: 2 will be printed
console.log(func("True")) //Error: boolean cannot be passed as argument

Contoh yang agak kompleks:

type HasProperty<T, K extends keyof T> = K extends "age" ? "Has Age" : "Has Name";

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

let test1: HasProperty<User, "age">;  // "Has Age"
let test2: HasProperty<User, "name">; // "Has Name"
let test3: HasProperty<User, "email">; // Error: Type '"email"' is not assignable to parameter of type '"age" | "name"'.

6.Jenis Persimpangan: Jenis ini berguna apabila kita ingin menggabungkan berbilang jenis menjadi satu, membenarkan jenis tertentu mewarisi sifat dan tingkah laku daripada pelbagai jenis lain.
Mari lihat contoh menarik untuk ini:

// Defining the types for each area of well-being

interface MentalWellness {
  mindfulnessPractice: boolean;
  stressLevel: number; // Scale of 1 to 10
}

interface PhysicalWellness {
  exerciseFrequency: string; // e.g., "daily", "weekly"
  sleepDuration: number; // in hours
}

interface Productivity {
  tasksCompleted: number;
  focusLevel: number; // Scale of 1 to 10
}

// Combining all three areas into a single type using intersection types
type HealthyBody = MentalWellness & PhysicalWellness & Productivity;

// Example of a person with a balanced healthy body
const person: HealthyBody = {
  mindfulnessPractice: true,
  stressLevel: 4,
  exerciseFrequency: "daily",
  sleepDuration: 7,
  tasksCompleted: 15,
  focusLevel: 8
};

// Displaying the information
console.log(person);

Kata kunci 7.infer: Kata kunci infer berguna apabila kita ingin menentukan jenis tertentu secara bersyarat dan apabila syarat itu dipenuhi, ia membolehkan kita mengekstrak subjenis daripada jenis tersebut.
Ini ialah sintaks umum:

type ConditionalType<T> = T extends SomeType ? InferredType : OtherType;

Contoh untuk ini:

type ReturnTypeOfPromise<T> = T extends Promise<infer U> ? U : number;

type Result = ReturnTypeOfPromise<Promise<string>>;  // Result is 'string'
type ErrorResult = ReturnTypeOfPromise<number>;      // ErrorResult is 'never'

const result: Result = "Hello";
console.log(typeof result); // Output: 'string'

8.Type Variance : Konsep ini membincangkan bagaimana subjenis dan supertype berkaitan antara satu sama lain.
Ini ada dua jenis:
Kovarian: Subjenis boleh digunakan di mana superjenis dijangkakan.
Mari lihat contoh untuk ini:

function func<T>(args:T):T{
    return args;
}

Dalam contoh di atas, Kereta telah mewarisi sifat daripada kelas Kenderaan, jadi adalah sah untuk menetapkannya kepada subjenis yang superjenis dijangka kerana subjenis akan mempunyai semua sifat yang dimiliki oleh superjenis.
Kontravarian: Ini bertentangan dengan kovarians. Kami menggunakan superjenis di tempat yang dijangkakan subJenis.

function func<T extends string | number>(value: T): T {
    return value;
}

const stringValue = func("Hello"); // Works, T is string
const numberValue = func(42);      // Works, T is number

// const booleanValue = func(true); // Error: Type 'boolean' is not assignable to type 'string | number'

Apabila menggunakan kontravarians, kita perlu berhati-hati untuk tidak mengakses sifat atau kaedah yang khusus untuk subjenis, kerana ini boleh mengakibatkan ralat.

9. Refleksi: Konsep ini melibatkan penentuan jenis pembolehubah pada masa jalan. Walaupun TypeScript memberi tumpuan terutamanya pada pemeriksaan jenis pada masa penyusunan, kami masih boleh memanfaatkan operator TypeScript untuk memeriksa jenis semasa masa jalan.
operator typeof : Kita boleh menggunakan operator typeof untuk mencari jenis pembolehubah pada masa jalan

// Generic interface with type parameters T and U
interface Repository<T, U> {
    items: T[];           // Array of items of type T
    add(item: T): void;   // Function to add an item of type T
    getById(id: U): T | undefined; // Function to get an item by ID of type U
}

// Implementing the Repository interface for a User entity
interface User {
    id: number;
    name: string;
}

class UserRepository implements Repository<User, number> {
    items: User[] = [];

    add(item: User): void {
        this.items.push(item);
    }

     getById(idOrName: number | string): User | undefined {
        if (typeof idOrName === 'string') {
            // Search by name if idOrName is a string
            console.log('Searching by name:', idOrName);
            return this.items.find(user => user.name === idOrName);
        } else if (typeof idOrName === 'number') {
            // Search by id if idOrName is a number
            console.log('Searching by id:', idOrName);
            return this.items.find(user => user.id === idOrName);
        }
        return undefined; // Return undefined if no match found
    }
}

// Usage
const userRepo = new UserRepository();
userRepo.add({ id: 1, name: "Alice" });
userRepo.add({ id: 2, name: "Bob" });

const user1 = userRepo.getById(1);
const user2 = userRepo.getById("Bob");
console.log(user1); // Output: { id: 1, name: "Alice" }
console.log(user2); // Output: { id: 2, name: "Bob" }

instanceof Operator: Instanceof Operator boleh digunakan untuk menyemak sama ada objek ialah tika kelas atau jenis tertentu.

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

class UserDetails<T extends User> {
    id: T['id'];
    name: T['name'];
    age: T['age'];

    constructor(user: T) {
        this.id = user.id;
        this.name = user.name;
        this.age = user.age;
    }

    // Method to get user details
    getUserDetails(): string {
        return `User: ${this.name}, ID: ${this.id}, Age: ${this.age}`;
    }

    // Method to update user name
    updateName(newName: string): void {
        this.name = newName;
    }

    // Method to update user age
    updateAge(newAge: number): void {
        this.age = newAge;
    }
}

// Using the UserDetails class with a User type
const user: User = { id: 1, name: "Alice", age: 30 };
const userDetails = new UserDetails(user);

console.log(userDetails.getUserDetails());  // Output: "User: Alice, ID: 1, Age: 30"

// Updating user details
userDetails.updateName("Bob");
userDetails.updateAge(35);

console.log(userDetails.getUserDetails());  // Output: "User: Bob, ID: 1, Age: 35"
console.log(new UserDetails("30"));  // Error: "This will throw error" 

Kami boleh menggunakan pustaka pihak ketiga untuk menentukan jenis pada masa jalan.

10. Suntikan Ketergantungan: Suntikan Ketergantungan ialah corak yang membolehkan anda membawa kod ke dalam komponen anda tanpa benar-benar mencipta atau mengurusnya di sana. Walaupun ia kelihatan seperti menggunakan pustaka, ia berbeza kerana anda tidak perlu memasang atau mengimportnya melalui CDN atau API.

Pada pandangan pertama, ia mungkin kelihatan sama seperti menggunakan fungsi untuk kebolehgunaan semula, kerana kedua-duanya membenarkan penggunaan semula kod. Walau bagaimanapun, jika kita menggunakan fungsi secara langsung dalam komponen kita, ia boleh menyebabkan gandingan yang ketat antara mereka. Ini bermakna sebarang perubahan dalam fungsi atau logiknya boleh memberi kesan kepada setiap tempat ia digunakan.

Suntikan Kebergantungan menyelesaikan masalah ini dengan menyahganding penciptaan kebergantungan daripada komponen yang menggunakannya, menjadikan kod lebih boleh diselenggara dan boleh diuji.

Contoh tanpa suntikan pergantungan

function getProperty<Type>(obj: Type, key: keyof Type) {
  return obj[key];
}

let x = { a: 1, b: 2, c: 3 };
getProperty(x, "a");  // Valid
getProperty(x, "d");  // Error: Argument of type '"d"' is not assignable to parameter of type '"a" | "b" | "c"'.

Contoh dengan Suntikan Ketergantungan

function func(param:number|boolean){
return param;
}
console.log(func(2)) //Output: 2 will be printed
console.log(func("True")) //Error: boolean cannot be passed as argument

Dalam senario yang berganding rapat, jika anda mempunyai atribut StresLevel dalam kelas MentalWellness hari ini dan memutuskan untuk menukarnya kepada sesuatu yang lain esok, anda perlu mengemas kini semua tempat di mana ia digunakan. Ini boleh membawa kepada banyak cabaran pemfaktoran semula dan penyelenggaraan.

Namun, dengan suntikan pergantungan dan penggunaan antara muka, anda boleh mengelakkan masalah ini. Dengan menghantar kebergantungan (seperti perkhidmatan MentalWellness) melalui pembina, butiran pelaksanaan khusus (seperti atribut stressLevel) diabstraksikan di belakang antara muka. Ini bermakna perubahan pada atribut atau kelas tidak memerlukan pengubahsuaian dalam kelas bergantung, selagi antara muka kekal sama. Pendekatan ini memastikan bahawa kod digandingkan secara longgar, lebih boleh diselenggara dan lebih mudah untuk diuji, kerana anda menyuntik perkara yang diperlukan pada masa jalan tanpa menggabungkan komponen dengan ketat.

Atas ialah kandungan terperinci Konsep skrip taip Lanjutan Teratas yang Perlu Tahu Setiap Pembangun. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!