Как создать ts файл

Обновлено: 05.07.2024

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

Требования

Для выполнения этого мануала вам понадобится:

Последняя версия Node, установленная на вашем компьютере. Инструкции по установке зависят от вашего дистрибутива: mac OS, Debian, CentOS, Ubuntu.
Умение работать с npm. Пакетный менеджер npm поставляется с Node. Чтобы узнать больше о работе с npm, ознакомьтесь с руководством Управление модулями Node.js с помощью npm и package.json.

1: Инициализация проекта TypeScript

Чтобы начать разрабатывать свой проект TypeScript, нужно создать каталог для хранения файлов:

Перейдите в него:

Сюда вы можете установить TypeScript:

npm i typescript --save-dev

Установив TypeScript, вы можете инициализировать свой проект, используя следующую команду:

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

Мы используем здесь команду tsc, потому что это встроенный компилятор TypeScript. Когда вы пишете код на TypeScript, команда tsc преобразует или компилирует код в JavaScript.

Откройте файл tsconfig.json в любом редакторе кода, и вы увидите следующие конфигурации по умолчанию:

Многие конфигурации по умолчанию будут закомментированы. Приведенные выше параметры определяют версию JavaScript, в которую будет скомпилирован TypeScript, и ожидаемую систему модулей для скомпилированной программы. Параметр strict со значением true включает широкий диапазон правил проверки типов. Это означает, что ваша программа TypeScript будет содержать меньше ошибок.

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

Если присвоить outDir значение dist, при компиляции будет создана папка по имени dist. При запуске команды npx tsc для компиляции файла TypeScript скомпилированный файл JavaScript будет помещен в файл dist.

Также при компиляции файла TypeScript будет создан sourcemap – это файл, который сопоставляет новый скомпилированный файл JavaScript с исходным файлом TypeScript. Если в вашем коде есть ошибки или вам необходимо внести изменения, лучше отлаживать исходный код, а не скомпилированный. Вот почему полезны файлы sourcemap. Установив для параметра sourceMap значения true, вы сможете быстро устранять ошибки в исходном файле TypeScript.

Переходим к написанию кода приложения TypeScript и его компиляции.

2: Компиляция проекта TypeScript

Прежде чем приступить к написанию кода своего проекта TypeScript, создайте в проекте typescript папку src, а внутри src создайте файл index.ts.

Затем откройте index.ts в редакторе кода и вставьте в этот файл следующий код TypeScript:

Имея этот код, index.ts готов к компиляции:

npx tsc index.ts

Вы заметите, что в папку dist были добавлены скомпилированный JavaScript-файл index.js и файл sourcemap index.js.map.

Откройте index.js, и вы увидите следующий скомпилированный код JavaScript:

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

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

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

3: Настройка TSLint для проекта TypeScript

Использование линтера при написании кода поможет вам быстро выявить несоответствия, синтаксические ошибки и упущения. Стандартный линтер TypeScript называется TSLint (он считается устаревшим и вместо него рекомендуется использовать ESLint).

Чтобы установить TSLint, выполните следующую команду:

npm i tslint --save-dev

TSLint установлен. Чтобы настроить его для работы с вашим проектом, выполните следующую команду для инициализации:

npx tslint --init

Команда инициализации TSLint создаст файл tslint.json, в нем хранятся все конфигурации TSLint в tslint.json. Откройте tslint.json в редакторе кода. Вы увидите следующие стандартные конфигурации:

Линтеры подчеркивают ошибки в коде. Чтобы включить это поведение в редакторе кода, необходимо установить расширение TSLint.

Примечание: Если после установки расширение не будет работать, попробуйте установить в редакторе расширение ESLint.

Вернитесь в файл index.ts в редакторе кода. Вы заметите, что в двух местах появилось подчеркивание: одинарные кавычки должны быть двойными, а сам файл должен заканчиваться новой строкой. Оба этих замечания не являются ошибками как таковыми, это стилистические рекомендации, которые отслеживает TSLint. Вы можете изменить это поведение в файле tslint.json. Это делается в рамках пары ключ-значение rules:

