"Машинопись"

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

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

Сегодня я попытаюсь разобраться с этими двумя аннотациями типов и указать, когда желателен явный тип, а когда полагаться на вывод типа. Если вы не знаете, что такое Type Inference, прочтите руководство.

Сказку сделать былью

Во-первых, давайте различать их:

Явный — означает добавление типа непосредственно в нашу кодовую базу, аналогично языку Haskell, который является статически типизированным. Если мы добавим такой тип, мы будем точно знать, какой тип мы используем, например:

const animal: string = 'Tiger';

Если мы хотим быть более конкретными, мы можем описать эту переменную as const и «запечатать» тип:

const animal = 'Tiger' as const;

В этом случае тип переменной animal будет строгим — ⁣ Tiger.

Неявный — означает, что тип может быть выведен системой вывода TypeScript, когда нет явной аннотации типа:

const animal = 'Tiger';

В приведенном выше коде тип будет таким же, как в примере as const, и вы можете увидеть его, наведя указатель мыши на переменную в вашей среде IDE. Но ситуация изменится, когда мы изменим ключевое слово на let и тогда тип будет простым string:

let animal = 'Tiger';

Тематические исследования 💡

Зная различия, давайте рассмотрим несколько случаев использования, когда добавление аннотации типа явная будет полезной и не затенит кодовую базу.

Первое, что делают многие новые разработчики TypeScript при преобразовании базы кода из JavaScript, — заполняют ее аннотациями типов. В конце концов, TypeScript — это типы! Но в TypeScript многие аннотации не нужны. Объявление типов для всех ваших переменных контрпродуктивно и считается плохим стилем. Эффективный TypeScript

const getAnimal = (animal) => animal;

В таком случае животное будет типа any, чтобы исправить это, мы можем либо указать явный тип здесь, либо установить значение по умолчанию:

const getAnimal = (animal = 'Elephant') => animal;

2. Более быстрое обнаружение ошибок — иногда явная аннотация типа может сэкономить нам время на отладку и поиск ошибки. Давайте посмотрим на этот пример:

interface Animal { id: number; name: string; } 
const animal = { id: '1', name: 'Elephant', }; 
const getAnimal = (animal: Animal) => animal; 
getAnimal(animal);

Этот код выдает ошибку в том месте, где мы вызываем функцию getAnimal. Это правильное поведение, потому что TypeScript выведет тип как объект со свойствами типов, выведенных из заданных значений:

Однако, если мы знаем, что эта переменная должна быть типа Animal, то при явном аннотировании типа мы сразу получим ошибку в том месте, где мы передаем неправильный тип:

3. Явная помощь в выводе типов — это своего рода парадокс, но каждый раз, когда мы добавляем явный тип, мы помогаем TypeScript выводить типы. Правильно набрав данные функции ввода/вывода, мы можем не добавлять тип в тело функции и на основе вывода типа:

ESLint/TypeScript ESLint 🔥

Чтобы завершить вышеприведенный список, чтобы упростить работу с TypeScript, нам понадобится утилита под названием linter (в данном случае самая популярная — ESLint). Для работы с TypeScript существует специальный линтер — TypeScript ESLint, который позволяет ESLint работать с кодом TypeScript.

Существует огромное количество правил, но я укажу 3, которые действительно полезны для работы с явными/неявными типами.

TypeScript не всегда может вывести типы для всех мест в коде. В некоторых местоположениях требуются аннотации типов для определения их типов.

Это правило можно красиво настроить с помощью двух флагов в соответствии с нашими потребностями и работой с входящими данными в функции/методы:

"@typescript-eslint/typedef": [
    "error", { "arrowParameter": true, "parameter": true } 
]

Тем не менее, это также хороший способ включить правила в файле tsconfig.json, как сказано в документации:

Вместо включения typedef обычно рекомендуется использовать параметры компилятора --noImplicitAny и --strictPropertyInitialization, чтобы применять аннотации типов только в случае необходимости.

2.@typescript-eslint/explicit-function-return-type — это правило заставляет добавлять в функцию явное дополнение. Добавление типа возвращаемого значения explicit дает вам еще одну привилегию — оно позволяет вам использовать определенное объявление type и иметь больший контроль над типом «выходных» данных.

3. @typescript-eslint/no-inferrable-types — последнее правило находит ненужный добавленный явный тип в местах, где типы могут быть выведены:

Заключение:

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

Идеальный код TypeScript включает аннотации типов для сигнатур функций/методов, но не для локальных переменных, созданных в их телах. Это сводит шум к минимуму и позволяет читателям сосредоточиться на логике реализации. Эффективный TypeScript

Спасибо за прочтение ♥️♥️

Если статья была вам полезна, оставьте комментарий или 👏

Первоначально опубликовано на https://www.fun4code.com 14 января 2022 г.