ورقة غش TypeScript
آخر تحديث
الأنواع الأساسية
الأنواع الأولية وكيفية توصيف المتغيرات.
| العملية | الصيغة |
|---|---|
| نص (string) | let name: string = "Ada"; |
| رقم | let age: number = 25; |
| Boolean | let ok: boolean = true; |
| مصفوفة من T | let xs: number[] = [1, 2, 3]; |
| مصفوفة generic | let xs: Array<string> = []; |
| Tuple | let pair: [string, number] = ["a", 1]; |
| Any (تعطيل النوع) | let x: any = 1; |
| Unknown (any آمن) | let x: unknown = JSON.parse(s); |
| Void (بدون قيمة عائدة) | function log(): void { … } |
| Never (لا تعود أبدًا) | function fail(): never { throw … } |
| Null / undefined | let n: null = null; |
استنتاج النوع وتوصيفه
متى تترك TS يستنتج، ومتى تكتب التوصيف بنفسك.
| العملية | الصيغة |
|---|---|
| مستنتج من القيمة | let count = 0; // number |
| توصيف صريح | let count: number = 0; |
| معامل دالة | function add(a: number, b: number) { … } |
| نوع القيمة المُعادة | function add(a: number, b: number): number { … } |
| دالة سهمية | const sq = (x: number): number => x * x; |
| Type assertion | const el = input as HTMLInputElement; |
| Const assertion (literal) | const dirs = ["up", "down"] as const; |
| Non-null assertion | el!.focus(); |
الواجهات (Interfaces)
صف شكل الكائن.
| العملية | الصيغة |
|---|---|
| إعلان | interface User { id: number; name: string; } |
| خاصية اختيارية | interface User { age?: number; } |
| خاصية readonly | interface User { readonly id: number; } |
| توقيع دالة | interface Logger { log(msg: string): void; } |
| توسيع واجهة أخرى | interface Admin extends User { role: string; } |
| توقيع index | interface Map { [key: string]: number; } |
| تطبيق في صف | class Db implements Logger { … } |
Type alias والـ unions
سمِّ نوعًا واجمع الأنواع باستخدام | و &.
| العملية | الصيغة |
|---|---|
| Type alias | type ID = string | number; |
| Alias لكائن | type User = { id: number; name: string }; |
| نوع union | type Status = "idle" | "loading" | "done"; |
| نوع intersection | type Admin = User & { role: string }; |
| نوع literal | type Yes = "yes"; |
| يقبل null | type Maybe<T> = T | null | undefined; |
| Alias لدالة | type Handler = (e: Event) => void; |
الدوال
معاملات وأنواع عائدة موصّفة، مع overload.
| العملية | الصيغة |
|---|---|
| معامل اختياري | function greet(name?: string) { … } |
| قيمة افتراضية | function greet(name = "friend") { … } |
| معاملات rest | function sum(...ns: number[]): number { … } |
| نوع دالة | let fn: (a: number) => number; |
| واجهة قابلة للاستدعاء | interface Fn { (x: number): number; } |
| توقيعات overload | function f(x: string): string; function f(x: number): number; function f(x: any) { return x; } |
| تجاهل void | const cb: () => void = () => 42; // ok |
الأصناف (Classes)
أصناف بمعدِّلات وصول وخصائص في المعاملات.
| العملية | الصيغة |
|---|---|
| إعلان صنف | class User { name: string; } |
| Constructor | constructor(name: string) { this.name = name; } |
| خاصية في المعامل | constructor(public name: string) {} |
| Public / private / protected | private id: number; |
| حقل readonly | readonly id: number; |
| عنصر static | static count = 0; |
| Getter / setter | get name() { return this._name; } |
| وراثة | class Admin extends User { … } |
| صنف abstract | abstract class Shape { abstract area(): number; } |
Generics
أنواع قابلة لإعادة الاستخدام، معلّمة بأنواع أخرى.
| العملية | الصيغة |
|---|---|
| دالة generic | function id<T>(x: T): T { return x; } |
| استدعاء بنوع صريح | id<string>("hi"); |
| واجهة generic | interface Box<T> { value: T; } |
| Alias generic | type Pair<A, B> = [A, B]; |
| صنف generic | class Stack<T> { items: T[] = []; } |
| قيد عبر extends | function len<T extends { length: number }>(x: T) { return x.length; } |
| معامل نوع افتراضي | interface Box<T = string> { value: T; } |
| معامل keyof | type K = keyof User; // "id" | "name" |
| وصول عبر index | type Name = User["name"]; |
Narrowing
قلِّص union إلى نوع واحد في وقت التشغيل.
| العملية | الصيغة |
|---|---|
| فحص typeof | if (typeof x === "string") { … } |
| فحص instanceof | if (e instanceof Error) { … } |
| معامل in | if ("name" in obj) { … } |
| Narrowing بالمساواة | if (status === "done") { … } |
| بالـ truthiness | if (value) { … } |
| type guard مخصص | function isUser(x: any): x is User { return "id" in x; } |
| Discriminated union | type Shape = { kind: "sq"; size: number } | { kind: "ci"; r: number }; |
| شمولية مع never | const _: never = shape; |
Enums
مجموعات ثوابت مُسمَّاة.
| العملية | الصيغة |
|---|---|
| Enum عددي | enum Direction { Up, Down, Left, Right } |
| Enum نصي | enum Status { Idle = "IDLE", Done = "DONE" } |
| استخدام قيمة | let d: Direction = Direction.Up; |
| Const enum (inline) | const enum Color { Red, Green, Blue } |
| Union من literals (الأسلوب الحديث) | type Status = "idle" | "done"; |
أنواع Utility
مساعدات مدمجة تحوّل الأنواع الموجودة.
| العملية | الصيغة |
|---|---|
| كل الخصائص اختيارية | Partial<User> |
| كل الخصائص مطلوبة | Required<User> |
| كل الخصائص readonly | Readonly<User> |
| اختيار مجموعة جزئية من المفاتيح | Pick<User, "id" | "name"> |
| استبعاد مفتاح أو أكثر | Omit<User, "password"> |
| كائن بالمفاتيح المعطاة | Record<string, number> |
| استبعاد من union | Exclude<"a" | "b" | "c", "a"> |
| استخراج فقط من union | Extract<"a" | "b", "a" | "c"> |
| إزالة null / undefined | NonNullable<string | null> |
| نوع قيمة الإرجاع | ReturnType<typeof fn> |
| tuple من المعاملات | Parameters<typeof fn> |
| نوع Promise بعد الحل | Awaited<Promise<string>> |
الوحدات (Modules)
import و export عبر الملفات.
| العملية | الصيغة |
|---|---|
| Export مُسمَّى | export function add(a: number, b: number) { … } |
| Export افتراضي | export default class User { … } |
| إعادة export | export { User } from "./user"; |
| Import مُسمَّى | import { add } from "./math"; |
| Import افتراضي | import User from "./user"; |
| Import للنوع فقط | import type { User } from "./user"; |
| استيراد الكل | import * as math from "./math"; |
| مرجع triple-slash | /// <reference types="node" /> |
أساسيات tsconfig
أعلام المُجمِّع التي تستحق المعرفة.
| الخيار | الأثر |
|---|---|
"strict": true | تفعيل كل فحوصات الوضع الصارم (موصى به). |
"target": "ES2022" | نسخة JavaScript التي يُصدرها tsc. |
"module": "ESNext" | نظام الوحدات في المخرجات. |
"moduleResolution": "bundler" | حل الوحدات كما تفعل الـ bundlers الحديثة. |
"jsx": "react-jsx" | تفعيل JSX لـ React 17+. |
"esModuleInterop": true | استيرادات افتراضية أنظف من CommonJS. |
"skipLibCheck": true | تجاوز فحص الأنواع في node_modules (بناء أسرع). |
"noEmit": true | فحص الأنواع فقط — المخرجات يولّدها الـ bundler. |
أكثر صيغ TypeScript استخدامًا في صفحة واحدة. ورقة الغش هذه مرجع سريع للاستخدام اليومي لـ TS: الأنواع الأساسية، الواجهات، type aliases، الـ generics، الـ unions، الـ narrowing، وأنواع utility المدمجة.
كل ما هنا هو TypeScript قياسي يُترجَم بـ tsc ويعمل في أي مكان يعمل فيه JavaScript الحديث. انسخ ما تحتاج، أو جرّب أي مقتطف مباشرةً في playground الخاص بـ TypeScript — بلا تثبيت.
أسئلة شائعة حول ورقة غش TypeScript
هل ورقة غش TypeScript هذه مجانية؟
نعم. ورقة غش TypeScript هذه مجانية بالكامل ودون تسجيل. أضِفها إلى المفضلة وارجع إليها متى احتجت إلى مراجعة نوع، أو واجهة، أو نوع utility.
ما الفرق بين interface و type alias؟
كلاهما يمكن أن يصف شكل الكائن، وفي معظم الحالات اليومية يمكن استبدال أحدهما بالآخر. الـ interface يمكن إعادة فتحه وتوسيعه عبر الملفات (declaration merging)، وهو مفيد لأنواع المكتبات. أما type alias فيمكنه تسمية unions و intersections و tuples و mapped types — أشكال لا يمكن التعبير عنها بـ
interface. القاعدة الشائعة: استخدم interface لأشكال الكائنات العامة، و type للـ unions والـ tuples والأنواع المحسوبة.ما الفرق بين any و unknown؟
any يُعطّل فحص الأنواع كليًا — يسمح لك المُجمِّع بأي شيء معه. unknown آمن نوعيًا: عليك تضييقه (بـ typeof أو instanceof أو type guard) قبل استخدامه. فضِّل unknown للقيم القادمة من مصادر خارجية مثل JSON.parse أو fetch — فهو يجبرك على التحقق قبل الاستخدام.هل أحتاج لتعلم JavaScript قبل TypeScript؟
نعم — TypeScript هو JavaScript مضافًا إليه نظام أنواع، لذا كل ما تعرفه في JS مفيد. إن كنت لا تزال تبني الأساسيات (المصفوفات، الكائنات، async/await)، فإن ورقة غش JavaScript نقطة بداية جيدة، ودورة JavaScript المجانية من Coddy تغطي نفس الموضوعات بشكل تفاعلي.
هل يمكنني التدرب على TypeScript أونلاين؟
نعم. افتح playground الخاص بـ TypeScript لتشغيل أي مقتطف من هذه الورقة في متصفحك — بلا تثبيت. عندما تريد نهجًا منظمًا، ابدأ من landing الخاص بـ JavaScript وطبّق الأنواع من هذه الصفحة فوقه.
موارد ذات صلة
المزيد من الأوراق المرجعية
