Svelte <3 TypeScript +8




Поддержка Typescript, без сомнения, была самой желанной и востребованной фичей в течение долгого времени и вот она здесь: Svelte официально поддерживает TypeScript!

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

TypeScript + Svelte в VS Code (тема Kary Pro)
TypeScript + Svelte в VS Code (тема Kary Pro)

Попробуйте прямо сейчас

Вы можете просто начать новый Svelte + Typescript проект, скачав обычный шаблон и запустив специальный скрипт-настройщик node scripts/setupTypeScript.js.

npx degit sveltejs/template svelte-typescript-app
cd svelte-typescript-app
node scripts/setupTypeScript.js

Если вы используете VS Code, убедитесь что вы используете новое официальное расширение, которое заменяет популярное расширение от James Birtles. Далее мы подробно рассмотрим отдельные шаги, связанные с использованием TypeScript в существующем проекте Svelte.

Что означает поддержка TypeScript в Svelte?

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

За неделю до того как COVID был объявлен пандемией, я внес предложение консолидировать лучшие инструменты и идеи Svelte из аналогичных dev-экосистем и предоставил набор шагов, чтобы получить первокласную поддержку TypeScript. С тех пор многие люди присоединились к этому предложению и написали код, чтобы реализовать задуманное.

Итак, когда мы говорим, что Svelte теперь поддерживает TypeScript, мы имеем в виду несколько различных вещей:

  • Можно использовать TypeScript внутри блоков <script>- просто добавьте атрибут lang="ts".

  • Компоненты с TypeScript могут быть проверены с помощью команды svelte-check.

  • Вы получаете подсказки, автодополнение и проверку типов, даже в выражениях внутри разметки!

  • Файлы TypeScript понимают API компонентов Svelte - больше никаких красных волнистых подчеркиваний при импорте файла .svelte в модуль .ts.

Как это работает?

Чтобы понять две основные части поддержки TypeScript, мы рассмотрим техники, которые TypeScript использует для предоставления средств разработки. Существует компилятор tsc, который запускается в командной строке для преобразования *.ts в *.js. Далее, существует TSServer, который отвечает на запросы от текстовых редакторов. TSServer - это то, что обеспечивает весь анализ JavaScript и TypeScript в реальном времени и в нем содержится большая часть кода компилятора.

Svelte имеет свой собственный Svelte compiler и теперь у нас есть svelte-language-server, который отвечает на вызовы из текстового редактора по стандарту Language Server Protocol. Первоклассная поддержка TypeScript означает, что обе эти системы хорошо справляются с кодом TypeScript.

Компилятор Svelte поддерживает TypeScript с помощью svelte-preprocess, написанный Christian Kaisermann, который теперь является официальным проектом Svelte.

Для уровня редактора, мы вдохновлялись работой Pine в экосистеме Vue через Vetur. Vetur предоставляет LSP, расширение VS Code и CLI. Теперь Svelte также имеет LSP, расширение VS Code и CLI.

Анализ *.svelte

Официальное расширение для VS Code мы построили на основе UnwrittenFun/svelte-vscode и UnwrittenFun/svelte-language-server, написанных James Birtles.

Simon Holthausen и Lyu, Wei-Da сделали великолепную работу по улучшению анализа JavaScript and TypeScript, включая интеграцию с svelte2tsx от @halfnelson, который обеспечивает понимание свойств компонентов в шаблонах.

Добавление TypeScript в существующий проект

Перед началом работы добавьте зависимости:

npm install --save-dev @tsconfig/svelte typescript svelte-preprocess svelte-check

1.Компиляция TypeScript

Прежде всего нужно настроить svelte-preprocess, который пропускает содержимое ваших <script lang="ts"> через компилятор TypeScript.

Если вы используете Rollup, это будет выглядеть вот так:

+ import autoPreprocess from 'svelte-preprocess';
+ import typescript from '@rollup/plugin-typescript';

export default {
  ...,
  plugins: [
    svelte({
+       preprocess: autoPreprocess()
    }),
+   typescript({ sourceMap: !production })
  ]
}

Обратите внимание, что вам необходимо также установить@rollup/plugin-typescript, чтобы Rollup мог работать с .ts файлам. Полные инструкции для других сред здесь.

Чтобы настроить TypeScript, необходимо создать файл tsconfig.json в корне проекта:

{
  "extends": "@tsconfig/svelte/tsconfig.json",

  "include": ["src/**/*", "src/node_modules"],
  "exclude": ["node_modules/*", "__sapper__/*", "public/*"],
}

