هر آنچه که باید در typescript یادبگیرید

تایپ اسکریپت چیه و چرا اینقدر تایپ اسکریپت اهمیت داره؟

تایپ اسکریپت یک زبان برنامه نویسیه و بعنوان یک ابرمجموعه جاوااسکریپت معرفی میشه (یعنی جی اسه با ویژگی های بیشتر ) و هدف اصلیش بهبود بهره وری در هنگام توسعه برنامه های کاربردی پیچیده است.
TypeScript مزایای بیشتری نسبت به جاوا اسکریپت داره که این ویژگیها میتوانند منجر به باگهای کمتر، بهبود کیفیت کد، پشتیبانی بهتر از IDE و افزایش بهرهوری توسعهدهنده شوند، به خصوص در پروژههای بزرگتر با پایگاههای کد پیچیده. که در ادامه با این مزایا بیشتر اشنا میشیم

مقایسه proptype جاوااسکریپت و تایپ اسکریپت ؟

پراپ تایپ:

اگه بخوام ساده بگم پراپ تایپ فقط برای کامپوننت هست اما توابع دیگه ای مثل fetch کردن دیتا و validation و event handler و ... رو بررسی نمیکنه

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

تایپ اسکریپت:

تایپ استاتیک اختیاری

جاوا اسکریپت یک زبان با تایپ پویاست یعنی میتونی تایپ یک متغیر رو الان استرینگ قرار بدی و دو خط بعد بولین کنیش و این آزادی تایپ پویا معمولاً منجر به باگ میشه اما تایپ اسکریپت اومده تا این مشکل رو حل کنه.

همچنین کامپایلر تایپ اسکریپت خطاهای احتمالی کد رو شناسایی میکنه و میتونه حدودا 15٪ از اشکالات جاوا اسکریپت را شناسایی کنه.

مثال:

تو جاوااسکریپت تایپ داینامیک هست و میتونی به هر چیزی تغییرش بدی

let number = 10
number = 'a'

تا اینجاش همه چیز اوکیه ولی وقتی کد زیر اجرا میشه برنامه کرش میکنه

Math.round(number)

پشتیبانی IDE

تقریباً در هر ویرایشگر کد می توانید کد TypeScript را بنویسید و فعال کردن IDEها برای داشتن محیط غنیتر برای تشخیص خطاهای رایج در حین تایپ کد باعث افزایش امنیت پروژه میشه و استفاده از این زبان در پروژه ی جاوااسکریپت باعث میشه تا نرم افزار قوی تری ارائه کنید

شی گرایی

این برنامه از مفاهیم برنامه نویسی شی گرا (classes, inheritance, abstraction, interfaces) پشتیبانی می کنه و کدتون رو مقیاس پذیر تر میکنه و هرچی پروژه پیچیده تر باشه این مزیت آشکار تر میشه.

پشتیبانی جامعه

شاید برای شما هم هنگام توسعه ی پروژه جاوااسکریپت پیش اومده باشه که یک فایل رو تغییر بدید و تغییراتتون روی رفتار فایل های دیگه هم تاثیر بذاره و کلی از وقتتونو بگیره جاوااسکریپت میتونه احتمال بوجود اومدن این خطا رو کم کنه.

علاوه بر این اعتبار سنجی تایپ اسکریپت بهتر از جاوااسکریپت عمل میکنه

و درنهایت باعث میشه شما بعنوان دولوپر نسبت به کدتون اطمینان بیشتری داشته باشید و زمان بیشتری رو صرفه جویی کنید و همچنین همکاری بهتری رو بین تیم ها و درون تیم ها فراهم میکنه

data types:

number:

let age: number = 30;

string:

let name: string = 'John';

boolean:

let isDeveloper: boolean = true;

در کد بالا name استرینگ , age نامبر و isDeveloper همیشه بولین است و اگر بخواهیم مقداری از نوع دیگری را به این متغیرها اختصاص دهیم، TypeScript به ما خطا می دهد.

Any:

let dataAny: any = 'Hello';

تایپ any یعنی متغیر هرمقداری رو میتونه قبول کنه و دقیقا مشخص نیست تایپش چیه

هرموقع خواستی از این تایپ استفاده کنی کلا سیستمت رو خاموش کن و فردا دوباره روش فکر کنید

void:

function sayHello() : void {
   console.log('Hello')
}

این تایپ زمانی استفاده میشه که فانکشنمون چیزی رو ریترن نمیکنه

Arrays:

let list1: number[] = [1, 2, 3];
let list2: [number, string, boolean] = [1, 'basil', true]

برای تعریف تایپ ارایه ها نوع تایپ رو با [] تعریف میکنیم.

اگه تایپ رو مثل list2 تعریف کنیم ترتیب و تعداد مهم میشه مثلا برای متغیر list2 رو نمیتونی اینجوریش کنی:
let list:[number, string, boolean] = [1, 'basil', true, true]

Objects:

let person: { name: string; age: number } = { name: 'John', age: 20 };

برای تعریف تایپ ابجکت ها هم برای هر پراپرتی تایپ تعریف کنید.

اگه مقدار تایپی رو در یک ابجکت readonly تعریف کنیم ولیوی اون متغیر فقط یک بار تعریف میشه و امکان تغییر دادنش نیست مثال:

interface Person {
   readonly name: string;
    age: number;
}

let person: Person = { name: &quotAlice&quot, age: 30 };

// Trying to reassign a readonly property will result in a compilation error
// person.name = &quotBob&quot // This will cause a compilation error

// Regular properties can still be reassigned
person.age = 31;

