From 92ae3768d6793980c5fba49328139ccf178b896b Mon Sep 17 00:00:00 2001 From: Simon Holthausen Date: Tue, 3 Dec 2024 11:49:56 +0100 Subject: [PATCH 1/2] docs: add tsconfig.json info to TS docs Also fix adjacent code examples closes #14187 --- documentation/docs/07-misc/03-typescript.md | 24 +++++++++++++++------ 1 file changed, 17 insertions(+), 7 deletions(-) diff --git a/documentation/docs/07-misc/03-typescript.md b/documentation/docs/07-misc/03-typescript.md index f4513a9a2dce..040eda858706 100644 --- a/documentation/docs/07-misc/03-typescript.md +++ b/documentation/docs/07-misc/03-typescript.md @@ -40,26 +40,26 @@ If you want to use one of these features, you need to setup up a `script` prepro To use non-type-only TypeScript features within Svelte components, you need to add a preprocessor that will turn TypeScript into JavaScript. -### Using SvelteKit or Vite - -The easiest way to get started is scaffolding a new SvelteKit project by typing `npx sv create`, following the prompts and choosing the TypeScript option. - ```ts /// file: svelte.config.js // @noErrors -import { vitePreprocess } from '@sveltejs/kit/vite'; +import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; const config = { - preprocess: vitePreprocess() + // Note the additional `{ script: true }` + preprocess: vitePreprocess({ script: true }) }; export default config; ``` -If you don't need or want all the features SvelteKit has to offer, you can scaffold a Svelte-flavoured Vite project instead by typing `npm create vite@latest` and selecting the `svelte-ts` option. +### Using SvelteKit or Vite + +The easiest way to get started is scaffolding a new SvelteKit project by typing `npx sv create`, following the prompts and choosing the TypeScript option. ```ts /// file: svelte.config.js +// @noErrors import { vitePreprocess } from '@sveltejs/vite-plugin-svelte'; const config = { @@ -69,6 +69,8 @@ const config = { export default config; ``` +If you don't need or want all the features SvelteKit has to offer, you can scaffold a Svelte-flavoured Vite project instead by typing `npm create vite@latest` and selecting the `svelte-ts` option. + In both cases, a `svelte.config.js` with `vitePreprocess` will be added. Vite/SvelteKit will read from this config file. ### Other build tools @@ -77,6 +79,14 @@ If you're using tools like Rollup or Webpack instead, install their respective S > [!NOTE] If you're starting a new project, we recommend using SvelteKit or Vite instead +## tsconfig.json settings + +When using TypeScript, make sure your `tsconfig.json` is setup correctly. + +- Use a [`target`](https://www.typescriptlang.org/tsconfig/#target) of at least `ES2022`, or a `target` of at least `Es2015` alongside [`useDefineForClassFields`](https://www.typescriptlang.org/tsconfig/#useDefineForClassFields). This ensures that rune declarations on class fields are not messed with, which would break the Svelte compiler +- Set [`verbatimModuleSyntax`](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax) to `true` so that imports are left as-is +- Set [`isolatedModules`](https://www.typescriptlang.org/tsconfig/#isolatedModules) to `true` so that each file is looked at in isolation. TypeScript has a few features which require cross-file analysis and compilation, which the Svelte compiler and tooling like Vite don't do. + ## Typing `$props` Type `$props` just like a regular object with certain properties. From 425444f11de4e3b49624a2204cdbf0334080b81a Mon Sep 17 00:00:00 2001 From: Simon H <5968653+dummdidumm@users.noreply.github.com> Date: Tue, 3 Dec 2024 16:10:52 +0100 Subject: [PATCH 2/2] Update documentation/docs/07-misc/03-typescript.md Co-authored-by: Rich Harris --- documentation/docs/07-misc/03-typescript.md | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/documentation/docs/07-misc/03-typescript.md b/documentation/docs/07-misc/03-typescript.md index 040eda858706..fbf8817069e8 100644 --- a/documentation/docs/07-misc/03-typescript.md +++ b/documentation/docs/07-misc/03-typescript.md @@ -83,7 +83,7 @@ If you're using tools like Rollup or Webpack instead, install their respective S When using TypeScript, make sure your `tsconfig.json` is setup correctly. -- Use a [`target`](https://www.typescriptlang.org/tsconfig/#target) of at least `ES2022`, or a `target` of at least `Es2015` alongside [`useDefineForClassFields`](https://www.typescriptlang.org/tsconfig/#useDefineForClassFields). This ensures that rune declarations on class fields are not messed with, which would break the Svelte compiler +- Use a [`target`](https://www.typescriptlang.org/tsconfig/#target) of at least `ES2022`, or a `target` of at least `ES2015` alongside [`useDefineForClassFields`](https://www.typescriptlang.org/tsconfig/#useDefineForClassFields). This ensures that rune declarations on class fields are not messed with, which would break the Svelte compiler - Set [`verbatimModuleSyntax`](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax) to `true` so that imports are left as-is - Set [`isolatedModules`](https://www.typescriptlang.org/tsconfig/#isolatedModules) to `true` so that each file is looked at in isolation. TypeScript has a few features which require cross-file analysis and compilation, which the Svelte compiler and tooling like Vite don't do.