Допустим, вы не хотите включать новую строку в конец каждого файла. Вы можете отключить эту рекомендацию с помощью правила eofline. Установите для eofline значение false, после чего подчеркивание пропадет:

Вам не нужно вручную устанавливать каждое правило, которое вы хотите добавить. TSLint поддерживает ряд широко известных конфигураций, которые вы можете просто интегрировать в свой файл. Руководство по написанию кода от Airbnb – это надежный набор настроек, которым доверяют многие разработчики.

Чтобы использовать руководство по стилю Airbnb, сначала необходимо установить его:

npm install tslint-config-airbnb

Установив его, нужно убедиться, что конфигурации в tslint.json поддерживают его. Ключ extends должен указывать на недавно установленный tslint-config-airbnb:

4: Использование gts

Чтобы протестировать gts, давайте попробуем создать новую папку проекта. Когда папка проекта будет готова, инициализируйте gts с помощью следующей команды:

Приведенная выше команда сгенерирует все, что вам нужно для начала работы с TypeScript, включая файл tsconfig.json и настройку линтинга. Также она создаст файл package.json, если его еще нет.

Кроме того, команда npx gts init добавит в файл package.json полезные сценарии npm. Например, теперь для компиляции вашего проекта TypeScript вы можете запустить команду npm run compile. Чтобы проверить наличие ошибок с помощью линтера, вы можете запустить npm run check.

Примечание: Изучите документацию по gts, чтобы узнать, как интегрировать gts с линтером ESLint.

Теперь TSLint будет следовать правилам линтинга, установленным gts.

Итак, gts установлен и интегрирован в ваш проект TypeScript. Используя gts, вы сможете быстро создавать новые проекты TypeScript с необходимыми конфигурациями.

Заключение

В этом руководстве вы создали простой проект TypeScript с пользовательскими конфигурациями. Вы также интегрировали Google TypeScript Style в свой проект TypeScript. Инструмент gts поможет вам быстро приступить к работе с новым проектом TypeScript. Благодаря gts вам не нужно вручную настраивать конфигурацию или интегрировать линтер в рабочий процесс.

TypeScript — это популярный статический типизатор (static type checker) или типизированное надмножество (typed superset) для JavaScript, инструмент, разработанный Microsoft и добавляющий систему типов к гибкости и динамическим возможностям JavaScript.

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

Установка TypeScript

Для того, чтобы начать работу с TypeScript, нужно либо установить специальный интерфейс командной строки (command line interface, CLI), либо воспользоваться официальной онлайн-песочницей или другим похожим инструментом.

Для выполнения кода мы будем использовать Node.js. Устанавливаем его, если он еще не установлен на вашей машине, инициализируем новый Node.js-проект и устанавливаем транспилятор TypeScript:

Это установит tsc (компилятор TypeScript) для текущего проекта. Для того, чтобы проверить установку, в директории проекта создаем файл index.ts следующего содержания:

Затем используем транспилятор для преобразования кода, содержащегося в этом файле, в JavaScript:

Наконец, выполняем скомпилированный код с помощью команды node :

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

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

Определение TypeScript-проекта

Для определения TypeScript-проекта внутри Node.js-проекта, необходимо создать файл tsconfig.json . Присутствие данного файла в директории свидетельствует о том, что мы имеем дело с TypeScript-проектом.

tsconfig.json содержит определенное количество настроек, которые влияют на поведение транспилятора, например, на то, какие файлы следует игнорировать, какой файл является целью компиляции, какие типы импортируются и т.д.

Вы легко можете настроить TypeScript с помощью следующей команды:

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

Мы еще вернемся к настройкам TypeScript, а сейчас давайте писать код.

Возможности TypeScript

Каждая возможность TypeScript подробно рассматривается в "Карманной книге по TypeScript". Мы сосредоточимся на практической составляющей некоторых из них. Я постараюсь пролить свет на некоторые возможности, которые часто упускаются из вида в литературе, посвященной TypeScript.

