3 نکته کاربردی TypeScript برای Angular

در اینجا، سه نکته را میبینید که من نظر من در هنگام کار با TypeScript بسیار کاربردی بودند:

1. از بین بردن نیاز به import کردن رابط ها
2. اختیاری کردن تمام ویژگی (Property) های رابط
3. جلوگیری از نشان دادن خطا ها

گرچه این نکات را در حال کار با برنامه Angular کشف کردم، اما تمام نکات لزوما درباره Angular نیستند، بلکه درباره TyperScript نیز هستند.

جدول محتویات:

1. از بین بردن نیاز به import کردن رابط ها
2. اختیاری کردن تمام ویژگی (Property) های رابط
3. جلوگیری از نشان دادن خطا ها
4. خلاصه

از بین بردن نیاز به import کردن رابط ها

من از رابط ها خوشم میاید. گرچه، دوست ندارم هر بار آنها را import کنم. با این که Visual Studio Code قابلیت import خودکار را دارد، نمی خواهم سورس کدم با چندین خط import شلوغ شود.

این کاریست که به طور معمول انجام می دهیم:

// api.model.ts
export interface Customer {
    id: number;
    name: string;
}

export interface User {
    id: number;
    isActive: boolean;
}

// using the interfaces
import { Customer, User } from './api.model'; // this line will grow longer if there's more interfaces used

export class MyComponent {
    cust: Customer; 
}

راه حل 1: استفاده از namespace

با استفاده از namespace، دیگر مجبور نیستیم فایل های رابط را import کنیم.

// api.model.ts
namespace ApiModel {
    export interface Customer {
        id: number;
        name: string;
    }

    export interface User {
        id: number;
        isActive: boolean;
    }
}

// using the interfaces
export class MyComponent {
    cust: ApiModel.Customer; 
}

استفاده از namespace همچنین در سازمان دهی و رابط های گروهی به شما کمک می کند. دقت کنید که می توانید namespace را میان چند فایل تقسیم کنید.

فرض کنید فایل دیگری به نام api.v2.model.ts دارید. رابط های جدیدی را وارد می کنید، اما می خواهید namespace مشابه را استفاده کنید.

// api.v2.model.ts
namespace ApiModel {
    export interface Order {
        id: number;
        total: number;
    }
}

قطعا می توانید این کار را انجام دهید. برای استفاده از رابط جدید، فقط مثل مثال قبلی از آن استفاده کنید.

// using the interfaces with same namespaces but different files
export class MyComponent {
    cust: ApiModel.Customer; 
    order: ApiModel.Order;
}

راه حل 2: استفاده از d file

راه دیگر برای عدم نیاز به import ساخت یک فایل typescript جدید با فرمت .d.ts است. «d» به معنای Declaration فایل در TypeScript است.

// using the interfaces with same namespaces but different files
export class MyComponent {
    cust: ApiModel.Customer; 
    order: ApiModel.Order;
}

آن را به طور معمول و بدون نیاز به import استفاده کنید.

// using the interfaces of d file
export class MyComponent {
    cust: Customer; 
}

من راه حل 1 را به 2 ترجیح می دهم، زیرا:

1. d file معمولا به صورت خارجی استفاده می شود.
2. namespace به ما کمک می کند تا فایل ها را بهتر سازمان دهی کنیم.

اختیاری کردن تمام ویژگی (Property) های رابط

استفاده از یک رابط برای CRUD، کاملا رایج است. فرض کنید که یک رابط مشتری دارید. در طی ساخت تمام فیلد ها اجباری هستند، اما در طی به روز رسانی تمام فیلد ها اختیاری هستند. آیا برای رسیدگی به این سناریو نیاز به دو رابط دارید؟

در اینجا رابط را مشاهده می کنید:

// api.model.ts
export interface Customer {
    id: number;
    name: string;
    age: number;
}

راه حل: از Partial استفاده کنید

Partial یک type است، که برای تبدیل ویژگی ها به یک آبجکت اختیاری استفاده می شود. تعریف آن در فایل پیشفرض d file یعنی lib.es5.d.ts وجود دارد.

// lib.es5.d.ts
type Partial<T> = {
    [P in keyof T]?: T[P];
};

چگونه می توانیم از آن استفاده کنیم؟ از کد زیر استفاده کنید.

// using the interface but make all fields optional
import { Customer } from './api.model';

export class MyComponent {
    cust: Partial<Customer>;  /

    ngOninit() {
        this.cust = { name: 'jane' }; // no error throw because all fields are optional
    }
}

اگر تعریف Partial را پیدا نمی کنید، باید یک d file را خودتان بسازید و کد بالا را در آن قرار دهید.

جلوگیری از نشان دادن خطا ها

به محض این که یک توسعه دهنده JavaScript تبدیل به یک توسعه دهنده TypeScript می شود، شاید به نظرش نشان دادن خطا ها در TypeScript آزار دهنده باشد. در بعضی مواقع، می خواهید به TypeScript بگویید: «هی، من می دانم چه می کنم، انقدر به من گیر نده!»

راه حل: از کامنت @ts-ignore استفاده کنید

پس از نسخه 2.6، می توانید این کار را با استفاده از کامنت @ts-ignore انجام دهید.

برای مثال، TypeScript خطای Unreachable code detected را برای این کد نشان می دهد:

if (false) {
    console.log('x');
}

می توانید با استفاده از کامنت @ts-ignore از آن جلوگیری کنید.

if (false) {
    // @ts-ignore
    console.log('x');
}

گرچه، پیشنهاد می کنم همیشه قبل از نادیده گرفتن خطا، آن را تصحیح کنید.

خلاصه:

TypeScript برای کد شما خوب است و سندنگاری های خوبی هم دارد. هرچه بیشتر با TypeScript کار می کنم، بیشتر از آن خوشم میاید.

منبع