Галоўная / Артыкулы / TypeScript 6.0: Адказанне пра кампайлярных змянэннях і владанне генерікамі

TypeScriptCompilerGenericsType SafetyJavaScript

TypeScript 6.0: Адказанне пра кампайлярных змянэннях і владанне генерікамі

Паспрацавае над змянамі ў компіляры TypeScript 6.0, якія стосуюцца переходнага перыяду, і паказвае, як выкарыстоўваць генерыкі для стварэння болей безпечнага і болей відновлюванага коду на рэвэле типаў.

2691 слоў

TypeScript продовжае развівацца двумя напрамкамі адночасна: сам кампайляр стае моцнейшым і швэдзейшым, а найпотужнейшы ўстрыё типаў — гэнерыкі — застаецца ключам да стварэння коду, які залишаецца безпечным праз збільшэнне ў размерах. Розумеўшы, якія змены ў TypeScript 6.0 відбуліся на внутршняй архітектуре, і опанаваўшы гэнерыкі, вы отримаеце чыстую картыну таго, як пісаць TypeScript, які будзе прыдатны для наступных версый і справжна можа быць перызначаны. Пачніце з змян у кампайляры, адколькі вони задаюць базовыя стандарты, на якіх будзе працаваць кожны код, ў якім многа гэнерыкаў.

Перашыя версіі на шляху да натыўнага кампайляра

TypeScript 6.0 — гэта не столькі новая версія з актуальнымі функцыямі, як скорэй мост. Команда TypeScript чыста адзначыла яго як перашаговую версію: гэта пасляпэўні выданне, створанае на аснове первачальнага кодавая базы, заснованай на JavaScript, прычыму версія TypeScript 7.0 будзе цэлым перапісаннем на мову Go. Якщо апгрэйд да 6.0 здаецца незвычайна тыхім, гэта спецыяльна так задумана. Большасць значных змян залишаецца на версію 7.0.

Што на самай працоўцы змінілася

У версіі 6.0 з’явілася калькі конкрэтных змян:

  • Режым строгасці тепер ўсталяваны як стандарт для новых проектаў. Вам больш не трэба явна задаваць "strict": true — у замен кодавыя базы, якія выкарыстоўваюць слабую типавую систему, павінны явна задаць "strict": false. Намеры команды ясныя: яны хочуць, каб вы рашылі проблемы з типамі, а не толькі іх приховвалі.
  • Масэв types па значыцьці ўсталенай наладзе ёсць пусты. У TypeScript раней автаматычна завантажваліся всі пакеты пад node_modules/@types. Ёнтолькі як толькі вы явна перыявляеце іх, завантажваецца што-небудзь, што можа значна скасціць часы стварэння проектаў большага размеру.
  • target і module па значыцьці ўсталенай наладзе яўляюцца es2025 і esnext адпаведна. Выпуск выходных дадзеных у старым формате ES5 фактычна ўжо не выкарыстоўваецца.
  • Праявіліся типы аб’екта Native Temporal API, якія дазволяюць статычна і безпечна кераваць датамі та часам, не павярнуваючыся да бібліятэкаў такіх як date-fns чы Luxon. Гэта галоўная функцыя, якой прасілі разработчыкі.
    • // Before: juggling Date math and timezone offsets manually
const deadline = new Date(Date.now() + 86400000);

