Новые функции в TypeScript 3.9

От автора: TypeScript 3.9 был недавно представлен. Ознакомьтесь с основными функциями новой версии, которая сосредоточена на производительности, скорости и стабильности.

TypeScript — это открытый, строго типизированный, объектно-ориентированный, скомпилированный язык, разработанный и поддерживаемый Microsoft. Это расширенное множество очень популярного JavaScript, используемого миллионами проектов (более 2 миллионов на GitHub), которое было создано, чтобы привнести статические типы в современный JavaScript. Компилятор TypeScript считывает код TypeScript, который имеет такие вещи, как объявления типов и аннотации типов, и выдает чистый и читаемый JavaScript-код с преобразованными и удаленными конструкциями. Этот код выполняется в любой среде исполнения ECMAScript, например, в ваших любимых браузерах и NodeJS.

Версия 3.9

Недавно команда Microsoft выпустила последнюю версию TypeScript и сосредоточилась на производительности, скорости и стабильности. Это означает радикальное уменьшение количества ошибок и сбоев приложений, и это также было сделано с помощью сообщества TypeScript. В этой статье мы рассмотрим обзор этих новых функций и исправлений.

Улучшения скорости

Некоторые популярные библиотеки и пакеты, такие как styled-components и даже material-ui, имеют очень низкую скорость компиляции. В этой новой версии авторы попытались решить данную проблему путем оптимизации многих кейсов, таких как большие объединения, пересечения, сопоставленные типы и условные типы. Таким образом, для каждой из этих оптимизаций время компиляции теперь уменьшается на 5–10 процентов. Согласно данным Microsoft, эта новая версия TypeScript поставляется с 25-процентным сокращением времени компиляции стилей Material-UI, что составляет экономию 15 секунд.

Кроме того, я думаю, что из-за экосистемы Microsoft команда Visual Studio Code также предоставила отзыв команде TypeScript о таких задачах, как переименование файла, и о том, сколько времени это займет. Новая версия TypeScript изменила некоторые внутренние аспекты поиска файлов кэша языковой службы, чтобы еще больше сократить этот промежуток времени. Все это приводит к более быстрому общему взаимодействию с TypeScript.

Улучшения в выводе и Promise.all

Предыдущие версии TypeScript, в которых были обновлены функции promise.all и promise.race, были немного регрессированы, особенно в связи со смешиванием значений со значениями null или undefined.

interface Lion { roar(): void
}
interface Seal { singKissFromARose(): void
}
async function visitZoo(lionExhibit: Promise<Lion>, sealExhibit: Promise<Seal | undefined>) { let [lion, seal] = await Promise.all([lionExhibit, sealExhibit]); lion.roar(); // uh oh
// ~~~~
// Object is possibly 'undefined'.
}

В приведенном выше блоке кода тот факт, что sealExhibit имеет неопределенный тип lion, является странным. В новой версии TypeScript приведенный выше блок кода больше не содержит ошибок. Если вы используете более старую версию с подобными проблемами с промисами, выполните обновление.

ts-expect-error Comments

Если вы хотите написать библиотеку TypeScript и экспортировать функцию с именем doSomething, а затем в определении, вы указали, что она принимает две строки, подобные этой:

function doSomething(abc: string, xyz: string) { assert(typeof abc === "string"); assert(typeof xyz === "string"); // do something
}

Таким образом, вы всегда можете получить волнистые красные линии TypeScript и обратить внимание на типы, если вы неправильно используете функцию. Чтобы проверить это поведение, давайте создадим модульный тест.

expect(() => { doSomething(123, 456);
}).toThrow();

К сожалению, если наши тесты написаны на TypeScript, TypeScript выдаст нам ошибку!

doSomething(123, 456);
// ~~~
// error: Type 'number' is not assignable to type 'string'.

Вот почему в новой версии TypeScript вы можете добавить в строку префикс с комментарием об ожидаемой ошибке, а TypeScript предотвратит сообщение об ошибке. Однако вы не сможете неправильно использовать комментарий, так как TypeScript будет выводить предупреждение каждый раз, когда вы используете комментарий без необходимости. В качестве простого примера, следующий код работает нормально:

// @ts-expect-error
console.log(47 * "octopus");

В то время, как этот код:

// @ts-expect-error
console.log(1 + 1);

приводит к ошибке:

Unused '@ts-expect-error' directive.

Awaited придется еще подождать

Предположения оказались верны, новый оператор типа TypeScript под названием Awaited не поставляется с этой новой версией TypeScript из-за некоторых дополнительных проблем проектирования, но будет выпущен, когда команда почувствует себя достаточно уверенно. Вы бы узнали об этом, если бы следили за системой отслеживания ошибок TypeScript на GitHub. Этот новый тип моделирует способ, которым промисы разворачиваются в JavaScript.

Поддержка tsconfig.json файлов «Solution Style»

IDE должны найти файл tsconfig.json, чтобы узнать, какие настройки были заданы для любого данного проекта, и соответственно применить параметры. Итак, что происходит, когда существует более одного файла tsconfig, и один из них ссылается на остальные, как показано ниже:

// tsconfig.json
{ "files": [], "references": [ { "path": "./tsconfig.shared.json" }, { "path": "./tsconfig.frontend.json" }, { "path": "./tsconfig.backend.json" }, ]
}

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

Быстрые исправления для пропущенных выражений возврата

Эта функция, вероятно, затрагивает почти каждого разработчика, которого я знаю. Люди просто иногда забывают возвращаемое значение своих операторов в функции, особенно фигурные скобки с функциями стрелок.

// before
let f1 = () => 42
// oops - not the same!
let f2 = () => { 42 }

В новой версии TypeScript теперь может обеспечить быстрое исправление для добавления отсутствующих операторов return, удаления фигурных скобок или добавления скобок в тела функций стрелок, которые подозрительно похожи на литералы объектов.

Авто-импорт CommonJS в JavaScript

Это мое любимое обновление. Раньше для каждого импорта, который вы делаете в файле TypeScript, всегда предполагалось, что вы хотели бы использовать стиль импорта ECMAScript, и поэтому он обеспечивает что-то подобное во время автоматического импорта:

import * as fs from "fs";

Однако вопреки приведенному выше предположению не все ориентируются на модули в стиле ECMAScript при написании файлов JavaScript. Многие пользователи все еще используют импорт require(…) в стиле CommonJS, например, так:

const fs = require("fs");

В версии 3.9 TypeScript теперь автоматически определяет типы импорта, которые вы используете, чтобы сохранить стиль вашего файла чистым и согласованным.

Основные изменения

Заключение

Это был быстрый взгляд на большинство новых функций, которые поставляются с недавним TypeScript 3.9, и соображения по ним. В целом мы получаем более быструю и интуитивно понятную версию, и моя любимая опция — обычный импорт JS. Что нравится вам?

Автор: Nwose Lotanna Victor

Источник: https://www.telerik.com

Редакция: Команда webformyself.