Основы типизации

Ключевая идея TypeScript заключается в контроле за динамической природой и гибкостью JavaScript с помощью типов. Давайте рассмотрим эту идею на практике.

В директории проекта создаем файл test.js следующего содержания:

Выполняем данный код:

Что мы увидим в терминале?
Как вы думаете, правильным ли будет вывод?

В терминале мы увидим thirty two1 без каких-либо предупреждений об очевидной некорректности вывода. Ничего нового: обычное поведение JavaScript.

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

Заменим содержимое созданного нами ранее index.ts следующим кодом:

Обратите внимание, что мы ограничили принимаемый функцией аргумент и возвращаемое функцией значение типом number .

Попытка преобразования проваливается:

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

string и number — это лишь два из основных типов, поддерживаемых TypeScript. TypeScript поддерживает все примитивные значения JavaScript, включая boolean и symbol .

Кроме того, TypeScript определяет несколько собственных типов, которые не имеют соответствия в JavaScript, но являются очень полезными с точки зрения используемой в данной экосистеме методологии:

enum — ограниченный набор значений
any — указывает на то, что переменная/параметр могут быть чем угодно, что, по сути, нивелирует типизацию
unknown — типобезопасная альтернатива any
void — указывает на то, что функция ничего не возвращает
never — указывает на то, что функция выбрасывает исключение или на то, что ее выполнение никогда не заканчивается
литеральные типы, конкретизирующие типы number , string или boolean . Это означает, например, что 'Hello World' — это string , но string — это не 'Hello World' в контексте системы типов. Тоже самое справедливо в отношении false в случае с логическими значениями или для 3 в случае с числами:

Множества

TypeScript поддерживает несколько типов множеств (обычные массивы, ассоциативные массивы — карты или мапы, кортежи), обеспечивая первоклассную поддержку композиции.

Карты (maps)

Карты, как правило, используются для определения связи между ключами и значениями для представления специфичных для приложения данных:

Векторы (vectors)

Векторы — это последовательная индексированная структура данных, содержащая фиксированные типы для всех элементов. JavaScript не поддерживает данную возможность, но TypeScript позволяет разработчикам эмулировать эту концепцию:

Кортежи (tuples)

Кортежи также являются индексированной структорой данных, но типы элементов могут различаться в зависимости от их позиции:

Объединения (unions)

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

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

Прежде всего, давайте установим node-fetch , чтобы иметь возможность использовать функцию fetch в Node.js:

Затем с помощью typeof осуществляем разделение типов:

Здесь мы в явном виде реализовали предохранитель типов.

К слову, кортежи и объединения можно использовать совместно:

Можно определять размер и тип каждого элемента массива:

Предохранители типов (type guards)

Предохранители типов — это выражения, выполняющие проверки во время выполнения кода, результат которых может быть использован системой типов для сужения (narrow) области (scope) проверяемого аргумента.

Одним из предохранителей является оператор typeof , который мы использовали в предыдущем примере для сужения области аргумента user .

Существуют и другие предохранители, такие как instanceof , !== и in , полный список можно найти в документации.

Для случаев, когда система типов не может сделать правильный вывод о типе в текущем контексте, мы можем определить пользовательский предохранитель типа через предикат (типизированная функция, возвращающая логическое значение):

Пользовательские предохранители находятся под полным контролем разработчика, TypeScript не имеет возможности убедиться в их корректности.

Весьма распространенным случаем использования пользовательских предохранителей является влидация внешних данных с помощью JSON-схемы, предоставляемой сторонней библиотекой, такой как Ajv. Обычно, это происходит в веб-приложениях, где тело запроса имеет тип unknown (или any в зависимости от используемого фреймворка), и мы хотим проверить его перед использованием:

В основе данного механизма лежит синхронизация JSON-схемы с типом. Если мы изменим тип, но не изменим схему, то вполне можем получить неожиданное сужение типа.

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

Исключающие объединения (discriminated unions)

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

