Галоўная / Артыкулы / Тыхія успехі TypeScript 6 і прычыны, за якімі старшыя разработчыкі викорыстоўваюць JavaScript

TypeScriptJavaScriptReactNode.jsBest Practices

Тыхія успехі TypeScript 6 і прычыны, за якімі старшыя разработчыкі викорыстоўваюць JavaScript

Адзнакайце тыя функцыі TypeScript 6, якія застаюцца незаўважанымі, такія як чыстая калектываванне рэсурсаў і параметры типу const, а таксама ідіумы JavaScript, на якія ўпараюцца высокакваліфікаваныя інжынеры ў сваей ўласной працы ўсё дзень.

1228 слоў

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

Тихія апдэйты TypeScript 6, якія варта застосаваць

Большая частка абаратнасці пра TypeScript 6 зупыняецца на тым, што строгі режым і ES2025 тепер ўважаюцца стандартнымі настройкамі. Це справжня змяна, але яна затьмарыла некалькі менш значных дадзенняў, якія тылуцьна усунулі давно існуючыя альтернатывныя способы. Якщо вы чыталі толькі заголовкі tsconfig-default, вы працягнуліся болей корыстной часткай выходу новай версіі.

Чыстка, пра якую не трэба памяцать

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

function readUserSession() {
  using session = openSession(); // auto-disposed at scope end
  const user = session.getUser();
  return user.name;
} // session.dispose() called automatically here

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

Літеральныя типы без неабяжлівага викорыстоўвання as const па всім коду

Ранейш, каб захаваць літеральныя типы ў недзеянай форме праз гэнерычныя функцыі, было неабходна размешчаць as const па всім коде. У TypeScript 6 былі адкрытыя параметры типу const, якіе автаматычна захоўваюць інференцію літералав.

function createConfig<const T extends Record<string, unknown>>(config: T) {
  return config;
}

const config = createConfig({
  env: "production",
  features: ["auth", "billing"],
});
// config.env is "production", not string
// config.features is readonly ["auth", "billing"], not string[]

Якща вы ствараеце кліенты API з типаваннем або пішаце функциі для стварэння дзейнасцяў у Redux, гэта пазбавляе вас большай часткі шаблонавага коду з as const, які інакш быў неабходны.

Правильнае звужэнне ўнутрь switch (true)

Іншая практычная паўстановка: тепер дзеяння з дискримінаванымі аюніямі можна правільна звузіць унутрь оператара switch (true), што ранейш вымагало викорыстоўвання вялікіх ланцаў if/else, каб компайлер зрозумеў вашы типы.

function area(shape: Shape): number {
  switch (true) {
    case shape.kind === "circle":
      return Math.PI * shape.radius ** 2; // narrowed to Circle
    case shape.kind === "rectangle":
      return shape.width * shape.height; // narrowed to Rectangle
  }
}

Завдягаючы гэтыя змены, вам больш не трэба адказвацца ад switch, лячна толькі парадынуць типы.

Temporal атрымлеў першасортныя типы

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

const meetingStart = Temporal.Instant.from("2026-04-06T10:00:00Z");
const localTime = meetingStart.toZonedDateTimeISO("America/Toronto");

Імпорты падшляхоў, якія насправды работаюць

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

import { User } from "#/models/user.js";
// instead of ../../../models/user.js 🙃

Менеджер практык TypeScript, Дэніел Розенвасэр, апісаў TS6 як спецыяльны мост да будучага TypeScript 7, створанага на базе Go, што паводзіць да заключэння, што гэтыя функцыі не ўжо эксперыментальныя — яны задуманы застацца. Якщо ваша команда працуе з кодам на JavaScript, React чыясь Next.js, адхоўванне гэтых прыемаў ўжо зараз дапаможа утримаць меньшае количество неспадзянак праз прыход TypeScript 7. У цэлы, TypeScript 6 — гэта не толькі новыя стандартныя настройкі кампайляра; ён таксама забезпечвае кращую обработку рэсурсоў, адносна точнейшую інференцію типаў і меньш колькість ручных рашэнняў. Выпробаванне параметраў типа using і const у вашай наступной просьбе прайм-рэферэнса можа змусіць вас задумацца, як вы моглі обходзіцца без іх.

