TypeScript Cheat Sheet: ściąga z TS
Ostatnia aktualizacja
Typy podstawowe
Typy prymitywne i adnotacje zmiennych.
| Operacja | Składnia |
|---|---|
| String | let name: string = "Ada"; |
| Liczba | let age: number = 25; |
| Wartość logiczna | let ok: boolean = true; |
| Tablica elementów T | let xs: number[] = [1, 2, 3]; |
| Tablica generyczna | let xs: Array<string> = []; |
| Krotka | let pair: [string, number] = ["a", 1]; |
| Any (rezygnacja z typowania) | let x: any = 1; |
| Unknown (bezpieczniejsze any) | let x: unknown = JSON.parse(s); |
| Void (brak wartości zwracanej) | function log(): void { … } |
| Never (nigdy nie zwraca) | function fail(): never { throw … } |
| Null / undefined | let n: null = null; |
Wnioskowanie typów i adnotacje
Kiedy pozwolić TS wnioskować typ, a kiedy dodać adnotację.
| Operacja | Składnia |
|---|---|
| Wnioskowany z wartości | let count = 0; // number |
| Jawna adnotacja | let count: number = 0; |
| Parametr funkcji | function add(a: number, b: number) { … } |
| Typ zwracany | function add(a: number, b: number): number { … } |
| Funkcja strzałkowa | const sq = (x: number): number => x * x; |
| Asercja typu | const el = input as HTMLInputElement; |
| Asercja const (literał) | const dirs = ["up", "down"] as const; |
| Asercja non-null | el!.focus(); |
Interfejsy
Opisywanie kształtu obiektu.
| Operacja | Składnia |
|---|---|
| Deklaracja | interface User { id: number; name: string; } |
| Właściwość opcjonalna | interface User { age?: number; } |
| Właściwość tylko do odczytu | interface User { readonly id: number; } |
| Sygnatura metody | interface Logger { log(msg: string): void; } |
| Rozszerzenie innego interfejsu | interface Admin extends User { role: string; } |
| Sygnatura indeksu | interface Map { [key: string]: number; } |
| Implementacja w klasie | class Db implements Logger { … } |
Aliasy typów i unie
Nadawanie nazwy typowi i łączenie typów przez | i &.
| Operacja | Składnia |
|---|---|
| Alias typu | type ID = string | number; |
| Alias typu obiektowego | type User = { id: number; name: string }; |
| Typ unii | type Status = "idle" | "loading" | "done"; |
| Typ przecięcia | type Admin = User & { role: string }; |
| Typ literałowy | type Yes = "yes"; |
| Typ dopuszczający null | type Maybe<T> = T | null | undefined; |
| Alias typu funkcji | type Handler = (e: Event) => void; |
Funkcje
Typowane parametry, wartości zwracane i przeciążenia.
| Operacja | Składnia |
|---|---|
| Parametr opcjonalny | function greet(name?: string) { … } |
| Parametr domyślny | function greet(name = "friend") { … } |
| Parametry rest | function sum(...ns: number[]): number { … } |
| Typ funkcji | let fn: (a: number) => number; |
| Interfejs wywoływalny | interface Fn { (x: number): number; } |
| Sygnatury przeciążeń | function f(x: string): string; function f(x: number): number; function f(x: any) { return x; } |
| Ignorowana wartość zwracana (void) | const cb: () => void = () => 42; // ok |
Klasy
Klasy z modyfikatorami dostępu i właściwościami parametrów.
| Operacja | Składnia |
|---|---|
| Deklaracja klasy | class User { name: string; } |
| Constructor | constructor(name: string) { this.name = name; } |
| Właściwość parametru | constructor(public name: string) {} |
| Public / private / protected | private id: number; |
| Pole tylko do odczytu | readonly id: number; |
| Składowa statyczna | static count = 0; |
| Getter / setter | get name() { return this._name; } |
| Dziedziczenie | class Admin extends User { … } |
| Klasa abstrakcyjna | abstract class Shape { abstract area(): number; } |
Generyki
Typy wielokrotnego użytku sparametryzowane innymi typami.
| Operacja | Składnia |
|---|---|
| Funkcja generyczna | function id<T>(x: T): T { return x; } |
| Wywołanie z jawnym typem | id<string>("hi"); |
| Interfejs generyczny | interface Box<T> { value: T; } |
| Generyczny alias typu | type Pair<A, B> = [A, B]; |
| Klasa generyczna | class Stack<T> { items: T[] = []; } |
| Ograniczenie przez extends | function len<T extends { length: number }>(x: T) { return x.length; } |
| Domyślny parametr typu | interface Box<T = string> { value: T; } |
| Operator keyof | type K = keyof User; // "id" | "name" |
| Typ dostępu przez indeks | type Name = User["name"]; |
Zawężanie typów (narrowing)
Zawężenie unii do jednego typu w czasie działania.
| Operacja | Składnia |
|---|---|
| Sprawdzenie typeof | if (typeof x === "string") { … } |
| Sprawdzenie instanceof | if (e instanceof Error) { … } |
| Operator in | if ("name" in obj) { … } |
| Zawężanie przez równość | if (status === "done") { … } |
| Prawdziwość (truthiness) | if (value) { … } |
| Własny type guard | function isUser(x: any): x is User { return "id" in x; } |
| Unia z dyskryminatorem | type Shape = { kind: "sq"; size: number } | { kind: "ci"; r: number }; |
| Sprawdzenie wszystkich przypadków przez never | const _: never = shape; |
Enumy
Nazwane zbiory stałych.
| Operacja | Składnia |
|---|---|
| Enum liczbowy | enum Direction { Up, Down, Left, Right } |
| Enum tekstowy | enum Status { Idle = "IDLE", Done = "DONE" } |
| Użycie wartości | let d: Direction = Direction.Up; |
| Const enum (wstawiany w miejscu) | const enum Color { Red, Green, Blue } |
| Unia literałów (nowoczesne podejście) | type Status = "idle" | "done"; |
Utility types
Wbudowane pomocniki, które przekształcają istniejące typy.
| Operacja | Składnia |
|---|---|
| Wszystkie właściwości opcjonalne | Partial<User> |
| Wszystkie właściwości wymagane | Required<User> |
| Wszystkie właściwości tylko do odczytu | Readonly<User> |
| Wybór podzbioru kluczy | Pick<User, "id" | "name"> |
| Pominięcie jednego lub kilku kluczy | Omit<User, "password"> |
| Obiekt o podanych kluczach | Record<string, number> |
| Wykluczenie z unii | Exclude<"a" | "b" | "c", "a"> |
| Zachowanie tylko części unii | Extract<"a" | "b", "a" | "c"> |
| Usunięcie null / undefined | NonNullable<string | null> |
| Typ zwracany funkcji | ReturnType<typeof fn> |
| Krotka parametrów funkcji | Parameters<typeof fn> |
| Typ rozwiązanej obietnicy (Awaited) | Awaited<Promise<string>> |
Moduły
Import i eksport między plikami.
| Operacja | Składnia |
|---|---|
| Eksport nazwany | export function add(a: number, b: number) { … } |
| Eksport domyślny | export default class User { … } |
| Ponowny eksport | export { User } from "./user"; |
| Import nazwany | import { add } from "./math"; |
| Import domyślny | import User from "./user"; |
| Import samego typu | import type { User } from "./user"; |
| Import wszystkiego | import * as math from "./math"; |
| Dyrektywa z potrójnym ukośnikiem | /// <reference types="node" /> |
Najważniejsze opcje tsconfig
Flagi kompilatora, które warto znać.
| Opcja | Efekt |
|---|---|
"strict": true | Włącza wszystkie sprawdzenia trybu strict (zalecane). |
"target": "ES2022" | Wersja JavaScriptu generowana przez tsc. |
"module": "ESNext" | System modułów w wygenerowanym kodzie. |
"moduleResolution": "bundler" | Rozwiązuje moduły tak jak nowoczesne bundlery. |
"jsx": "react-jsx" | Włącza JSX dla React 17+. |
"esModuleInterop": true | Czystsze domyślne importy z modułów CommonJS. |
"skipLibCheck": true | Pomija sprawdzanie typów w node_modules (szybsze budowanie). |
"noEmit": true | Tylko sprawdzanie typów: generowanie kodu zostaw bundlerowi. |
Najczęściej używana składnia TypeScriptu na jednej stronie. Ten TypeScript cheat sheet to szybka ściąga do codziennej pracy z TS: typy podstawowe, interfejsy, aliasy typów, generyki, unie, zawężanie typów i wbudowane utility types. TypeScript opiera się na JavaScripcie, więc miej pod ręką JavaScript cheat sheet z podstawową składnią.
Wszystko tutaj to standardowy TypeScript, który kompiluje się przez tsc i działa wszędzie tam, gdzie nowoczesny JavaScript. Skopiuj to, czego potrzebujesz, albo uruchom dowolny fragment w edytorze online TypeScriptu, bez instalacji. Typy to dla ciebie nowość? Darmowy interaktywny kurs TypeScriptu w Coddy wprowadza je krok po kroku, zaczynając od JavaScriptu.
TypeScript cheat sheet: FAQ
Czy ten TypeScript cheat sheet jest darmowy?
Tak. Ten TypeScript cheat sheet jest całkowicie darmowy i nie wymaga rejestracji. Dodaj go do zakładek i wracaj, gdy potrzebujesz sprawdzić typ, interfejs albo utility type.
Czym różni się interfejs od aliasu typu?
Oba mogą opisywać kształt obiektu i w większości codziennych przypadków można ich używać zamiennie. Interfejsy można ponownie otwierać i rozszerzać w różnych plikach (łączenie deklaracji), co przydaje się przy typach bibliotek. Aliasy typów mogą nazywać unie, przecięcia, krotki i typy mapowane, czyli kształty, których nie wyrazisz przez
interface. Popularna zasada: używaj interface dla publicznych kształtów obiektów, a type dla unii, krotek i typów obliczanych.Czym różni się any od unknown?
any całkowicie wyłącza sprawdzanie typów: kompilator pozwoli zrobić z taką wartością wszystko. unknown jest bezpieczny typowo: zanim go użyjesz, musisz go zawęzić (przez typeof, instanceof lub type guard). Wybieraj unknown dla wartości z zewnętrznych źródeł, takich jak JSON.parse czy fetch: wymusza walidację przed użyciem.Czy muszę znać JavaScript przed nauką TypeScriptu?
Tak. TypeScript to JavaScript z nałożonym systemem typów, więc każda umiejętność z JavaScriptu się przydaje. Jeśli wciąż budujesz podstawy JS (tablice, obiekty, async/await), dobrym punktem startu jest JavaScript cheat sheet, a darmowy kurs JavaScriptu w Coddy omawia to samo interaktywnie.
Czy mogę ćwiczyć TypeScript online?
Tak. Otwórz edytor online TypeScriptu, aby uruchomić dowolny fragment z tej ściągi w przeglądarce, bez instalacji. Gdy chcesz nauki krok po kroku, zacznij od kursu JavaScriptu i nakładaj na niego typy z tej strony.
Powiązane materiały
Więcej ściąg