В функции getFirstProject() TypeScript сужает область аргумента без помощи предиката. Попытка получить доступ к массиву projects в первой ветке (блоке if ) закончится ошибкой типа.

Валидация во время выполнения

Как было отмечено ранее, в случае с пользовательскими предохранителями, корректность возвращаемого результата обеспечивается разработчиком.

При наличии ошибки в предикате, система типов может получить неверную информацию. Рассмотрим пример:

Данный предикат всегда возвращает true , позволяя типизатору сузить тип к тому, чем он на самом деле не является:

Существует несколько библиотек, которые позволяют обеспечить автоматическую синхронизацию между валидацией во время выполнения и соответствующим типом. Одним из самых популярных решений является runtypes, однако мы будем использовать io-ts и fp-ts.

Суть данного подхода состоит в том, что мы определяем форму (или фигуру) типа с помощью примитивов, предоставляемых io-ts ; эта форма называется декодером (decoder); мы используем ее для проверки данных, которым мы по какой-либо причине не доверяем:

Настройка TypeScript

Поведение транспилятора можно настраивать с помощью файла tsconfig.json , находящегося в корне проекта.

Данный файл содержит набор ключей и значений, отвечающих за 3 вещи:

Структура проекта: какие файлы включаются/исключаются из процесса компиляции, зависимости разных TypeScript-проектов, связь между этими проектами через синонимы (aliases).
Поведение типизатора: выполнять ли проверку на наличие null и undefined в кодовой базе, сохранение const enums и т.п.
Процесс транспиляции.

Пресеты TSConfig

TypeScript может преобразовывать код в ES3 и поддерживает несколько форматов модулей (CommonJS, SystemJS и др.).

Точные настройки зависят от среды выполнения кода. Например, если вашей целью является Node.js 10, вы можете транспилировать код в ES2015 и использовать CommonJS в качестве стратегии разрешения модулей.

Если вы используете последнюю версию Node.js, например, 14 или 15, тогда можете указать в качестве цели ESNext или ES2020 и использовать модульную стратегию ESNext .

Наконец, если вашей целью является браузер и вы не используете сборщик модулей, такой как webpack или parcel , то можете использовать UMD .

К счастью, команда TypeScript разработала хороший набор пресетов, которые вы можете просто импортировать в свой tsconfig.json :

Среди наиболее важных настроек, можно отметить следующее:

declaration : определяет, должен ли TypeScript генерировать файлы определений ( .d.ts ) во время транспиляции. Данные файлы, как правило, используются при разработке библиотек
noEmitOnError : определяет, должен ли TypeScript прерывать процесс компиляции при возникновении ошибок, связанных с неправильными типами. Рекомендуемым значением данной нстройки является true
removeComments : true
suppressImplicitAnyIndexErrors : true
strict : дополнительные проверки. До тех пор, пока у вас не появится веской причины для отключения данной настройки, она должна иметь значение true
noEmitHelpers : при необходимости, TypeScript предоставляет утилиты и полифилы для поддержки возможностей, которых не было в ES3 и ES5 . Если значение данной настройки является false , утилиты будут помещены в начало кода, в противном случае, они будут опущены ( tslib можно устанавливать отдельно)

Заключение

Надеюсь, данная статья позволила вам получить общее предствления о возможностях, предоставляемых TypeScript, а также о том, почему использование TypeScript в дополнение к JavaScript в настоящее время фактически является стандартом веб-разработки.

Система типов TypeScript не является идеальной, но это лучшее, что мы имеет на сегодняшний день.

Облачные серверы от Маклауд отлично подходят для сайтов с JavaScript.

Зарегистрируйтесь по ссылке выше или кликнув на баннер и получите 10% скидку на первый месяц аренды сервера любой конфигурации!

Обратите внимание: для большого удобства в изучении книга была оформлена в виде прогрессивного веб-приложения.

В TS , как и в ECMAScript2015 , любой файл, содержащий import или export верхнего уровня (глобальный), считается модулем.

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

