TypeScript с нуля: типы, интерфейсы, дженерики

export function subtotal(order) {
  return order.items.reduce((sum, item) => sum + item.price * item.quanity, 0);
}

export function discount(order) {
  return Math.round(subtotal(order) * order.promo.percent / 100);
}

export function statusLabel(status) {
  if (status === "new") return "Новый";
  if (status === "paid") return "Оплачен";
  if (status === "shipped") return "Отгружен";
}

import { discount, statusLabel, subtotal } from "./orders.js";

const order = {
  id: 1042,
  status: "cancelled",
  items: [{ sku: "CAP-M", name: "Капучино", price: 1600, qty: 2 }],
};

console.log(subtotal(order));
console.log(statusLabel(order.status));
console.log(discount(order));

$ node js/main.js
NaN
undefined
…\js\orders.js:6
  return Math.round(subtotal(order) * order.promo.percent / 100);
                                                  ^

TypeError: Cannot read properties of undefined (reading 'percent')
    at discount (…/js/orders.js:6:51)
    at …

Node.js v24.18.0

mkdir orders-ts
cd orders-ts
npm init -y
npm install -D typescript
npx tsc -v

{
  "name": "orders-ts",
  "private": true,
  "type": "module",
  "scripts": {
    "check": "tsc --noEmit",
    "start": "node src/main.ts"
  },
  "devDependencies": {
    "typescript": "^7.0.2"
  }
}

{
  "compilerOptions": {
    "strict": true,
    "noUncheckedIndexedAccess": true,
    "target": "es2024",
    "module": "nodenext",
    "noEmit": true,
    "erasableSyntaxOnly": true,
    "verbatimModuleSyntax": true,
    "rewriteRelativeImportExtensions": true
  },
  "include": ["src"]
}

import type { Order, OrderStatus } from "./types.ts";

export function subtotal(order: Order): number {
  return order.items.reduce((sum, item) => sum + item.price * item.quanity, 0);
}

export function discount(order: Order): number {
  return Math.round(subtotal(order) * order.promo.percent / 100);
}

export function statusLabel(status: OrderStatus): string {
  if (status === "new") return "Новый";
  if (status === "paid") return "Оплачен";
  if (status === "shipped") return "Отгружен";
}

$ npm run check

> check
> tsc --noEmit

src/orders.ts(4,68): error TS2339: Property 'quanity' does not exist on type 'OrderItem'.
src/orders.ts(8,39): error TS18048: 'order.promo' is possibly 'undefined'.
src/orders.ts(11,51): error TS2366: Function lacks ending return statement and return type does not include 'undefined'.

let total = 0; // вывод типа: number
total = "6540 ₸";

const names = ["Капучино", "Чизкейк"]; // string[]
const count = names.length; // number

// у параметров аннотации нужны, тип результата (number) выведен сам
function lineTotal(price: number, qty: number) {
  return price * qty;
}

// без аннотации параметр получил бы неявный any — strict это запрещает
function fee(order) {
  return order.delivery.fee;
}

$ npx tsc --noEmit
src/inference.ts(2,1): error TS2322: Type 'string' is not assignable to type 'number'.
src/inference.ts(13,14): error TS7006: Parameter 'order' implicitly has an 'any' type.

export type OrderStatus = "new" | "paid" | "shipped" | "cancelled";

export interface OrderItem {
  readonly sku: string;
  name: string;
  price: number; // тенге за штуку
  qty: number;
}

export interface Promo {
  code: string;
  percent: number;
}

export type Delivery =
  | { kind: "pickup" }
  | { kind: "courier"; address: string; fee: number };

export interface Order {
  readonly id: number;
  customer: string;
  status: OrderStatus;
  items: OrderItem[];
  promo?: Promo;
  delivery: Delivery;
}

import type { Order } from "./types.ts";

function renumber(order: Order) {
  order.id = 1; // id объявлен как readonly
  order.items[0].sku = "NEW"; // sku тоже readonly; и элемента [0] может не быть
  order.promo.percent = 50; // promo необязателен
}

$ npx tsc --noEmit
src/readonly.ts(4,9): error TS2540: Cannot assign to 'id' because it is a read-only property.
src/readonly.ts(5,3): error TS2532: Object is possibly 'undefined'.
src/readonly.ts(5,18): error TS2540: Cannot assign to 'sku' because it is a read-only property.
src/readonly.ts(6,3): error TS18048: 'order.promo' is possibly 'undefined'.

import type { Delivery, Order, OrderStatus } from "./types.ts";

export function subtotal(order: Order): number {
  return order.items.reduce((sum, item) => sum + item.price * item.qty, 0);
}

export function discount(order: Order): number {
  if (order.promo === undefined) {
    return 0;
  }
  // здесь order.promo уже имеет тип Promo, а не Promo | undefined
  return Math.round((subtotal(order) * order.promo.percent) / 100);
}

export function deliveryFee(delivery: Delivery): number {
  switch (delivery.kind) {
    case "pickup":
      return 0;
    case "courier":
      return delivery.fee; // fee есть только у курьерской доставки
  }
}

export function orderTotal(order: Order): number {
  return subtotal(order) - discount(order) + deliveryFee(order.delivery);
}

