Шпаргалка по TypeScript
Последнее обновление
Базовые типы
Примитивные типы и как аннотировать переменные.
| Операция | Синтаксис |
|---|---|
| Строка | 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> = []; |
| Кортеж | 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(); |
Интерфейсы
Описывают форму объекта.
| Операция | Синтаксис |
|---|---|
| Объявить | 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 aliases и объединения
Именованные типы и комбинации через | и &.
| Операция | Синтаксис |
|---|---|
| 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 }; |
| Литеральный тип | type Yes = "yes"; |
| Nullable | type Maybe<T> = T | null | undefined; |
| Alias функции | type Handler = (e: Event) => void; |
Функции
Типизированные параметры, возвраты и перегрузки.
| Операция | Синтаксис |
|---|---|
| Опциональный параметр | function greet(name?: string) { … } |
| Значение по умолчанию | function greet(name = "friend") { … } |
| Rest-параметры | function sum(...ns: number[]): number { … } |
| Тип функции | let fn: (a: number) => number; |
| Вызываемый интерфейс | interface Fn { (x: number): number; } |
| Сигнатуры перегрузок | 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-поле | readonly id: number; |
| Статический член | static count = 0; |
| Getter / setter | get name() { return this._name; } |
| Наследование | class Admin extends User { … } |
| Абстрактный класс | 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; } |
| Generic-alias | 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" |
| Тип по индексу | type Name = User["name"]; |
Narrowing
Сужение объединения до одного типа в рантайме.
| Операция | Синтаксис |
|---|---|
| Проверка typeof | if (typeof x === "string") { … } |
| Проверка instanceof | if (e instanceof Error) { … } |
| Оператор in | if ("name" in obj) { … } |
| Сужение по равенству | if (status === "done") { … } |
| По truthy-значению | 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; |
Enum'ы
Именованные наборы констант.
| Операция | Синтаксис |
|---|---|
| Числовой 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 } |
| Объединение литералов (современно) | type Status = "idle" | "done"; |
Utility-типы
Встроенные хелперы, преобразующие существующие типы.
| Операция | Синтаксис |
|---|---|
| Все свойства опциональны | Partial<User> |
| Все свойства обязательны | Required<User> |
| Все свойства readonly | Readonly<User> |
| Выбрать подмножество ключей | Pick<User, "id" | "name"> |
| Исключить один или несколько ключей | Omit<User, "password"> |
| Объект с заданными ключами | Record<string, number> |
| Исключить из объединения | Exclude<"a" | "b" | "c", "a"> |
| Оставить только из объединения | Extract<"a" | "b", "a" | "c"> |
| Убрать null / undefined | NonNullable<string | null> |
| Тип возврата функции | ReturnType<typeof fn> |
| Кортеж параметров | Parameters<typeof fn> |
| Тип разрешённого promise | Awaited<Promise<string>> |
Модули
Импорт и экспорт между файлами.
| Операция | Синтаксис |
|---|---|
| Именованный export | export function add(a: number, b: number) { … } |
| Default export | export default class User { … } |
| Реэкспорт | export { User } from "./user"; |
| Именованный import | import { add } from "./math"; |
| Default import | import User from "./user"; |
| Импорт только типа | 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" | Разрешение модулей как в современных сборщиках. |
"jsx": "react-jsx" | Включает JSX для React 17+. |
"esModuleInterop": true | Чище default-импорты из CommonJS. |
"skipLibCheck": true | Пропускает проверку типов в node_modules (быстрее). |
"noEmit": true | Только проверка типов — сборку делает bundler. |
Самый частый синтаксис TypeScript на одной странице. Это быстрая справка для повседневного TS: базовые типы, интерфейсы, type aliases, дженерики, объединения, narrowing и встроенные utility-типы.
Всё здесь — это стандартный TypeScript, который компилируется через tsc и работает везде, где работает современный JavaScript. Копируй, что нужно, или попробуй любой сниппет вживую в TypeScript playground — ничего ставить не надо.
FAQ по шпаргалке TypeScript
Эта шпаргалка по TypeScript бесплатная?
Да. Эта шпаргалка по TypeScript полностью бесплатна, регистрация не нужна. Добавь в закладки и возвращайся, когда нужно посмотреть тип, интерфейс или utility-тип.
В чём разница между interface и type alias?
Оба могут описывать форму объекта и в большинстве повседневных случаев взаимозаменяемы. Interfaces можно повторно открывать и расширять между файлами (declaration merging), это полезно для типов библиотек. Type aliases могут именовать объединения, пересечения, кортежи и mapped-типы — формы, которые нельзя выразить через
interface. Частое правило: interface для публичных форм объектов, type для объединений, кортежей и вычисляемых типов.В чём разница между any и unknown?
any полностью отключает проверку типов — компилятор разрешит с ним всё. unknown типобезопасен: его нужно сузить (через typeof, instanceof или type guard), прежде чем использовать. Предпочитай unknown для данных извне — JSON.parse, fetch и т. п. — он заставит провалидировать перед использованием.Нужно ли учить JavaScript до TypeScript?
Да — TypeScript это JavaScript с системой типов сверху, так что все навыки JS пригодятся. Если ты ещё закрепляешь основы JS (массивы, объекты, async/await), хорошее начало — шпаргалка по JavaScript и бесплатный JavaScript-курс Coddy, который проходит то же самое интерактивно.
Можно ли практиковать TypeScript онлайн?
Да. Открой TypeScript playground и запускай любой сниппет из этой шпаргалки в браузере — ничего ставить не надо. Когда захочешь структуры, начни с лендинга JavaScript и применяй типы с этой страницы сверху.
Связанные ресурсы
Другие шпаргалки