Модули выполняются в собственной области видимости, а не в глобальной. Это означает, что переменные, функции, классы и т.д., объявленные в модуле, недоступны за пределами модуля до тех пор, пока они в явном виде не будут из него экспортированы. Кроме того, перед использованием экспортированных сущностей, их следует импортировать в соответствующий файл.

Для начала, давайте разберемся, что TS считает модулем. Спецификация JS определяет, что любой файл без export или await верхнего уровня является скриптом, а не модулем.

Переменные и типы, объявленные в скрипте, являются глобальными (имеют глобальную область видимости), для объединения нескольких файлов на входе в один на выходе следует использовать либо настроку компилятора outFile , либо несколько элементов script в разметке (указанных в правильном порядке).

Если у нас имеется файл, который не содержит import или export , но мы хотим, чтобы этот файл считался модулем, просто добавляем в него такую строку:

Существует 3 вещи, на которые следует обращать внимание при работе с модулями в TS :

Синтаксис: какой синтаксис я хочу использовать для импорта и экспорта сущностей?
Разрешение модулей: каковы отношения между названиями модулей (или их путями) и файлами на диске?
Результат: на что должен быть похож код модуля?

Синтаксис

Основной экспорт в файле определяется с помощью export default :

Затем данная функция импортируется следующим образом:

В дополнению к экспорту по умолчанию, из файла может экспортироваться несколько переменных и функций с помощью export (без default ):

Указанные сущности импортируются так:

Дополнительный синтаксис импорта

Название импортируемой сущности можно менять с помощью import < old as new >:

Разные способы импорта можно смешивать:

Все экспортированные объекты при импорте можно поместить в одно пространство имен с помощью * as name :

Файлы можно импортировать без указания переменных:

В данном случае import ничего не делает. Тем не менее, весь код из maths.ts вычисляется (оценивается), что может привести к запуску побочных эффектов, влияющих на другие объекты.

Специфичный для TS синтаксис модулей

Типы могут экспортироваться и импортироваться с помощью такого же синтаксиса, что и значения в JS :

TS расширяет синтаксис import с помощью import type , что позволяет импортировать только типы.

Такой импорт сообщает транспиляторам, вроде Babel , swc или esbuild , какой импорт может быть безопасно удален.

Синтаксис ES-модулей с поведением CommonJS

Синтаксис ES-модулей в TS напрямую согласуется с CommonJS и require из AMD . Импорт с помощью ES-модулей в большинстве случаев представляет собой тоже самое, что require в указанных окружениях, он позволяет обеспечить полное совпадение TS-файла с результатом CommonJS :

CommonJS — это формат, используемый большинством npm-пакетов . Даже если вы используете только синтаксис ES-модулей , понимание того, как работает CommonJS , поможет вам в отладке приложений.

Экспорт

Идентификаторы экпортируются посредством установки свойства exports глобальной переменной module :

Затем эти файлы импортируются с помощью инструкции require :

В данном случае импорт можно упростить с помощью деструктуризации:

Взаимодействие CommonJS с ES-модулями

Между CommonJS и ES-модулями имеется несовпадение, поскольку ES-модули поддерживают "дефолтный" экспорт только объектов, но не функций. Для преодоления данного несовпадения в TS используется флаг компиляции esModuleInterop .

Разрешение модулей — это процесс определения файла, указанного в качестве ссылки в строке из инструкции import или require .

TS предоставляет две стратегии разрешения модулей: классическую и Node . Классическая стратегия является стратегией по умолчанию (когда флаг module имеет значение, отличное от commonjs ) и включается для обеспечения обратной совместимости. Стратегия Node имитирует работу Node.js в режиме CommonJS с дополнительными проверками для .ts и .d.ts .

Существует большое количество флагов, связанных с разрешением модулей: moduleResolution , baseUrl , paths , rootDirs и др.

Имеется две настройки, которые влияют на результирующий JS-код :

— определяет версию JS , в которую компилируется TS-код — определяет, какой код используется для взаимодействия модулей между собой

