[JavaScript, TypeScript, SvelteJS] Svelte <3 TypeScript (перевод)
Автор
Сообщение
news_bot ®
Стаж: 6 лет 9 месяцев
Сообщений: 27286
Поддержка Typescript, без сомнения, была самой желанной и востребованной фичей в течении долгого времени и вот она здесь: Svelte официально поддерживает TypeScript!
Мы полагаем, что это даст вам гораздо более приятный опыт разработки. Который прекрасно масштабируется на больших приложениях, независимо от того, используете ли вы TypeScript или JavaScript.
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. Если вы хотите сообщить о проблемах, отправить исправления или помочь с расширениями для новых редакторов и так далее, вы можете найти нас. Увидимся там!
===========
Источник:
habr.com
===========
===========
Автор оригинала: Orta Therox
===========Похожие новости:
- Прекращение разработки библиотеки Moment.js, имеющей 12 млн загрузок в неделю
- [Разработка веб-сайтов, API] Как мы использовали GraphQL в разработке на примере интернет-каталога
- [JavaScript, Node.JS] Nested Sets для Javascript
- [JavaScript, Разработка веб-сайтов] Основы настройки Webpack
- [JavaScript, Программирование, Разработка веб-сайтов] JavaScript: парочка задач на знание рекурсии
- [JavaScript, WebGL, Работа с 3D-графикой, Разработка веб-сайтов] Опыт создания нескольких 3д сцен без перезагрузки страницы (three.js)
- [JavaScript, Программирование, Разработка веб-сайтов] 200 теоретических вопросов по JavaScript
- [JavaScript, VueJS] Используем XSTATE для VueJS
- [CMS, JavaScript, Разработка веб-сайтов, Хостинг] От небольшого вики-портала до хостинга
- [Карьера в IT-индустрии] Как НЕ надо начинать изучать программирование
Теги для поиска: #_javascript, #_typescript, #_sveltejs, #_svelte, #_sveltejs, #_typescript, #_javascript, #_javascript, #_typescript, #_sveltejs
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 18:46
Часовой пояс: UTC + 5
| Автор | Сообщение |
|---|---|
|
news_bot ®
Стаж: 6 лет 9 месяцев |
|
|
Поддержка Typescript, без сомнения, была самой желанной и востребованной фичей в течении долгого времени и вот она здесь: Svelte официально поддерживает TypeScript! Мы полагаем, что это даст вам гораздо более приятный опыт разработки. Который прекрасно масштабируется на больших приложениях, независимо от того, используете ли вы TypeScript или JavaScript.  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
npm install --save-dev @tsconfig/svelte typescript svelte-preprocess svelte-check
+ import autoPreprocess from 'svelte-preprocess';
+ import typescript from '@rollup/plugin-typescript'; export default { ..., plugins: [ svelte({ + preprocess: autoPreprocess() }), + typescript({ sourceMap: !production }) ] } {
"extends": "@tsconfig/svelte/tsconfig.json", "include": ["src/**/*", "src/node_modules"], "exclude": ["node_modules/*", "__sapper__/*", "public/*"], } ❯ 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. =========== Источник: habr.com =========== =========== Автор оригинала: Orta Therox ===========Похожие новости:
|
|
Вы не можете начинать темы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Вы не можете отвечать на сообщения
Вы не можете редактировать свои сообщения
Вы не можете удалять свои сообщения
Вы не можете голосовать в опросах
Вы не можете прикреплять файлы к сообщениям
Вы не можете скачивать файлы
Текущее время: 22-Ноя 18:46
Часовой пояс: UTC + 5