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

1-از بین بردن نیاز به import کردن اینترفیس ها 

2-ساخت تمام خصوصیات رابط کاربری اختیاری است

3-به من error نده ، من میدانم دارم چه کاری انجام میدهم

_این نکات مختص Angular نیستند بلکه برای typescript هستند.

دیگر نیازی به import کردن اینترفیس ها نیست

من Interface ها را دوست دارم . هر چند علاقه ای ندارم هردفعه آن ها را import کنم . اگر چه VS Code ویژگی Auto-import  را دارد ولی من علاقه ای به این که سورس فایلم بوسیله ی چندین خط import کثیف و نا مرتب شود ندارم . (فقط برای رسیدن به هدف Stong typing)

این کاری است که ما بصورت عادی انجام میدهیم

// 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; 
}

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

با استفاده از namespace ، ما میتوانیم نیاز به ایمپورت کردن فایل های اینترفیس را از بین ببریم

// 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.ts باشد) ، میباشد. “d”برای نشان دادن فایل در Typescript است

// api.model.d.ts
// you don't need to export the interface in d file
interface Customer {
    id: number;
    name: string;
}

از آن بصورت عادی استفاده کنید بدون آنکه نیاز به import کردن داشته بشید

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

 راه حل 1 را بیش از راه حل 2 توصیه می کنیم چون:

D file- معمولا برای اعلام فایل خارجی 3rd party استفاده میشود

Namespace- به ما اجازه میدهد بهتر فایل ها را سازمان دهی کنیم

ساخت تمام خصوصیات رابط کاربری اختیاری است

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

این اینترفیس مورد نظر است.

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

راه حل :استفاده از partial

Partial یک نوعی است که برای اختیاری کردن خواص یک شی از آن استفاده میکنیم . این نوع بصورت پیش فرض در d fil ، lib.es5.d.ts اینکلود شده است(included)

// 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 بسازید (برای مثال util.d.ts) و کد بالا را در آن کپی کنید.

به من error نده ، من میدانم دارم چه کاری انجام میدهم

برای توسعه دهنده typescript ، ممکن است به این که گاهی خطاهای typescript گمراه کنده و آزاردهنده است ، پی برده باشید . بعضی مواقع باید به typescript بگوید “میدونم دارم چیکار میکنم دست از سرم بردار”

راه حل : استفاده از @ts-ignore

از Typescript نسخه 2.6 به بعد، می توانید این کار را با استفاده از کامنت @ts-ignore برای سرکوب و جلوگیری از خطا انجام دهید.

برای مثال ، typescript یک خطای "Unreachable code detected" رابرای کد زیر تولید میکند.

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

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

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

البته ، همیشه بهتر است خطا ها را حل کنید تا این که از آن صرف نظر کنید.