То, какую цель (target) использовать, зависит от того, в какой среде будет выполняться код (какие возможности поддерживаются этой средой). Это может включать в себя поддержку старых браузеров, более низкую версию Node.js или специфические ограничения, накладываемые такими средами выполнения, как, например, Electron .

Коммуникация между модулями происходит через загрузчик модулей (module loader), определяемый в настройке module . Во время выполнения загрузчик отвечает за локализацию и установку всех зависимостей модуля перед его выполнением.

Ниже приведено несколько примеров использования синтаксиса ES-модулей с разными настройками module :

ES2020

CommonJS

TS имеет собственный модульный формат, который называется namespaces . Данный синтаксис имеет множество полезных возможностей по созданию сложных файлов определений и по-прежнему активно используется в DefinitelyTyped . Несмотря на то, что namespaces не признаны устаревшими (deprecated), большая часть его возможностей нашла воплощение в ES-модулях , поэтому настоятельно рекомендуется использовать официальный синтаксис.

VPS серверы от Маклауд быстрые и безопасные.

Я люблю писать код. И я хочу быть в этом действительно хорош. Но почему-то написание JavaScript никогда не было моей сильной стороной.

Сколько бы я ни практиковался, в продакшене продолжали появляться одни и те же ошибки: исключения cannot read property <> of undefined , знаменитая строка [Object object] и даже вызовы функций с недопустимым количеством параметров.

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

Мы можем сделать намного лучше!

В этом посте я не буду объяснять, почему TypeScript великолепен (и это так), и сосредоточусь на задачах, которые вам нужно выполнить, если вы хотите перенести свой обычный проект JavaScript в смешанный проект TypeScript.

К концу поста вы станете более счастливым человеком и сможете ответить на следующие вопросы:

Как я могу добавить типы в свой проект JavaScript?
Что такое TypeScript?
Как я могу использовать TypeScript в проекте JavaScript?
Что нужно сделать, чтобы преобразовать приложение JavaScript для поддержки TypeScript?
Как я могу позаботиться о сборке и упаковке?
Как мне позаботиться о линтинге?
Как я могу «продать» TypeScript моей организации и разработчикам?

Как я могу добавить типы в свой проект JavaScript?

Vanilla JavaScript в настоящее время не поддерживает типы, поэтому для этого нам нужна какая-то абстракция поверх JavaScript.

Некоторые распространенные абстракции используют статическую проверку типов Facebook под названием flow и язык Microsoft под названием typescript .

Что такое машинописный текст?

TypeScript - это типизированное надмножество JavaScript, которое компилируется в обычный JavaScript.

TypeScript состоит из нескольких частей. Первый - это язык TypeScript - это новый язык, содержащий все функции JavaScript. Ознакомьтесь со спецификациями для получения дополнительной информации.

Второй - компилятор TypeScript tsc (механизм системы типов), это механизм компиляции, который создает ts-файлы и выдает js-файлы.

Hello world в TypeScript

В качестве примера, вот шаги, которые вам нужно предпринять, чтобы написать свое первое приложение TypeScript:

установить TypeScript с помощью npm i typescript
создайте папку с именем example и cd (в вашем терминале)
создать файл с именем hello.world.ts
напишите в нем следующий код:

Hello world в TypeScript - моя первая программа на TypeScript!

а затем сохраните его.

5. запустите команду tsc для запуска компилятора TypeScript в текущей папке.

6. обратите внимание, что у вас есть файл hello.js , который теперь можно запустить:)

7. запустить node ./hello.js

Как я могу использовать TypeScript в проекте JavaScript?

Есть несколько стратегий для выполнения этой «миграции» (с точки зрения компании и кода). Я перечислил их ниже по их «стоимости» и по степени ценности.

Я бы посоветовал начать с «поддержки приложений TS» и двигаться дальше после того, как вы доказали ценность для своей команды разработчиков.

Процесс миграции TypeScript выполняется итеративно, только если вы подтверждаете ценность.

Подход «маленький шаг для человека» - добавление поддержки TS для существующих приложений