// TypeScript 6.0: Temporal makes intent explicit
const now = Temporal.Now.zonedDateTimeISO("Asia/Kolkata");
const deadline = now.add({ hours: 24 });
    • Якасць аналізу пакета павышаецца для функцый, якія не выкарыстоўваюць this, а TypeScript тепер падтрымляе імпорты падзеяў з прыфіксам #, а таксама можа сумаваць параметры moduleResolution: bundler з module: commonjs — такое сумаванне раней не было можлівым.
    • Стандартная біблія атрыбутуе методы Map.getOrInsert, Map.getOrInsertComputed і вбудованы метод RegExp.escape(), чым не трэба вжываць спецыяльныя засобы для экрапсавання.
    • Параметр --baseUrl ўстаўлены як застарэлы. Пераканцуйце выкарыстанне псевдонімаў шляхоў на параметр paths у вашым tsconfig прычынай таго, што baseUrl будзе цэлкам адмовлены ў версіі 7.0.

    Чаму важнае пераходны стан

    Працэўніца, якая стоіць за гэтым выласкам, як яе апісвае команда TypeScript, — гатаваць разработчыкаў да версіі 7.0, якая прыносіць кампайляр на адной з базаў Go, які обяцвае стварэнне версый на 40-60% быстрейшая за сучасныя. Практычны вынік — гэты выласк ёсць вашым домашнім завадам: адразу усуніце паведамленні пра занепад функцый, і версія 7.0 будзе спрыяць безкоштовнам падыгранню працэздатнасі, а не стане перашкодай у роботе, болейш таму, што ўжо існуюць сучасныя рэантаймы Node.js.

    Што зрабіць перад выласкам 7.0

    • Запустіце tsc --init і рассмотрзіце новыя паведамленні пра адміністратыванне ў строгам режыме, якія з’яўляюцца ў раннім перыодзе.
    • Перакладзіце настройкі з baseUrl на paths яшчэ зараз, перш чым ўсе гэта будзе выключана.
    • Явна задайце масэвую types, замест таго каб пакладацца на аўтаматычнае завантажэнне.
    • Пачніце вводзіць Temporal у код, які выкарыстоўваецца ў звычайных абліках чы з меньшым рызыкам, каб прывыкнуць да яго.

    TypeScript мае давнюю історію ператварэння сучасных найкращых практык у стандарты наступных версій. Версія 6.0 — це спакоўны перыяд перед тым, як настане будучыня з максимальной швалю компіляцыі; выкорыстаўце яе, каб прывести свою настройку ў порядак, так што калі з’явится 7.0, пераход будзе практычна непазначальны.

    Ад дисцыпліны настройкі да мышлення на рэвэле типаў

    Апдэйты версій і флагі компілятора — це толькі палова історыі стварэння надзеяных проектаў на TypeScript. Іншая палова — гэта веда, як структураваць саве типы так, каб компілятор практычна мог ўсуперакцыяваць вам; і гэта прыводзіце нас да генерыкаў, якія, можна сказаць, єдынія функцыялі, якія розлучаюць разработчыкаў, якія боруцца з системай типаў, ад тых, якія вжываюць яе вмела.

    Практычна кожны разработчык TypeScript сталкаецца з той самай проблемай. Спачатку гэты язык здаецца падобным рэтельнаму бібліятекару, які стежыць за кожным вашым рухам: вы пішаеце інтэрфейс для User, ўзгодны інтэрфейс для Product, ўзгодны інтэрфейс для BlogPost, і все застаецца апранутым і безпечным.

    Потым база коду пачынае растаць.

    Вам патрэбны функцыі, якія запрашаюць данні User з API, потым функцыі для Product, а пасля — для BlogPost. Але інодзе люди намагаюцца скорыць падход, напісавшы адну спяльную обгортку, і тады патрапляюць у проблемы з компіляцыяй, а ў канцы канцоў пачынаюць вжываць any всюды, толькі каб зниклі чырвоныя пазначкі — несвядома адмахваючыся ад захоўнага механізма, які мягчыла б TypeScript.

    Гэта самае тая пераканалка, якая зупіняе багато разработчыкаў. Ёй працаваць можна толькі пасля асабістага разумення гэнерыкаў.

    Генерыкі — гэта не тэхнічны трюк, які трэба запам’ятаваць для спакану. Це структурная база коду, яка можа відбывацься занову, быць падтрымлівай і масштабаваемай. Калі вы зрозумеўце гэтыя прынцыпы, вы перестанете ручна ствараць павтаральны код і начнете проектаваць системы так, як це робіць дапытны інжынер.

    Стварэнне правильной ментальной моделі

    На час забудзіце формальную нарадку комп’ютерных наук і падумайце пра тое, як ведае ся звычная функцыя JavaScript. Вы ніколі не задаеце жорсткага значэння ў тэле функцыі:

    // Hardcoded: Only works for one specific person
function greetRahul() {
  return "Hello, Rahul!";
}

// Dynamic: Uses a parameter as a placeholder for data
function greet(name: string) {
  return `Hello, ${name}!`;
}

    Параметр name — гэта проста замена для значэння, якое будзе задана пазней, пад час вызову.

    Гэнерычны элемент працюе абсалютна так сама — толькі заместо значэння ён выступае заместо тыпу. Функціі, класы і інтерфейсы можаць прыймать тыпы як аргументы, так сама як звычныя функціі прыймають значэння як аргументы.

    Уявіце сабе звычную картонную коробку для перавозкі. У заводзе ніхто ўсё яшчэ не ведае, чы гэта будзе ноутбук, пара адзінакоў чы керамічны стакан — гэта проста гэнерычны контейнер, Box<T>. Якщо падместі ў яго ноутбук, то ён стане Box<Laptop>; якщо адзінакі, то Box<Shoes>. Сама коробка не разлічваецца з ўместам, але вы завжды ведаеце, што ўнутры: як толькі ачыніце Box<Laptop>, вы ведаеце, што можна яго запусціць; як толькі ачыніце Box<Shoes>, вы ведаеце, што можна іх надеты. Няма нічога, пра што трэба было б гадаць.

    Адыяктуальныя рашэнні для абсалютнага зняць проблемы дуплікацыі

    Разглядзім прыемнік, який абгрупавае данні разам з метаданымі, такімі як час падзеі і генераваны ID. Без адыяктуальных структур вам даведзецца пісаць практычна ідэнтычныя прыемнікі для кожнага модэлю ў вашай аплікацыі:

    // The Brute-Force Approach: Duplicate functions for every entity
