Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

document generated tsconfig.json, move compilerOptions into user config #4633

Merged
merged 7 commits into from
Apr 18, 2022
Merged

document generated tsconfig.json, move compilerOptions into user config #4633

Changes from 1 commit
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
41e7002
document generated tsconfig.json
Rich-Harris Apr 15, 2022
64478c1
remove non-essential stuff, tweak description of importsNotUsedAsValues
Rich-Harris Apr 15, 2022
49d3c08
add user config
Rich-Harris Apr 15, 2022
d8a7dad
Merge branch 'master' into document-tsconfig
Rich-Harris Apr 15, 2022
7a3f3aa
update default jsconfig
Rich-Harris Apr 15, 2022
9777c7a
simplify generated tsconfig
Rich-Harris Apr 15, 2022
2bf8269
changeset
Rich-Harris Apr 15, 2022
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
67 changes: 65 additions & 2 deletions documentation/docs/15-types.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,7 @@ title: Types

### Generated types

The [`RequestHandler`](#sveltejs-kit-requesthandler) and [`Load`](#sveltejs-kit-load) types both accept a `Params` argument allowing you to type the `params` object. For example this endpoint expects `foo`, `bar` and `baz` params:
The `RequestHandler` and `Load` types both accept a `Params` argument allowing you to type the `params` object. For example this endpoint expects `foo`, `bar` and `baz` params:

```js
/// file: src/routes/[foo]/[bar]/[baz].js
Expand Down Expand Up @@ -38,7 +38,7 @@ export type RequestHandler<Body = any> = GenericRequestHandler<
export type Load<
InputProps extends Record<string, any> = Record<string, any>,
OutputProps extends Record<string, any> = InputProps
> = GenericLoad<{ foo: string; bar: string; baz: string }, InputProps, OutputProps>
> = GenericLoad<{ foo: string; bar: string; baz: string }, InputProps, OutputProps>;
```

These files can be imported into your endpoints and pages as siblings, thanks to the [`rootDirs`](https://www.typescriptlang.org/tsconfig#rootDirs) option in your TypeScript configuration:
Expand Down Expand Up @@ -74,3 +74,66 @@ export async function get({ params }) {
> For this to work, your own `tsconfig.json` or `jsconfig.json` should extend from the generated `.svelte-kit/tsconfig.json` (where `.svelte-kit` is your [`outDir`](/docs/configuration#outdir)):
>
> { "extends": "./.svelte-kit/tsconfig.json" }

#### Default tsconfig.json

The generated `.svelte-kit/tsconfig.json` file contains a mixture of options. Some are generated programmatically based on your project configuration, and should generally not be overridden without good reason:

```json
/// file: .svelte-kit/tsconfig.json
{
"compilerOptions": {
"baseUrl": "..",
"paths": {
"$lib": "src/lib",
"$lib/*": "src/lib/*"
},
"rootDirs": ["..", "./types"]
},
"include": ["../src/**/*.js", "../src/**/*.ts", "../src/**/*.svelte"],
"exclude": ["../node_modules/**", "./**"]
}
```

Others are required for SvelteKit to work properly, and should also be left untouched unless you know what you're doing:

```json
/// file: .svelte-kit/tsconfig.json
{
"compilerOptions": {
// you must use `import type` to
// import types, rather than `import`,
// for svelte-preprocess to work
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

The last line isn't 100% correct, it's more a hint like "if all of the imports are used as types, throw an error". Writing this, I'm wondering how this plays out in conjunction with "preserveValueImports".. maybe we can remove this option. Need to test this out, don't know when I will get to that.

Btw since TS 4.5 you can mix value and type imports by doing import { type Foo, bar } ...

Copy link
Member Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I updated it — it's slightly tricky because we need to communicate how it affects how people should write code, more than what the option actually does, but it also needs to make sense in context

"importsNotUsedAsValues": "error",

// Vite compiles one TypeScript module
// at a time, rather than compiling
// the entire module graph
"isolatedModules": true,

// TypeScript cannot 'see' when you
// use an imported value in your
// markup, so we need this
"preserveValueImports": true
}
}
```

The remaining options are simply recommended defaults, included because they will make life easier. You can freely override these:

```json
/// file: .svelte-kit/tsconfig.json
{
"compilerOptions": {
"esModuleInterop": true,
"forceConsistentCasingInFileNames": true,
"lib": ["es2020", "DOM"],
"moduleResolution": "node",
"module": "es2020",
"resolveJsonModule": true,
"skipLibCheck": true,
"sourceMap": true,
"target": "es2020"
}
}
```