Мое первое предложение - создать смесь двух языков в одном проекте, а затем написать весь «будущий» код на TypeScript.

Комбинация двух языков в одном проекте сначала звучит ужасно, но работает достаточно хорошо, поскольку TS был построен для постепенного использования. Сначала его можно использовать как JS с файлами .ts и странными строками импорта.

В этой стратегии мы будем компилировать перенесенные файлы TypeScript и просто копировать файлы JavaScript в папку вывода.

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

Я настоятельно рекомендую начать с этого шага, а затем повторить его вместе со своей командой, прежде чем двигаться дальше. Чтобы быстро узнать, как это сделать, прокрутите вниз до раздела The steps to convert a javascript application to support typescript .

Подход open for business - добавление поддержки TS для существующих библиотек.

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

Это можно сделать двумя способами:

Первый способ предполагает использование файлов объявлений. Простое добавление файлов d.ts помогает компилятору TS проверять тип существующего кода JavaScript и обеспечивает поддержку автозаполнения в вашей среде IDE.

Это самый «дешевый» вариант, так как он вообще не требует изменения кода библиотеки. Это также дает вам максимальную мощность и поддержку типов в вашем будущем коде.

Второй способ - выполнить полную перезапись TypeScript, что может занять много времени и привести к ошибкам. Я бы не советовал это делать, если только это не докажет, что окупаемость инвестиций достойна вашей команды.

Скелет - шаг в будущее

Я предполагаю, что большинство разработчиков «ленивы» и обычно запускают свое приложение с копирования из каркаса (который обычно содержит журналы, показатели, конфигурацию и так далее).

Этот шаг поможет вам проложить свой путь в светлое будущее, создав «официальный» каркас вашей компании. Это будет 100% TS, и устаревший каркас JS, если он существует.

Этот стартовый узел typescript - действительно хороший первый проект для начала.

Комплексный подход - преобразование полной кодовой базы из JS в TS

Этот вариант требует полной перезаписи кода JavaScript на TypeScript.

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

Вы можете выполнить такую перезапись (это долгий процесс) следующим образом:

Имейте в виду, что есть автоматизированные инструменты, призванные облегчить этот процесс, например ts-migrate от команды Airbnb.

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

Как преобразовать приложение JavaScript для поддержки TypeScript.

Установить машинописный текст

запустить: npm install typescript .

Конфигурационный файл Typescript

Добавьте файл конфигурации TypeScript, который можно создать с помощью команды tsc --init в вашем интерфейсе командной строки.

Вот пример того, как выглядела наша первоначальная конфигурация:

Несколько замечаний выше:

Мы читаем все файлы в каталоге src или test или config (используя флаг include ).
Мы принимаем файлы JavaScript в качестве входных данных (используя флаг allowJs ).
Мы испускаем все выходные файлы в build (используя outDirflag ).

Создайте свой первый файл .TS в своем проекте

Я рекомендую начать с добавления простого файла TypeScript (или изменения действительно простого файла JS на файл TS) и развертывания. Выполняйте эту миграцию поэтапно.

Позаботьтесь о своем файле package.json

Вот как выглядит package.json до и после:

Как видите, большинство изменений касалось добавления префикса dist к большинству наших команд сборки. Мы также добавили скрипт build-dist , который компилирует нашу кодовую базу и перемещает все файлы в специальную папку с именем dist .

Добавить поддержку карты источника

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

Например, представьте следующую программу TypeScript:

Когда мы запустим его, он выдаст следующую трассировку стека:

Подождите! но в нашем машинописном коде всего 2 строки!

Это проблематично, поскольку наша кодовая база содержит только файлы .ts . А поскольку большая часть производственного кода содержит сотни строк, правильный перевод этих чисел и файлов займет действительно много времени.

К счастью для нас, есть решение этой проблемы, называемое поддержкой исходной карты!

Это позволяет нам гарантировать, что трассировки стека будут иметь правильные имена файлов .ts и номера строк, как мы привыкли:)

Это можно сделать, запустив, npm install source-map-support а затем добавив следующую строку в первые строки вашего приложения:

