TypeScript Cheat Sheet: דף עזר מהיר
עודכן לאחרונה
טיפוסים בסיסיים
הטיפוסים הפרימיטיביים ואיך מצמידים טיפוס למשתנים.
| פעולה | תחביר |
|---|---|
| מחרוזת (String) | let name: string = "Ada"; |
| מספר (Number) | let age: number = 25; |
| בוליאני (Boolean) | let ok: boolean = true; |
| מערך של T | let xs: number[] = [1, 2, 3]; |
| מערך גנרי | 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 (ליטרל) | const dirs = ["up", "down"] as const; |
| Non-null assertion | el!.focus(); |
Interfaces
תיאור המבנה של אובייקט.
| פעולה | תחביר |
|---|---|
| הגדרה | interface User { id: number; name: string; } |
| מאפיין אופציונלי | interface User { age?: number; } |
| מאפיין לקריאה בלבד | interface User { readonly id: number; } |
| חתימת מתודה | interface Logger { log(msg: string): void; } |
| הרחבת interface אחר | interface Admin extends User { role: string; } |
| Index signature | interface Map { [key: string]: number; } |
| מימוש במחלקה | class Db implements Logger { … } |
Type aliases ו-unions
מתן שם לטיפוס ושילוב טיפוסים עם | ו-&.
| פעולה | תחביר |
|---|---|
| Type alias | type ID = string | number; |
| Type alias לאובייקט | type User = { id: number; name: string }; |
| טיפוס union | type Status = "idle" | "loading" | "done"; |
| טיפוס intersection | type Admin = User & { role: string }; |
| טיפוס ליטרלי | type Yes = "yes"; |
| ערך שיכול להיות null | type Maybe<T> = T | null | undefined; |
| Type alias לפונקציה | type Handler = (e: Event) => void; |
פונקציות
פרמטרים וערכים מוחזרים עם טיפוסים, ו-overloads.
| פעולה | תחביר |
|---|---|
| פרמטר אופציונלי | function greet(name?: string) { … } |
| פרמטר ברירת מחדל | function greet(name = "friend") { … } |
| פרמטרי rest | function sum(...ns: number[]): number { … } |
| טיפוס פונקציה | let fn: (a: number) => number; |
| interface שאפשר לקרוא לו | 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 |
מחלקות
מחלקות עם מגדירי גישה ו-parameter properties.
| פעולה | תחביר |
|---|---|
| הגדרת מחלקה | class User { name: string; } |
| בנאי | constructor(name: string) { this.name = name; } |
| Parameter property | constructor(public name: string) {} |
| Public / private / protected | private id: number; |
| שדה לקריאה בלבד | readonly id: number; |
| חבר סטטי | static count = 0; |
| Getter / setter | get name() { return this._name; } |
| ירושה | class Admin extends User { … } |
| מחלקה אבסטרקטית | abstract class Shape { abstract area(): number; } |
Generics
טיפוסים לשימוש חוזר שמקבלים טיפוסים אחרים כפרמטרים.
| פעולה | תחביר |
|---|---|
| פונקציה גנרית | function id<T>(x: T): T { return x; } |
| קריאה עם טיפוס מפורש | id<string>("hi"); |
| interface גנרי | interface Box<T> { value: T; } |
| type alias גנרי | type Pair<A, B> = [A, B]; |
| מחלקה גנרית | 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" |
| טיפוס גישה לפי אינדקס | type Name = User["name"]; |
Narrowing
צמצום של union לטיפוס יחיד בזמן ריצה.
| פעולה | תחביר |
|---|---|
| בדיקת typeof | if (typeof x === "string") { … } |
| בדיקת instanceof | if (e instanceof Error) { … } |
| האופרטור in | if ("name" in obj) { … } |
| צמצום לפי שוויון | 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 (מוטמע בקוד) | const enum Color { Red, Green, Blue } |
| Union של ליטרלים (הדרך המודרנית) | type Status = "idle" | "done"; |
Utility types
כלי עזר מובנים שמשנים טיפוסים קיימים.
| פעולה | תחביר |
|---|---|
| הפיכת כל המאפיינים לאופציונליים | Partial<User> |
| הפיכת כל המאפיינים לחובה | Required<User> |
| הפיכת כל המאפיינים לקריאה בלבד | 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 אחרי await | Awaited<Promise<string>> |
מודולים
ייבוא וייצוא בין קבצים.
| פעולה | תחביר |
|---|---|
| ייצוא בשם | export function add(a: number, b: number) { … } |
| ייצוא ברירת מחדל | export default class User { … } |
| ייצוא מחדש | export { User } from "./user"; |
| ייבוא בשם | import { add } from "./math"; |
| ייבוא ברירת מחדל | import User from "./user"; |
| ייבוא של טיפוס בלבד | import type { User } from "./user"; |
| ייבוא של הכול | import * as math from "./math"; |
| הפניית triple-slash | /// <reference types="node" /> |
הגדרות tsconfig חיוניות
דגלי הקומפיילר שכדאי להכיר.
| אפשרות | השפעה |
|---|---|
"strict": true | מפעיל את כל הבדיקות של מצב strict (מומלץ). |
"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 שאתם צריכים הכי הרבה, בעמוד אחד. ה-TypeScript cheat sheet הזה הוא דף עזר מהיר לעבודה היומיומית עם TS: טיפוסים בסיסיים, interfaces, type aliases, generics, unions, narrowing וה-utility types המובנים. מכיוון ש-TypeScript בנויה על JavaScript, כדאי להחזיק גם את דף העזר של JavaScript בהישג יד בשביל התחביר הבסיסי.
כל מה שכאן הוא TypeScript סטנדרטי שמתקמפל עם tsc ורץ בכל מקום שבו רץ JavaScript מודרני. העתיקו את מה שאתם צריכים, או נסו כל קטע קוד בזמן אמת בעורך האונליין של TypeScript, בלי להתקין כלום. חדשים בטיפוסים? קורס ה-TypeScript האינטראקטיבי והחינמי של Coddy בונה אותם צעד אחר צעד על בסיס JavaScript.
שאלות נפוצות על ה-TypeScript cheat sheet
האם ה-TypeScript cheat sheet הזה חינמי?
כן. ה-TypeScript cheat sheet הזה חינמי לגמרי, בלי צורך בהרשמה. שמרו אותו במועדפים וחזרו אליו בכל פעם שתצטרכו לבדוק טיפוס, interface או utility type.
מה ההבדל בין interface ל-type alias?
שניהם יכולים לתאר את המבנה של אובייקט, וברוב המקרים היומיומיים אפשר להחליף ביניהם. את interfaces אפשר לפתוח מחדש ולהרחיב בין קבצים (declaration merging), וזה שימושי לטיפוסים של ספריות. Type aliases יכולים לתת שם ל-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 עם מערכת טיפוסים מעליה, כך שכל מיומנות ב-JavaScript עוברת איתכם. אם אתם עדיין בונים את יסודות ה-JS (מערכים, אובייקטים, async/await), דף העזר של JavaScript הוא נקודת התחלה טובה, וקורס ה-JavaScript החינמי של Coddy מלמד את אותם נושאים באופן אינטראקטיבי.
אפשר לתרגל TypeScript אונליין?
כן. פתחו את עורך האונליין של TypeScript כדי להריץ כל קטע קוד מדף העזר הזה בדפדפן, בלי להתקין כלום. כשתרצו מסגרת מסודרת, למדו דרך עמוד ה-JavaScript של Coddy והוסיפו מעל את הטיפוסים מהעמוד הזה.
משאבים קשורים
עוד דפי עזר
