باید ها و نباید های تایپ اسکریپت [TypeScript]

رسانیکامنبع: https://rasanika.com

Number ، String ، Boolean ، Symbol و Object

// !این کار را نکنید
function reverse(s: String): String;

// اوکی
function reverse(s: string): string;

جنریک ها

به مثال زیر توجه کنید:

interface Named<T> {
  name: string;
}
class MyNamed<T> implements Named<T> {
  name: 'mine';
}
function findByName<T>(x: Named<T>): T {
  // ...
}

var x: MyNamed<string>;
var y = findByName(x); // y: {} !رشته نیست

در مثال بالا انتظار داشتیم نوع خروجی تابع findByName رشته باشد (بخاطر MyNamed<string> ) ولی در واقع {} است چون پارامتر نوع T استفاده نشده است.

اگر مثال را به این صورت تغییر دهیم خروجی تابع چیزی که انتظار داشتیم می شود:

interface Named<T> {
  name: string;
  value: T; // <-- استفاده کردیم
}
class MyNamed<T> implements Named<T> {
  name: 'mine';
  value: T; // <-- استفاده کردیم
}
function findByName<T>(x: Named<T>): T {
  // ...
}

var x: MyNamed<string>;
var y = findByName(x); // y: string درست شد

any

نوع any موقع مهاجرت و بازنویسی یک پروژه از جاوا اسکریپت به تایپ اسکریپت می تواند کمک کند تا به مرور زمان این بازنویسی انجام شود و فعلا کامپایلر به کد جاوا اسکریپت کاری نداشته باشد.

نوع خروجی کال بک

// !این کار را نکنید
function fn(x: () => any) {
  x();
}

// اوکی
function fn(x: () => void) {
  x();
}

function fn(x: () => void) {
  const k = x();
  k.doSomething(); // تایپ اسکریپت اخطار می دهد
}

پارامتر های اختیاری در کال‌بک

// !این کار را نکنید
interface Fetcher {
  getObject(done: (data: unknown, elapsedTime?: number) => void): void;
}

نیازی به اختیاری کردن نیست، در جاوا اسکریپت همیشه می توانیم یک کال‌بک با پارامتر های کمتر را بجای یک کال‌بک با پارامتر های بیشتر استفاده کنیم. با اختیاری کردن فقط باعث می شویم کاربر (استفاده کننده) مجبور شود وجود آن پارامتر را همیشه چک کند.

// اوکی
interface Fetcher {
  getObject(done: (data: unknown, elapsedTime: number) => void): void;
}

اورلود و کال بک

// !این کار را نکنید
// (فقط تعداد پارامتر های کال بک action فرق می کند)
declare function beforeAll(action: () => void, timeout?: number): void;
declare function beforeAll(
  action: (done: DoneFn) => void,
  timeout?: number
): void;

// اوکی
declare function beforeAll(
  action: (done: DoneFn) => void,
  timeout?: number
): void;

ترتیب اورلود ها

// !این کار را نکنید
declare function fn(x: unknown): unknown;
declare function fn(x: HTMLElement): number;
declare function fn(x: HTMLDivElement): string;

var myElem: HTMLDivElement;
var x = fn(myElem); // x: unknown  :(

// اوکی
declare function fn(x: HTMLDivElement): string;
declare function fn(x: HTMLElement): number;
declare function fn(x: unknown): unknown;

var myElem: HTMLDivElement;
var x = fn(myElem); // x: string  :)

پارامتر های اختیاری بجای اورلود

// !این کار را نکنید
interface Example {
  diff(one: string): number;
  diff(one: string, two: string): number;
  diff(one: string, two: string, three: boolean): number;
}

// اوکی
interface Example {
  diff(one: string, two?: string, three?: boolean): number;
}

نوع union به جای اورلود

// !این کار را نکنید
interface Moment {
  utcOffset(): number;
  utcOffset(b: number): Moment;
  utcOffset(b: string): Moment;
}

// اوکی
interface Moment {
  utcOffset(): number;
  utcOffset(b: number | string): Moment;
}

قدم بعدی

در ادامه می توانید مقالات دیگر سری آموزشی تایپ اسکریپت را مطالعه کنید و آموزش های پروژه محور مرتبط با تایپ اسکریپت را بررسی کنید. برای یادگیری بهتر، علاوه بر مطالعه و تحقیق، سعی کنید تمرینات پروژه محور هم انجام دهید. برای تست سریع کد تایپ اسکریپت در مرورگر از TS Playground استفاده کنید.