Перевод Svelte lt3 TypeScript

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

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

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

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

npx degit sveltejs/template svelte-typescript-appcd svelte-typescript-appnode 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-checkLoading svelte-check in workspace: /Users/ortatherox/dev/svelte/example-appGetting Svelte diagnostics...====================================/Users/ortatherox/dev/svelte/example-app/src/App.svelte:3:2Error: Type '123' is not assignable to type 'string'. (ts)====================================svelte-check found 1 errorerror Command failed with exit code 1.

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

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

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

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