Как Система Типов Улучшает Ваш Код Javascript

Вот и не успеваешь развернуться, а месяц уже спешит к концу.

До запуска нового потока по курсу осталось всего несколько дней «Разработчик JavaScript» , по традиции перед запуском курса делимся с вами переводом полезного материала.

Ванильный JavaScript по своей природе нетипизирован.

Его можно даже назвать «умным», потому что он может определить, что такое число, а что — строка.

Это упрощает запуск кода JavaScript в браузере или во время работы Node.js. Однако он уязвим для многочисленных ошибок во время выполнения, которые могут испортить ваш пользовательский опыт.

Как система типов улучшает ваш код JavaScript

Если с вами когда-либо случалось следующее, вам будет полезно использовать систему типов.

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

Flow, TypeScript или ReasonML Допустим, у вас есть существующая база кода, которую вы хотите сделать более надежной и стабильной.

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

С другой стороны, использовать каждый из этих громоздких инструментов сложно.

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

Однако Flow и TypeScript не являются на 100% безопасными при добавлении текста в ваш код. По этой причине идеальная безопасность типов достигается за счет вывода и упрощает аннотирование переменных и сигнатур функций.

Простые и наглядно придуманные примеры Рассмотрим следующий код:

   

 let add = (a, b) => a + b;

В обычном JavaScript эти аргументы могут быть числами или строками.

В TypeScript или Flow эти аргументы могут быть аннотированы следующим образом:

let add = (a: number, b: number) => a + b

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

Теперь давайте посмотрим на слегка измененный пример в Reason:

let add = (a: string, b: number) => a + b add('some string', 5) // outputs: "some string5"

Эта функция работает! И это может показаться удивительным.

Как разум это понимает?

let add = (a, b) => a + b; add("some string", 5); /* This has type: string but somewhere wanted: int */

Эта функция имела недостатки на уровне реализации.

В Reason есть разные операторы для добавления целых чисел, чисел с плавающей запятой и строк.

Цель этого простого примера — показать, что вполне возможны ненужные ошибки типов, даже если это не приводит к сбою приложения.

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

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

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

Reason заставит вас исправить любые ошибки в синтаксисе и типах, прежде чем предложить вам полезное исправление.

Вот как это работает в VSCode, но я знаю многих разработчиков Reason, которые используют vim. Мы не будем здесь вдаваться в сравнения.

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

С другой стороны, Reason сложнее использовать, поскольку для него доступно меньше статей и документации.

Я надеюсь, что это улучшится с его развитием.

Если Reason вас интересует, вы можете найти Здесь его документация.

А также подписывайтесь на таких личностей как @jordwalke , @jaredforsyth И @sgrove в Твиттере.

Они могут многое рассказать вам об экосистеме Reason/OCaml. Если вы хотите узнать, как Reason работает с GraphQL, прочтите другую мою статью.

«Разум с помощью GraphQL: будущее типобезопасных веб-приложений» .

Ждем отзывов по материалу и по сложившейся традиции приглашаем всех читателей День открытых дверей , который проведет наш преподаватель 25 марта - Александр Коржиков .

Теги: #JavaScript #typescript #webdev #reason