Секции include/exclude могут отличаться в зависимости от проекта, но эти настройки по-умолчанию должны хорошо работать для большинства проектов Svelte.

2.Поддержка редактором

Любой редактор, который использует LSP, может получить поддержку. Расширение VS Code является наиболее приоритетным для нас, но также идет работа над расширением для Atom и Vim через coc-svelte.

Эти расширения улучшат качество написания кода даже если вы используете только JavaScript. Редактор не будет оповещать об ошибках, но будет предлагать информацию об интерфейсах и инструменты рефакторинга. Вы можете добавить //@ ts-checkв верхнюю часть тега <script> с помощью JavaScript, чтобы получить улучшенные сообщения об ошибках.

Чтобы переключиться с <script> на использование TypeScript, просто добавьте lang="ts" аттрибут. Надеюсь, вы не увидите океан красных завитков! ;-)

3.CI проверки

Наличие красных завитков - это здорово, однако в долгосрочной перспективе необходимо проверить отсутствие ошибок в коде. Для проверки отсутствия ошибок в проекте можно использовать CLI инструмент svelte-check. Он, так же как редактор, запускает проверку на ошибки для всех файлов .svelte.

Можно добавить зависимость в проект, а затем добавить ее в CI.

? npx svelte-check

Loading svelte-check in workspace: /Users/ortatherox/dev/svelte/example-app
Getting Svelte diagnostics...
====================================

/Users/ortatherox/dev/svelte/example-app/src/App.svelte:3:2
Error: Type '123' is not assignable to type 'string'. (ts)

====================================
svelte-check found 1 error
error Command failed with exit code 1.

Как насчет TypeScript в Sapper?

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

Как я могу внести свой вклад?

Мы так рады, что вы спросили об этом. Основная работа ведется в репозитории sveltejs/language-tools, а обсуждения в канале #language-tools в Discord. Если вы хотите сообщить о проблемах, отправить исправления или помочь с расширениями для новых редакторов и так далее, вы можете найти нас. Увидимся там!

***

Если вы один и тех, для кого поддержка TypeScript была блокирующим фактором начать работать со Svelte (знаю есть такие люди), то настало ваше время! Присоединяйтесь к русскоязычному сообществу Svelte в Телеграм - @sveltejs. Сообщество набирает обороты - нас уже более 1.7К человек! Там вы сможете найти помощь или совет практически по любым вопросам, а также обсудить самые актуальные темы. Если нет времени на чаты, подписывайтесь на канал @sveltejs_public, где публикуются новости и полезные материалы по Svelte. Успехов и удачи!




Комментарии (7):

  1. IonianWind
    /#22075384

    Плагины для продуктов JetBrains планируете?

    • Lodin
      /#22076272

      Эмм, вы переводчика спрашиваете? :)


      А вообще вот: svelte-intellij. Тайпскрипта там ещё нет, но как минимум сам плагин присутствует и с ним можно работать.

  2. pda11111
    /#22076984

    Интересно, получается скоро и поддержка deno будет?

  3. alexprey
    /#22077196

    На сколько я знаю текущая реализация svelte2tsx весьма сырая и интеграция с language server весьма слабая. Я как один из разработчиков svelteintellisence так говорю, потому что пользовал оба решения на проектах. Однако у нашего есть проблемы с поддержкой тайпскрипта и это правда печально(
    Недавно я добавил себе задачу на реализацию поддержи тайпскрипт компонентов, но честно говоря не до конца понимаю его роль в рамках svelte компонента. Только для типизации пропсов или есть еще причины его использования?

    • PaulMaly
      /#22077398

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

      Только для типизации пропсов или есть еще причины его использования?

      Во много, имхо, это дань моде. Все вокруг пишут на TS, а значит это «must-have». Но в целом, понятное дело, что если код приложения написан на TS, а компоненты нет, то получаются пробелы в анализе и приложение не «сшивается воедино».

      • alexprey
        /#22077860

        На самом деле наше решение рассматривалось в качестве основы (https://github.com/sveltejs/language-tools/issues/11), но отказались в итоге из-за отсутствия поддержки тайпскрипта. Но к сожалению, я заметил это уже довольно таки поздно.
        Сейчас удалось вновь вернуться за разработку модуля, пофиксить ряд интересных багов и взглянуть на задачу с тайпскриптом и возможно тогда сможем вновь поднять эту тему на счет приведения ее статуса в оффициальный.


        не без шероховатостей

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

        • ilbu
          /#22092186

          Ого, было бы очень интересно почитать про разработку плагина. Жду :)