هنگامی که می‌خواهیم یک تایپ آرایه در تایپ اسکریپت تعریف کنیم می‌توانیم از دو روش استفاده نماییم: Array<T>و یا T[]. در این مقاله قصد داریم تا این دو روش را باهم مقایسه کنیم.

مقایسه از نظر عملکرد

در این موقعیت‌ها توسعه‌دهندگان استدلال سینتکسی را دوست دارند، به خصوص زمانی که تفاوت عملکردی کمی بین این دو گزینه وجود دارد.

Array<T> و T[]به غیر از یک مورد بسیار کوچک، کاملا یکسان رفتار می‌کنند.

type Test1 = [...Array<string>, ...Array<string>];
 
type Test2 = [...string[], ...string[]];
A rest element cannot follow another rest element.

در این مثال، هنگامی که تلاش می‌کنیم از سینتکسT[]در حالت rest استفاده کنیم، با خطا مواجه می‌شویم. اما با توجه به مستندات موجود، این موضوع ممکن است در آینده برطرف شود. بنابراین می‌توانیم این دو را از نظر عملکردی یکسان در نظر بگیریم.

Keyof

اگر بخواهیم در مورد سینتکسی که می‌خواهیم استفاده کنیم قضاوت درستی داشته باشیم، باید عملگر keyofرا در نظر بگیریم. استفاده از keyofهمراه با T[]می‌تواند منجر به نتایج غیرمنتظره شود.

type Person = {
  id: string;
  name: string;
};
 
const result: keyof Person[] = ["id", "name"];
Type 'string[]' is not assignable to type 'keyof Person[]'.

ما در ان مثال ممکن است فکر کنیم که keyof Personقبل از اینکه وارد اپراتور []شود، بررسی می‌شود. به این معنی که ما در نهایت با یک تایپ مانند ('id' | 'name')[]مواجه می‌شویم. اما متأسفانه، ابتدا[]بررسی می‌شود، بنابراین در نهایت یک keyofرویPerson[]انجام می‌دهیم.

برای این که این مشکل را برطرف کنیم، می‌توانیم keyof Personرا داخل پرانتز قرار دهیم:

const result: (keyof Person)[] = ["id", "name"];

و یا این که می‌توانیم به جای آن از Array<T>استفاده کنیم:

const result: Array<keyof Person> =
        
const result: (keyof Person)[]
  ["id", "name"];

خوانایی

برخی توسعه‌دهندگان بر این باورند که Array<string>خواناتر از string[]است. در این بخش مقاله مقاله قصد داریم تا این موضوع را بررسی کنیم.

آرایه‌های Readonly

اگر بخواهیم با Array<T>سازگار بمانیم، احتمالاً باید از تایپ ReadonlyArray<T>نیز استفاده کنیم:

const array: ReadonlyArray<string> = ["hello", "world"];
 
array.push("foo");
Property 'push' does not exist on type 'readonly string[]'.

می‌توانیم این موضوع را با سینتکس readonly T[]مقایسه کنیم:

const array2: readonly string[] = ["hello", "world"];
 
array2.push("foo");
Property 'push' does not exist on type 'readonly string[]'.

آرایه‌هایی از آرایه‌ها

برای مدیریت آرایه‌هایی از آرایه‌ها، باید Array<Array<T>>را نیز در نظر بگیریم:

const array: Array<Array<string>> = [
  ["hello", "world"],
  ["foo", "bar"],
];

می‌توانیم آن را با سینتکس T[][]مقایسه کنیم:

const array2: string[][] = [
  ["hello", "world"],
  ["foo", "bar"],
];

موارد استفاده از T[] در تایپ اسکریپت

تایپ اسکریپت نظری را که ترجیح می‌دهد ارائه می‌نماید. به این ترتیب، همیشه در نمایش hoverها و خطاها، از سینتکس T[]استفاده می‌کند.

const array = [1, 2];
       
const array: number[]
 
const asConstArray = [1, 2] as const;
           
const asConstArray: readonly [1, 2]
 
const arrayOfArrays = [
           
const arrayOfArrays: number[][]
  [۱, ۲],
  [۳, ۴],
];
 
const stringArray = ["hello", "world"];
 
const numArray: number[] = stringArray;
Type 'string[]' is not assignable to type 'number[]'.
  Type 'string' is not assignable to type 'number'.

این به این معنی است که اگر از Array<T>در کد خود استفاده می‌کنیم، توسعه‌دهندگان تایپ اسکریپتی که تجربه کم‌تری دارند، ممکن است هنگام ترجمه بین دو این سینتکس کمی دچار ابهام شوند.

این موضوع می‌تواند دلیلی باشد که استفاده از T[]را به استفاده از Array<T>ترجیح دهیم.

جمع‌بندی

در این مقاله سعی کردیم تا روش‌های تعریف آرایه در تایپ اسکریپت را باهم بررسی کنیم که به طور خلاصه، به نتایج زیر رسیدیم:

• Array<T>و T[]هر دو از نظر عملکردی که در کد دارند، یکسان هستند.

const firstTest = (arr: Array<string>) => {};
 
const secondTest = (arr: string[]) => {};
 
// Both behave the same!
firstTest(["hello", "world"]);
secondTest(["hello", "world"]);

• استفاده از keyofهمراه با T[]می‌تواند منجر به نتایج غیرمنتظره شود.

type Person = {
  id: string;
  name: string;
};
 
const result: keyof Person[] = ["id", "name"];
Type 'string[]' is not assignable to type 'keyof Person[]'.

برای برطرف کردن این مشکل باید به جای T[]از Array<T>استفاده کنیم.

const result: Array<keyof Person> = ["id", "name"];

• برخی توسعه‌دهندگان بر این باورند که Array<string>خواناتر از string[]است. اما این موضوع مانند تفاوت بین “array of strings” یا “string array” می‌تواند یک موضوع شخصی بوده و فرد به فرد متفاوت باشد.
• تایپ اسکریپت برای نمایش hoverها یا خطاها، از سینتکس T[]استفاده می‌کند. توسعه‌دهندگان تایپ اسکریپتی که تجربه کمی دارند ممکن است هنگام ترجمه بین Array<T>در کد و T[]در خطاهای خود دچار ابهام شوند.

const array = [1, 2];
       
const array: number[]