interface User {
  name: string;
  role: string;
}

interface Product {
  title: string;
  price: number;
}

function wrapUser(item: User) {
  return {
    id: crypto.randomUUID(),
    createdAt: new Date(),
    data: item,
  };
}

function wrapProduct(item: Product) {
  return {
    id: crypto.randomUUID(),
    createdAt: new Date(),
    data: item,
  };
}

    Это явна адхылэнне ад прынцыпа DRY — двадцать модэляў даных значыць двадцать практычна ідэнтычных функцый-прыемнікаў.

    Пашчатковы спосаб — выкорыстаць any, ў результате чаго дуплікацыя зникае:

    function wrapItem(item: any) {
  return {
    id: crypto.randomUUID(),
    createdAt: new Date(),
    data: item,
  };
}

const wrapped = wrapItem({ name: "Alex", role: "Admin" });

// TypeScript has no idea what 'wrapped.data' is!
// Autocomplete is dead. Typos will crash in production.
console.log(wrapped.data.nonExistentProperty); // Compiles without error, fails at runtime!

    Кампайлер перестае выдаць паведамленні, але за гэтыя «тышу» вам даведзецца падарожваць без абярання типаў, автодаполнення і можлівасця абэрнфактарынгу — саме таго, што існуе TypeScript для забезпечэння.

    Лепшы спосаб — выразіць той самы прыемнік адыяктуальна:

    function wrapItem<T>(item: T) {
  return {
    id: crypto.randomUUID(),
    createdAt: new Date(),
    data: item,
  };
}

    Сінтаксіс <T> адзейнае тры ролі. Перша — гэта прызначаеяць зменную типу пад назвай T, якая будзе викорыстоўваная гэтай функцыяй. Друга — калі параметр паказаны як (item: T), значыць тип аргумента будзе тым, кім стане T пад час вызову функцыі. Трэця — адтакоў, калі тип выходных даных таксама апісваецца за дапамою T, точны тип вхідных даных пераходзіць без змян у выходныя даныя, у гэтым случае як data: T.

    const userResult = wrapItem({ name: "Alex", role: "Admin" });

// TypeScript automatically infers that T is { name: string; role: string }
console.log(userResult.data.name); // Full autocomplete works!
console.log(userResult.data.invalidProp); // Error: Property 'invalidProp' does not exist!

    Якщо вызваць гэтую функцыю з об’ектам, які падобны на User, то TypeScript аўтаматычна выважвае значэнне T — няма патрэбы ў анотаціях — і пераносіць гэты выважаны тип да атрыбута data, які вяртаецца, таму userResult.data.name мае можлівасць павнага автодаполнення і пераканання типу, у протыяўнасці да слепага даверлівання, якое бы прымусіла вас наявнасць типу any.

    Дадзенне межаў з абмежэннямі

    Застаўленне T абсалютна без абмежэнняў падходзіць для звычных дапаможніх функцый у стыле ідэнтыфікатораў, але багато рэальных функцый павінны ўзяць за даннасць шэйп своіх вхідных дадзенняў. У замест на тое, каб прымаць буквальна ўсё, часта хочацца сказаць "будзь-які тип, як толькі ён выглядае так". Самэ гэта і даюць генерычныя абмежэння, выкарыстоўваючы ключавае слова extends, каб вакуумаваць тое, чым T можа быць.

    Разглянем функцыю, якая мае выдрукаваць унікальны ID аб’екта:

    // This causes a compiler error!
function printId<T>(entity: T) {
  console.log(entity.id);
  // Error: Property 'id' does not exist on type 'T'.
}

    Гэта не можа скомпілявацца, таму што нічога не паведамляе TypeScript, што T мае поле id. T можа быць проста number, boolean, null або порожнім об’ектам, жадны з якіх не гарантуе наявнасць поля .id.

    Рашэнь — абмежыць T да формы, якая зключае id:

    interface HasId {
  id: string | number;
}