Теперь код выглядит так:

И когда мы его компилируем, мы запускаем tsc --sourcemap hello.ts . Теперь мы получаем следующую трассировку стека, и это здорово:)

В последних версиях nodejs это поддерживается изначально с помощью флага --enable-source-maps .

Как заботиться о сборке и упаковке

Давайте просто рассмотрим изменения до и после в нашем файле конфигурации сборки.

Вот так наш файл .travis выглядел раньше (упрощенная версия):

И вот как он выглядел после этого:

Обратите внимание, что большинство изменений касается «упаковки» файла tar.xz и выполнения команды build-dist перед доступом к папке dist .

Как мне позаботиться о линтинге?

Доступно несколько вариантов линтинга.

Первым решением, которое мы использовали, было tsfmt, но позже мы отказались от него, потому что оно требует от вас поддержки двух отдельных конфигураций для вашего проекта (для TypeScript через sfmt и отдельный для JavaScript, с помощью eslint ). Проект также выглядит устаревшим.

Затем мы нашли TSLint, который перенаправил нас на плагин eslint для TypeScript. Затем мы настроили его следующим образом:

Это был наш eslintrc.js :

Который мы настроили для запуска с помощью команды lint-fix в нашем package.json который выглядит следующим образом:

Как «продать» машинописный текст вашей команде разработчиков

Я считаю, что одним из наиболее важных аспектов внедрения TypeScript в вашу организацию является «pitch» и то, как вы представляете его своей команде разработчиков.

Вот презентация, которую мы представили внутри компании, которая вращалась вокруг следующих тем:

Объясните, почему мы считаем TypeScript крутым
Что такое TypeScript
Некоторые базовые примеры кода. Главное в этой части - не «обучать» 100% TypeScript, поскольку люди будут делать это сами. Вместо этого дайте людям почувствовать, что они могут читать и писать TypeScript и что кривая обучения не так уж и сложна.
Расширенные примеры кода, такие как типы Union и алгебраические типы данных, которые предоставляют огромные возможности JS-разработчику. Это настоящие удовольствия, помимо типизированного языка и компилятора, который привлечет к нему ваших разработчиков.
Как начать пользоваться. Поощряйте людей загрузить IDE vs-code и добавить аннотацию ( // @ ts-check), чтобы они могли начать видеть волшебство! В нашей компании мы заранее подготовили некоторые действительно крутые ошибки, которые выявляют ts-check , и мы провели живую демонстрацию (2-3 минуты), чтобы показать, насколько быстро компилятор TypeScript может помочь им с помощью документов JS с аннотациями типов или ts-check ).
Погрузитесь в некоторые особенности. Объясните файлы ts.d и @types packages которые являются одними из вещей, которые вы действительно встретите в самом начале TypeScript программы.
Живой пиар от вашей работы. Мы показали PR, который мы создали на раннем этапе, и призвали людей просмотреть его и попробовать на себе.
Поделитесь классными ресурсами. В сети много контента, и сложно отличить хорошее от плохого. Копайте глубже и постарайтесь найти качественный контент об инструментах, которые вы используете и которые вам нужны.
Создайте публичный пул-реквест. Я рекомендую попытаться получить как можно больше поддержки для его утверждения.

10. Создайте в своей организации положительный отзыв об изменениях!

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

Вывод

Typescript супер! Если вы пишете программное обеспечение производственного уровня, а бизнес-требования и доступность высоки, я настоятельно рекомендую вам попробовать Typescript.

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

Создайте короткий цикл обратной связи и ценностное предложение. Трудно «продать» новый язык вашей команде и руководству, поскольку это требует времени и ресурсов.

Поэтому разработайте процесс миграции с короткими циклами обратной связи и попытайтесь определить четкие KPI (меньше ошибок в производстве, более легкое время рефакторинга и т. д.) И убедитесь, что ценностное предложение для вашего варианта использования постоянно оправдывается, пока оно не станет де- факто стандарт.

Читайте также: