Svelte <3 TypeScript

Typernetically enhanced web apps

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

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

Screenshot of TypeScript in Svelte
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 to *.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. Если вы хотите сообщить о проблемах, отправить исправления или помочь с расширениями для новых редакторов и так далее, вы можете найти нас. Увидимся там!