console.log(person.name); // Output: Alice
console.log(person.age); // Output: 31

Enums:

enum Size {
  Smal=1,
  Medium=2,
  Large=3
}

let mySize:Size = Size.Medium;      // output = 2

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

Interfaces

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

function displayPersonInfo(person: Person): void {
    console.log(`Name: ${person.name}, Age: ${person.age}`);
}

با استفاده از interface نوع تایپ هارو میشه داخل یک ابجکت تعریف کرد و چندین بار از اون ابجکت رو بعنوان تایپ ورودی استفاده کرد

Type Aliases

type Age = number;
 type Info = { name: string; age: Age };

عملکردش مثل interface هست با این تفاوت که interface حتما باید ابجکتی از تایپ ها باشه ولی این میتونه بصورت تکی و صرفا برای یک متغیر تعریف بشه

Union Types:

let id : string | number;
id = '123'    // ok
id = 123    // ok

با استفاده از این تایپ میتونید چندتا تایپ برای یک متغیر تعریف کنید این برای زمانی مناسب هست که یک متغیر بتونه بطور قانونی چندین نوع تایپ داشته باشه و باعث مشکل نشه

optional property:

function calculateTxt( income?:number ): void {
  ...
}

زمانی که مقدار یک پارامتر ریکوایرد نباشه (بتونه undefined هم باشه) هنگام تعریف تایپ اون متغیر از ? استفاده میکنیم

Intersection Types:

با استفاده از این تایپ شما میتونید چندین نوع تایپ رو تو یک تایپ ترکیب کنید

type Employee = {
  name: string;
};

type Manager = {
  department: string;
};

type GeneralManager = Employee & Manager;

let gm: GeneralManager = {
  name: 'John',
  department: 'Sales',
};

در اینجا تایپ GeneralManager ترکیبی از Employee و Manager هست این به این معنی است که شامل ویژگی های هردو است.

Type Guards:

let id: string | number;

if (typeof id === 'string') {
  id.toUpperCase(); // OK
} else {
  id.toFixed(); // OK
}

تو مثال بالا تایپ id میتونه استرینگ یا عدد باشه اما با استفاده از شرط چک میکنیم اگه تایپش استرینگ بود مثل استرینگ باهاش رفتار میشه اگه عدد بود مثل عدد باهاش رفتار میشه

Generics:

با استفاده از این تایپ میتونید کامپوننت ری یوزبل بسازید که نه فقط یک تایپ بلکه با تایپ های مختلف کار کنه

function getArray<ItemType>(items: ItemType[]): ItemType[] {
  return new Array<ItemType>().concat(items);
}

let numArray = getArray<number>([1, 2, 3, 4]);
let strArray = getArray<string>(['hello', 'world']);

در مثال بالا فانکشن getArray ارایه ای از هرتایپی رو قبول میکنه(نه فقط ارایه ای از عدد و استرینگ)

Functional Component:

const Greeting: React.FC<string> = (name) : JSX.Element => {
  return <h1>Hello {name} , World!</h1>;
};

در اینجا با استفاده از React.FC یک فانکشنال کامپوننت تعریف کردیم که به تایپ اسکریپت داریم میفهمونیم که Greeting یک فانکشنال کامپوننته و تایپ ورودیش از نوع استرینگ هست و تایپ ریترن هم المنت هست

حالا میشه فانکشن رو ی جور دیگه هم تعریف کرد:

function calculateTxt( income?:number ):number{
   return income
}
یا
function calculateTxt({ income } : { income?:number }):number{
    return income 
}

در مثال بالا مقدار تایپ ورودی رو عدد قرار دادیم و بعد از پرانتز تایپ چیزی که ریترن میشه رو تعریف میکنیم

Functional Component with Props:

type UserProps = {
  name: string;
  age: number;
};

const User: React.FC<UserProps> = ({ name, age }) => {
  return (
    <div>
      <p>Name: {name}</p>
      <p>Age: {age}</p>
    </div>
  );
};

فانکشن user دوتا پراپ name و age داره و با استفاده از UseProps تایپ پراپ های ورودی رو مشخص کردیم

Using React Hooks:

const Counter: React.FC = () => {
  const [count, setCount] = React.useState<number>(0);

  const increment = () => {
    setCount(count + 1);
  };

  return (
    <div>
      <p>Count: {count}</p>
      <button ={increment}>Increment</button>
    </div>
  );
};

در کامپوننت بالا ما از هوک useState برای مدیریت استیت استفاده میکنیم و مقدار count رو نامبر تعریف کردیم.

جمع بندی و Best Practices در تایپ اسکریپت:

1. از type بیشتر از Interface در پراپ کامپوننت ها استفاده کنید:درحالی که دوتاشون قابل استفاده هستند ولی type با برخی از پترن های typescript و react سازگار تر است.
2. از React.FC هنگام تعریف فانکشنال کامپوننت استفاده کنید
3. در صورت امکان از نوع «unknown» به جای «any» استفاده کنید: این جایگزین امنتر است
4. تایپ ریترن را مشخص کنید:این شیوه خوانایی کد را بهبود می بخشد.

سخن پایانی

خوبه که به خطاهای تایپ اسکریپت به چشم کمک به برنامه نویسی نگاه کنید نه اینکه صرفا چطوری راه حل برای حذف خطا پیدا کنید، تایپ اسکریپت صد در صد به کدتون نظم میده و کمک میکنه اشتباهات رایجی که در جاوااسکریپت انجام میدادید و باعث خطا میشد رو ندید