Svelte <3 TypeScript

لقد كان دعم الطباعه بلا شك أكثر الميزات المرغوبة والمطلوبة لفترة طويلة وهنا: Svelte يدعم TypeScript رسميًا!



نعتقد أن هذا سيمنحك تجربة تطوير أكثر إمتاعًا. الذي يتوسع بشكل مثالي في التطبيقات الكبيرة ، سواء كنت تستخدم TypeScript أو JavaScript.

جربه الآن

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 الناطق باللغة الروسية على Telegram  -sveltejs . يكتسب المجتمع زخمًا - نحن بالفعل أكثر من 1.7 ألف شخص! هناك يمكنك العثور على مساعدة أو نصيحة حول أي مشكلة تقريبًا ، بالإضافة إلى مناقشة الموضوعات الأكثر إلحاحًا. إذا لم يكن لديك وقت للدردشة ، فقم بالاشتراك في قناة sveltejs_public للحصول على الأخبار والمواد المفيدة على Svelte. حظا سعيدا ونتمنى لك التوفيق!