Συνοπτικός οδηγός TypeScript
Μια αναζητήσιμη, εκτυπώσιμη αναφορά TypeScript: types, interfaces, generics, utility types, narrowing, declaration files και tsconfig. Δωρεάν.
Basic types
14let name: string = "Ada";
let age: number = 30;
let ok: boolean = true;
let ids: number[] = [1, 2];
let pair: [string, number] = ["a", 1];
let anything: unknown;
let loose: any;
function log(): void {}
function fail(): never { throw new Error(); }
let big: bigint = 9007199254740993n;
let id: string | null = null;
const point = { x: 1 } as const;
enum Status { Active, Inactive }
type Dir = "up" | "down";
Interfaces & type aliases
12interface User { id: number; name: string; }
type User = { id: number; name: string };
interface User { nickname?: string; }
interface User { readonly id: number; }
interface Admin extends User { role: string; }
type Admin = User & { role: string };
interface Dict { [key: string]: number; }
interface Fn { (x: number): string; }
interface User { greet(): void; }
interface Box<T> { value: T; }
interface Window { myGlobal: string; }
type Point = Readonly<{ x: number }>;
Unions, intersections & narrowing
12type Id = string | number;
type Full = A & B;
if (typeof id === "string") { ... }
if (el instanceof HTMLElement) { ... }
if ("radius" in shape) { ... }
if (value != null) { ... }
switch (shape.kind) { case "circle": ... }
type Shape = Circle | Square;
const x = cond ? a : b;
user?.address?.city
const name = input ?? "default";
function assertNever(x: never): never { throw x; }
Generics
11function first<T>(arr: T[]): T { return arr[0]; }
first<string>(["a", "b"])
interface Box<T> { value: T; }
class Stack<T> { items: T[] = []; }
type Pair<K, V> = { key: K; value: V };
<T extends { id: number }>
<T, K extends keyof T>(obj: T, key: K): T[K]
<T = string>
function wrap<const T>(v: T): T[]
type Flatten<T> = T extends Array<infer U> ? U : T;
const map = new Map<string, User>();
Utility types
14Partial<User>
Required<User>
Readonly<User>
Pick<User, "id" | "name">
Omit<User, "password">
Record<string, number>
Exclude<T, U>
Extract<T, U>
NonNullable<T>
ReturnType<typeof fn>
Parameters<typeof fn>
Awaited<Promise<string>>
InstanceType<typeof MyClass>
Uppercase<"id"> / Capitalize<"id">
Functions & overloads
11function add(a: number, b: number): number
const add = (a: number, b: number) => a + b;
function log(msg: string, level?: string)
function log(msg: string, level = "info")
function sum(...nums: number[]): number
type Handler = (e: Event) => void;
function get(id: number): User;
function get(ids: number[]): User[];
function get(x: any): any { ... }
function fn(this: HTMLElement, e: Event)
async function load(): Promise<User>
function isUser(x: unknown): x is User
const fn: typeof otherFn = ...;
Classes
12class User { constructor(public name: string) {} }
private secret: string;
#secret: string;
protected id: number;
readonly createdAt = new Date();
static create(): User { return new User(); }
class Admin extends User { ... }
class Api implements Fetcher { ... }
abstract class Shape { abstract area(): number; }
get fullName(): string { return ...; }
override toString(): string { ... }
declare id: number;
Type guards & assertions
11function isUser(x: unknown): x is User
function assertUser(x: unknown): asserts x is User
function assertOk(x: unknown): asserts x
const el = input as HTMLInputElement;
value!
x as unknown as Y
const roles = ["admin", "user"] as const;
if (Array.isArray(value)) { ... }
satisfies Record<string, string>
typeof x === "object" && x !== null
catch (e) { if (e instanceof Error) ... }
Mapped & conditional types
12type Flags<T> = { [K in keyof T]: boolean };
{ [K in keyof T]?: T[K] }
{ [K in keyof T]-?: T[K] }
{ readonly [K in keyof T]: T[K] }
{ -readonly [K in keyof T]: T[K] }
{ [K in keyof T as `get${Capitalize<string & K>}`]: () => T[K] }
type IsString<T> = T extends string ? true : false;
T extends (infer U)[] ? U : never
type Keys = keyof User;
type Value = User["name"];
type Route = `/users/${number}`;
T extends any ? T[] : never
Modules & declaration files
12export interface User { ... }
export default class Api { ... }
import { User } from "./user";
import type { User } from "./user";
export type { User };
import * as path from "node:path";
declare module "my-lib" { ... }
declare global { interface Window { ... } }
declare const VERSION: string;
export {};
/// <reference types="node" />
npm i -D @types/lodash
tsconfig essentials
13"strict": true
"target": "ES2022"
"module": "ESNext"
"moduleResolution": "bundler"
"noEmit": true
"esModuleInterop": true
"skipLibCheck": true
"noUncheckedIndexedAccess": true
"paths": { "@/*": ["./src/*"] }
"outDir": "./dist", "rootDir": "./src"
"sourceMap": true, "declaration": true
npx tsc --noEmit
npx tsc --init
Καμία καταχώριση δεν ταιριάζει με «:q».
Σχετικά με το Συνοπτικός οδηγός TypeScript
Αυτό το cheat sheet TypeScript μετατρέπει το σύστημα τύπων σε μία αναζητήσιμη σελίδα: βασικούς τύπους, interfaces και type aliases, unions, intersections και narrowing, generics, τους ενσωματωμένους utility types, συναρτήσεις και overloads, κλάσεις, type guards και assertions, mapped και conditional types, modules και αρχεία δηλώσεων, και τις επιλογές tsconfig που πραγματικά έχουν σημασία.
Είναι γραμμένο για την καθημερινή εργασία: το ακριβές σχήμα ενός generic constraint, τι κάνουν τα Pick, Omit, Record και ReturnType, πώς περιορίζει ένα discriminated union, πότε να καταφύγετε στο `satisfies` αντί για cast, ώστε να ελέγξετε μια λεπτομέρεια χωρίς να αφήσετε τον επεξεργαστή σας για το εγχειρίδιο.
Όπως κάθε cheat sheet σε αυτή την ομάδα, είναι δωρεάν και client-side: φιλτράρετε γραμμές ζωντανά με το πλαίσιο αναζήτησης, μεταβείτε ανάμεσα σε τμήματα με τον σταθερό πίνακα περιεχομένων, αντιγράψτε οποιοδήποτε απόσπασμα με ένα κλικ και εκτυπώστε τη σελίδα για αναφορά στο γραφείο σας.
Πώς να χρησιμοποιήσετε το Συνοπτικός οδηγός TypeScript
- Ανοίξτε το φύλλο και ξεφυλλίστε τα τμήματα, από τους Βασικούς τύπους και τα Generics έως τα βασικά tsconfig.
- Αναζητήστε μια λέξη-κλειδί όπως Partial, narrowing ή satisfies για να φιλτράρετε κάθε γραμμή ζωντανά.
- Μεταβείτε στα Utility types ή στα Mapped & conditional types όταν χρειάζεστε την προχωρημένη σύνταξη σε επίπεδο τύπων.
- Κάντε κλικ σε ένα απόσπασμα ή στο εικονίδιο αντιγραφής του για να αντιγράψετε τον κώδικα TypeScript στο πρόχειρό σας.
- Χρησιμοποιήστε την Εκτύπωση για ένα χάρτινο αντίγραφο της πλήρους αναφοράς TypeScript.