Перапісваўка на мову Go у TypeScript 7: што гэта значыць для безпекі типаў у React

Кампайляр, перапісаны на Go, адносна лепшая інферэнція типаў, і ўсё менш прычын залишаць свае праблэмы без типавання.

Уявіце сабе кодбазу меркавога розмера на React, дзе стандартны запуск tsc трывае пад 45 секунд за першы раз пад час кампайлявання. Вам даводзіцца стаяць пры тэрмінале, пераспрашваючы ся пра кожную архітэктурную рашынку, якая прывела вас да гэтага стану. TypeScript 7 обяцвае ператворыць гэты сценарый у частку минулага. Гэта не проста звычайная апдэйтавання — гэта пачатковая перабудова кампайляра, і якщо React ўжо є вашым ўласным інструментам, це вартае увагі.

Што насправды змянілася ў TypeScript 7?

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

Для разработчыкаў React упэўнена выдзеляюцца тры змяны:

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

Практычны адзінак для кодавых базаў React

Код на React значна частка залежыць ад такіх патэранаў, як useState<T>, useReducer, спецыяльных хуків і прадастчыкаў контэксту. Саме ў гэтых месцах з інференціяй типаў самыя большыя выгоды дае перапісванне у TypeScript 7.

Рэальны прыклад: стварэнне спецыяльнага хука

Разглядзім типавы хук useFetch, напісаны старым спосабам, дзе інференція часта становіць any у месцах выяўлення адзінакоў:

// Before: inference sometimes widens to `any` on error branches
function useFetch<T>(url: string) {
  const [data, setData] = useState<T | null>(null);
  const [error, setError] = useState<unknown>(null);

  useEffect(() => {
    fetch(url)
      .then((res) => res.json())
      .then(setData)
      .catch(setError); // error type was loosely inferred here
  }, [url]);

  return { data, error };
}

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

// After: TS7 narrows error handling paths more precisely
function useFetch<T>(url: string) {
  const [data, setData] = useState<T | null>(null);
  const [error, setError] = useState<Error | null>(null);

  useEffect(() => {
    fetch(url)
      .then((res) => res.json() as Promise<T>)
      .then(setData)
      .catch((err: unknown) => {
        setError(err instanceof Error ? err : new Error(String(err)));
      });
  }, [url]);

  return { data, error };
}

Рэкамендаваныя наступныя крокі

• Парадоксальна апгрэйдаванне паступова. TypeScript 7 створаны з урахоўкай адваротнай сумеснасці, але вартуе пераканацца ў правямленні вашага процесу зборкі прыштоўку яго ў пашчотную версію.
• Працаваце над аудытам гэнерыкаў, якія викорыстоўваюцца ў вашых спецыяльных хукі і прадаўцах контэксту — строгейшыя правілы можа выявіць багі, якія ранейш чыста былі непазначальныя.
• Пасля міграцыі зноў запускайце тэсты CI. Лячнае падвышэнне швальнасці кампайляра сама по сабе можа значна скорасці ваш працэс зборкі.
• Чакайце, што інструменты экасістэмы, такія як Next.js, Vite і ESLint, будуць патрабаваць часу, каб цэлком адпрацаваць новыя можлівасці, прычым усё не будзе вялікай проблемай.

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

Узагальненне: TypeScript 7 — это не новая сынтаксіс, якую трэба выучыць; це кампайляр, які нарэшце адгукнуўся да таго, як на практыцы працуюць велікія React-прыемлі. Якщо у вашай каманде часта чувацца скаргі на „павольнае працаванне TypeScript“, гэта выдання заслуговае на вашу увагу. Толькі пераканайцеся, што вы рэшытна працавалі з вашым кодам перад тым, як запускаць яго всюды.