function printId<T extends HasId>(entity: T) {
  // Safe! TypeScript guarantees entity has an 'id' property.
  console.log(`Entity ID: ${entity.id}`);
  return entity;
}

// Works perfectly:
printId({ id: 101, name: "Database Record" });
printId({ id: "usr_99", email: "dev@example.com" });

// Fails at compile time before hitting production:
printId({ name: "Unsaved Item" });
// Error: Argument of type '{ name: string; }' is not assignable to parameter of type 'HasId'.

    Запіс T extends HasId паведамляе кампайлеру, што ён можа прыйняць будзь-які тип, за ўмовы, што ён адпавядае мінімальный трэбованню — наявнасці атрыбута id.

    Безпечныя пошукі з ключамі за дапамою keyof

    Класычным выклікам багоў у JavaScript є адчыненне атрыбута, якога няма, часта з-за памылкі напісання, напрыклад user.fristName заместо user.firstName. Аднаўленне гэнерыкаў з аператаром keyof дазволяе ствараць інструменты, у якіх такія памылкі стаюць структурна немагчымымі.

    function getProperty<T, K extends keyof T>(obj: T, key: K): T[K] {
  return obj[key];
}

const employee = {
  id: 42,
  name: "Sarah Connor",
  department: "Security",
  isActive: true,
};

// Autocomplete offers: "id" | "name" | "department" | "isActive"
const empName = getProperty(employee, "name"); // Type inferred as: string
const empActive = getProperty(employee, "isActive"); // Type inferred as: boolean

// Typos are caught immediately:
const badProp = getProperty(employee, "deparment");
// Error: Argument of type '"deparment"' is not assignable to parameter of type '"id" | "name" | "department" | "isActive"'.

    Ось чаму гэты патэрн такі моцны:

    • T пазначае форму об’екта, з якім вы працуяце.
  • keyof T вяртае аб’яднанне всех правільных ключоў у T, напрыклад "id" | "name" | "department" | "isActive".
  • K extends keyof T вымагае, каб key быў адным з гэтых літэральных строкаў, нічога больш.
  • T[K] прымушвае тип вярнутага значэння падабецца на точны тип значэння, які зберагаецца пад гэтым ключам.

    • Тое, што выглядае як маленькая дапаможная функцыя, на самай працэ ёсць контракт часу кампілявання, які цалком выключае можлівасць памылак у назвах атрыбутаў.

    Проектаванне кліента API, які можна перыявляць

    Паza ізольаванымі інструментамі, гэнерыкі справаўна прадаюць свою цэну ў кодзе масштаба прыемлівай разработкі. Практычна кожны веб-дзялоўка супрацоўвае з якім-небудзь бэкендам, а большасць REST API-ў упаковваюць сваія адпаведзі в ўніфікаваны JSON-контейнер:

    {
  "status": "success",
  "statusCode": 200,
  "data": { ... },
  "message": "Operation successful"
}

    У замест на тое, каб післяўваць аддзельны тип адпаведзі да кожнага канцэнтра, можна з’явіць адны загальны шаблон і викорыстоўваць яго ў всіх месцах:

    // 1. The Generic Contract
interface ApiResponse<TData> {
  status: "success" | "error";
  statusCode: number;
  data: TData;
  message?: string;
}

// 2. The Pagination Envelope
interface PaginatedList<TItem> {
  items: TItem[];
  totalCount: number;
  page: number;
  pageSize: number;
}

    Калі такі контракт ўжо існуе, сам кліент HTTP стае значна болей компактным і можна яго викорыстоўваць знову:

    async function fetchApi<T>(url: string): Promise<ApiResponse<T>> {
  const response = await fetch(url);
  if (!response.ok) {
    throw new Error(`HTTP error! status: ${response.status}`);
  }
  return response.json();
}

// Concrete Domain Models
interface UserProfile {
  id: string;
  username: string;
  email: string;
}

interface OrderHistory {
  orderId: string;
  totalAmount: number;
  currency: string;
}

// Usage Example 1: Fetching a single user
async function loadUser() {
  const response = await fetchApi<UserProfile>("/api/v1/profile");

  // Fully typed:
  console.log(response.data.username);
}