export function statusLabel(status: OrderStatus): string {
  switch (status) {
    case "new":
      return "Новый";
    case "paid":
      return "Оплачен";
    case "shipped":
      return "Отгружен";
    case "cancelled":
      return "Отменён";
    default: {
      // сюда можно попасть, только если в OrderStatus появится новый статус
      const unhandled: never = status;
      return unhandled;
    }
  }
}

$ npx tsc --noEmit
src/orders.ts(40,13): error TS2322: Type '"refunded"' is not assignable to type 'never'.

// T — параметр типа: «какой массив пришёл, элемент такого же типа и вернётся»
export function first<T>(items: readonly T[]): T | undefined {
  return items[0];
}

// T обязан иметь числовое поле id — это ограничение (constraint)
export function findById<T extends { id: number }>(
  items: readonly T[],
  id: number,
): T | undefined {
  return items.find((item) => item.id === id);
}

// K — только существующие ключи T, а результат — массив значений этого поля
export function pluck<T, K extends keyof T>(items: readonly T[], key: K): T[K][] {
  return items.map((item) => item[key]);
}

import type { Order } from "./types.ts";
import { first, pluck } from "./utils.ts";

function report(order: Order) {
  const prices = pluck(order.items, "price"); // number[]
  const titles = pluck(order.items, "title"); // такого поля нет
  const top = first(order.items);
  console.log(top.name); // first может вернуть undefined
}

$ npx tsc --noEmit
src/generic-error.ts(6,37): error TS2345: Argument of type '"title"' is not assignable to parameter of type 'keyof OrderItem'.
src/generic-error.ts(8,15): error TS18048: 'top' is possibly 'undefined'.

const fromAny: any = JSON.parse(`{ "total": 6540 }`);
fromAny.totl.toFixed(); // компилятор молчит — упадёт при запуске

const fromUnknown: unknown = JSON.parse(`{ "total": 6540 }`);
fromUnknown.total; // ошибка: сначала докажите, что это объект с полем total

if (typeof fromUnknown === "object" && fromUnknown !== null && "total" in fromUnknown) {
  console.log(fromUnknown.total); // тип поля здесь — unknown, его тоже нужно проверить
}

$ npx tsc --noEmit
src/unknown.ts(5,1): error TS18046: 'fromUnknown' is of type 'unknown'.

import type { Delivery, Order, OrderItem, OrderStatus, Promo } from "./types.ts";

function isRecord(value: unknown): value is Record<string, unknown> {
  return typeof value === "object" && value !== null;
}

function isStatus(value: unknown): value is OrderStatus {
  return value === "new" || value === "paid" || value === "shipped" || value === "cancelled";
}

function isItem(value: unknown): value is OrderItem {
  return (
    isRecord(value) &&
    typeof value.sku === "string" &&
    typeof value.name === "string" &&
    typeof value.price === "number" &&
    typeof value.qty === "number"
  );
}

function isPromo(value: unknown): value is Promo {
  return isRecord(value) && typeof value.code === "string" && typeof value.percent === "number";
}

function isDelivery(value: unknown): value is Delivery {
  if (!isRecord(value)) return false;
  if (value.kind === "pickup") return true;
  return (
    value.kind === "courier" &&
    typeof value.address === "string" &&
    typeof value.fee === "number"
  );
}

export function parseOrder(json: string): Order {
  const data: unknown = JSON.parse(json);

  if (
    !isRecord(data) ||
    typeof data.id !== "number" ||
    typeof data.customer !== "string" ||
    !isStatus(data.status) ||
    !Array.isArray(data.items) ||
    !data.items.every(isItem) ||
    !isDelivery(data.delivery)
  ) {
    throw new Error("Сервер вернул заказ в неожиданном формате");
  }

  const order: Order = {
    id: data.id,
    customer: data.customer,
    status: data.status,
    items: data.items,
    delivery: data.delivery,
  };
  if (isPromo(data.promo)) {
    order.promo = data.promo;
  }
  return order;
}

import { orderTotal, statusLabel } from "./orders.ts";
import { parseOrder } from "./parse.ts";
import { findById, first, pluck } from "./utils.ts";

// так мог бы выглядеть ответ сервера — пока это просто строка
const response = `{
  "id": 1042,
  "customer": "Алия",
  "status": "paid",
  "items": [
    { "sku": "CAP-M", "name": "Капучино", "price": 1600, "qty": 2 },
    { "sku": "CHS-1", "name": "Чизкейк", "price": 2400, "qty": 1 }
  ],
  "promo": { "code": "AUTUMN", "percent": 10 },
  "delivery": { "kind": "courier", "address": "ул. Абая, 10", "fee": 1500 }
}`;

const order = parseOrder(response);

console.log(`Заказ ${order.id}: ${statusLabel(order.status)}`);
console.log(pluck(order.items, "name").join(", "));
console.log(`К оплате: ${orderTotal(order)} ₸`);

const top = first(order.items); // тип: OrderItem | undefined
console.log(top?.name ?? "корзина пуста");

const found = findById([order], 1042); // тип: Order | undefined
console.log(found ? "нашли заказ" : "нет такого заказа");

try {
  parseOrder(`{ "id": "1042" }`);
} catch (error) {
  console.log(error instanceof Error ? error.message : error);
}

$ npm run check && npm start

> check
> tsc --noEmit


> start
> node src/main.ts

Заказ 1042: Оплачен
Капучино, Чизкейк
К оплате: 6540 ₸
Капучино
нашли заказ
Сервер вернул заказ в неожиданном формате