Шпаргалка з TypeScript
Довідник з TypeScript з пошуком і друком: типи, інтерфейси, generics, utility types, звуження типів, файли оголошень і 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
Ця шпаргалка з TypeScript перетворює систему типів на одну сторінку з пошуком: базові типи, інтерфейси та псевдоніми типів, об’єднання, перетини й звуження, узагальнення, вбудовані службові типи, функції та перевантаження, класи, захисники типів і твердження, мапувані та умовні типи, модулі й файли оголошень, а також параметри tsconfig, які справді мають значення.
Вона написана для щоденної роботи: точна форма обмеження узагальнення, що роблять Pick, Omit, Record і ReturnType, як звужується дискримінований union, коли варто використати `satisfies` замість приведення типу, щоб ви могли перевірити деталь, не залишаючи редактор заради посібника.
Як і кожна шпаргалка в цій групі, вона безкоштовна й клієнтська: фільтруйте рядки наживо за допомогою пошуку, переходьте між розділами за допомогою закріпленого змісту, копіюйте будь-який фрагмент одним клацанням і друкуйте сторінку як довідку для свого столу.
Як використовувати Шпаргалка з TypeScript
- Відкрийте шпаргалку й перегляньте розділи, від базових типів і узагальнень до основ tsconfig.
- Шукайте ключове слово, як-от Partial, narrowing чи satisfies, щоб відфільтрувати всі рядки наживо.
- Перейдіть до розділу «Службові типи» або «Мапувані та умовні типи», коли потрібен розширений синтаксис на рівні типів.
- Клацніть фрагмент або його піктограму копіювання, щоб скопіювати TypeScript до буфера обміну.
- Скористайтеся кнопкою «Друк», щоб отримати паперову копію повного довідника з TypeScript.