// Usage Example 2: Fetching a paginated list of orders
async function loadOrders() {
  const response = await fetchApi<PaginatedList<OrderHistory>>("/api/v1/orders");

  // Fully typed nested structures:
  response.data.items.forEach(order => {
    console.log(`Order #${order.orderId}: ${order.totalAmount}`);
  });
}

    Прычынны эфект тут значны: без неабходнасці стварання аддзельнай функцыі запрашэння для кожнага маршруту, кожны канцэнтр автаматычна успадковуе пачоўную безпеку типаў ад запрашэння да адпаведзі, а таксама точнае автодаполненне і значна простыя утриманні на далекай перспективе.

    Выведзенне гэнерыкаў у компоненты UI, якія можна викорыстоўваць знову

    Той жа прынцып паўнастае і для слоя компанентаў. Якщо вы ствараеце інтэрфейсы ў React, Vue або звычных Web Components, верагодна вы калі-небудзь пісаўыя компоненты у вигляде выпадаючага меню, табелі або спісу. Без гэнерыкаў такія повторна вжываемыя компоненты часта перестаюць працаваць, як толькі патрабуецца адзначыць розныя форматы дадзеных.

    Вазьмімо за прыклад гэнерычны компонент табелі, створаны ў React:

    interface TableProps<T> {
  data: T[];
  renderRow: (item: T, index: number) => React.ReactNode;
  keyExtractor: (item: T) => string | number;
}

export function GenericTable<T>({ data, renderRow, keyExtractor }: TableProps<T>) {
  return (
    <table>
      <tbody>
        {data.map((item, index) => (
          <tr key={keyExtractor(item)}>
            {renderRow(item, index)}
          </tr>
        ))}
      </tbody>
    </table>
  );
}

    Його вжыце выглядае так:

    interface Customer {
  id: string;
  fullName: string;
  loyaltyPoints: number;
}

const customers: Customer[] = [
  { id: "c1", fullName: "Elena Rostova", loyaltyPoints: 450 },
  { id: "c2", fullName: "David Miller", loyaltyPoints: 1200 },
];

function CustomerList() {
  return (
    <GenericTable
      data={customers}
      keyExtractor={(customer) => customer.id} // customer is inferred as Customer!
      renderRow={(customer) => (
        <>
          <td>{customer.fullName}</td>
          <td>{customer.loyaltyPoints} pts</td>
        </>
      )}
    />
  );
}

    Заўважыце, што няма перакладу типа за дапамогай as Customer, няма any, і не трэба нічага здогадвацца. Якщо калі-небудзь колега перейменуе fullName на name у інтэрфейсе Customer, TypeScript адразу ж пакажае всі месцы ў UI, дзе яшчэ трэба адкоректаваць код.

    Забезпечэнне чытаемасці гэнерыкаў: тры прынцыпы

    Гэнерыкі ўзлётныя, але гэтая сіла спрыяе надмернай складнасці праектаў. Базы коду іноды запоўняюцца чагосьць на кшталт ProcessData<T, Record<string, T, U, V W extends keyof>>. Такі заплутаны стан часта называюць „Гэнерыкавым супам“, і ён ператварае інакш чысты код у гэтыку, з якою ніхто не хоча супакоўвацца.

    Тры прыкметнія звычкі дапамагаюць заставіць гэнерыкі чытабельнымі, а не заплутанымі. Аднам з распашчастых патэранаў, на якія варта зважаць, є введэнне параметра типу, які з’являецца толькі аднажды ў падписе функцыі:

    // ❌ OVER-ENGINEERED: T is only used once
function logMessage<T extends string>(message: T): void {
  console.log(message);
}

// ✅ CLEAN & DIRECT: No generic required
function logMessage(message: string): void {
  console.log(message);
}

    Якщо параметр типу викорыстоўваецца толькі аднажды, яго складнасць зазвычай няма падстав, і яго часта можна заменіць на конкрэтны тип.

    Узагадка: Змена мантэйпсу

    Адаптаванне коду пад адзін конкрэтны тип дадзейна робіць вас разработчыкам. Адаптаванне коду, який можа быць перадпісаны, складзены і захіщаны па типу для будь-каго типу дадзейна, — гэта тое, што адзначае высокакваліфікаванага разработчыка.

    Генерікі выводзяць вас з межаў павтаральнага, нестабільнага коду і прыводзяць да архітектур, якія з самага пачатку є гнучкімі і стойкімі. Калі наступны раз вы пабачыце, што копіюеце інтэрфейс, клонуеце дапаможную функцыю або выкарыстоўваете any, зупініцеся і запытайце ся, чы не могла б тая значэнне заместа таго стаць параметрам типу. Калі гэты інстынкт стане автаматычным, вы перестанете проста быстрэй пісаць код на TypeScript і начнете ствараць системы, якія ў великай меры захіщаны ад неспадзянак пад час выконання.

    Спадні матэрыялы

    Усе артыкулыДаслаць брыф