Прыемы JavaScript, якія адзначаюць кваліфікованы код ад іншаго

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

Неабавязковая ланцоўка і з’еднанне з нульмовым значэнням

У замене на ланцоўкі на кшталт user && user.profile && user.profile.name старшы код апіраецца на неабавязковую ланцоўку, якая ўжо ўзаеднана з з’еднанням з нульмовым значэнням.

const displayName = user?.profile?.name ?? 'Guest';

Гэта стислае, захіщае ад відсутных значэнняў і не выклікае проблем, калі код навакола перерабляецца.

Разбіранне з значэннямі-значальнікамі

Разбіранне прызначэнняў, адпаведных API-адказаў і аргументаў функцый — з разумнымі значэннямі-значальнікамі — ў такім рэвэле ёсць часткаю звычайнага практыкавання.

function createUser({ name, role = 'member', isActive = true }) {
  return { name, role, isActive };
}

Адаптаваючы такі спосаб, мы безпасебна фіксам патрабаваны формат дадзейна працэйна ў самай падписі функцыі.

Async/Await заместа ланцоўкі прамісаў

Ланцоўка .then().then().catch() яшчэ працюе, але ў момент зростання логіки яна паслабае свою эфектыўнасць. Пораўняйце яе з версіяю на async/await:

async function fetchOrders(userId) {
  try {
    const res = await fetch(`/api/orders/${userId}`);
    if (!res.ok) throw new Error('Failed to fetch orders');
    return await res.json();
  } catch (err) {
    console.error('Order fetch failed:', err);
    throw err;
  }
}

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

Методы масіва заместа ручных цыклаў

Вжыванне методаў map, filter, reduce і find заменяе большасць ручна напісаных for-цыклаў.

const activeAdmins = users
  .filter((u) => u.isActive && u.role === 'admin')
  .map((u) => u.email);

Гэта значыць меньшае колькасць змінных і меншае колькасць памылак, вызваных адхіленнем на адзин.

Тыпы-інструменты заместа дублюючыхся інтэфейсаў

У замест на перазначэнне практычна ідентычных інтарфейсаў, апытны код на TypeScript выкарыстоўвае тыпы-інструменты, такія як Partial, Pick і Omit.

type UserFormInput = Pick<User, 'name' | 'email'> & Partial<Pick<User, 'phone'>>;

Это дазволяе застаўляць адну егзактывную базу даных, таму для змян схемы патрабуецца адкорэктаваць менш локацый.

Hooks і складаванне ў React

Спецыяльныя hooks, якіе выдзеймаюць і закапсулююць логіку, стаўляюцца ў постоянным выкарыстанні ў апытных кодавых базах React.

function useDebouncedValue(value, delay = 300) {
  const [debounced, setDebounced] = useState(value);

  useEffect(() => {
    const timer = setTimeout(() => setDebounced(value), delay);
    return () => clearTimeout(timer);
  }, [value, delay]);

  return debounced;
}

Такі hook дазволяе павторна выкарыстоўваць асновную логіку і тэставаць яе незалежна ад конкретнага компонента.

Структураваная адправа стану

Для адправы стану многія апытныя каманды вядома выбіраюць фрагменты Redux Toolkit замест ручна напісаных редукераў, створаных на базе оператараў switch, адтолькі ў RTK зменшуецца канстантны код, а таксама без дапамогі іншых засобаў даёцца можлівасць застаўляць імутабельнасць за дапамогай Immer.

Як згадваў Даглас Крокфорд, JavaScript складаецца з „хорашых і паслабных сторон“ — тая ж гнучкасць, якая робіць мову моцной, таксама спрыяе плутанню. Вмесце ў тое, калі спылівацца, якія елементы викорыстоўваць, і ўжо адзначае аптымістычных інжынероў ад тых, якія ўсё ще шукаюць сабе месца.

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

Спадневана літэратура

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