Skip to content

Commit f02876b

Browse files
Sync svelte docs (#923)
sync svelte docs Co-authored-by: Rich-Harris <[email protected]>
1 parent e24407c commit f02876b

File tree

1 file changed

+17
-7
lines changed

1 file changed

+17
-7
lines changed

apps/svelte.dev/content/docs/svelte/07-misc/03-typescript.md

Lines changed: 17 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -40,26 +40,26 @@ If you want to use one of these features, you need to setup up a `script` prepro
4040

4141
To use non-type-only TypeScript features within Svelte components, you need to add a preprocessor that will turn TypeScript into JavaScript.
4242

43-
### Using SvelteKit or Vite
44-
45-
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.
46-
4743
```ts
4844
/// file: svelte.config.js
4945
// @noErrors
50-
import { vitePreprocess } from '@sveltejs/kit/vite';
46+
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
5147

5248
const config = {
53-
preprocess: vitePreprocess()
49+
// Note the additional `{ script: true }`
50+
preprocess: vitePreprocess({ script: true })
5451
};
5552

5653
export default config;
5754
```
5855

59-
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.
56+
### Using SvelteKit or Vite
57+
58+
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.
6059

6160
```ts
6261
/// file: svelte.config.js
62+
// @noErrors
6363
import { vitePreprocess } from '@sveltejs/vite-plugin-svelte';
6464

6565
const config = {
@@ -69,6 +69,8 @@ const config = {
6969
export default config;
7070
```
7171

72+
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.
73+
7274
In both cases, a `svelte.config.js` with `vitePreprocess` will be added. Vite/SvelteKit will read from this config file.
7375

7476
### Other build tools
@@ -77,6 +79,14 @@ If you're using tools like Rollup or Webpack instead, install their respective S
7779

7880
> [!NOTE] If you're starting a new project, we recommend using SvelteKit or Vite instead
7981
82+
## tsconfig.json settings
83+
84+
When using TypeScript, make sure your `tsconfig.json` is setup correctly.
85+
86+
- 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
87+
- Set [`verbatimModuleSyntax`](https://www.typescriptlang.org/tsconfig/#verbatimModuleSyntax) to `true` so that imports are left as-is
88+
- 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.
89+
8090
## Typing `$props`
8191

8292
Type `$props` just like a regular object with certain properties.

0 commit comments

Comments
 (0)