Just to elaborate on Rich's response, I was intrigued by the impact of importing Svelte in certain configurations.
the TS compiler struggles with a .svelte file
To address this issue (specifically in version 3.35.0), Svelte includes a file located at
svelte/types/runtime/ambient.d.ts
:
declare module '*.svelte' {
export { SvelteComponentDev as default } from 'svelte/internal';
}
This enables the TS compiler to analyze .svelte files. Additionally, it defines the typings for all runtime functionalities accessible in a .svelte script, such as set_attributes() (refer to svelte/internal for more details). Merely using declare module '*.svelte' {} would cover only a portion, as you would also require those runtime declarations.
To ensure that the TypeScript compiler processes .svelte files, you must reference the types from that file,
svelte/types/runtime/ambient.d.ts
, in some way. This reference is indirectly made by the package's entrypoint typings file (specified in the
types field of Svelte's
package.json),
types/runtime/index.d.ts, indicating that referencing the entrypoint typings file would be a recommended approach to stay resilient against future directory structure changes.
Incorporating @tsconfig/svelte/tsconfig.json effectively meets this requirement, as the referenced tsconfig file integrates the node module "svelte" through its compilerOptions.types property:
{
// ... Omitted...
"compilerOptions": {
// ... Omitted...
"types": ["svelte"]
}
}
This inclusion signifies that the compilation environment will involve this reference:
/// <reference types="svelte" />
You could manually write the same line, though extending the Svelte tsconfig would align with possible future Svelte enhancements.
The import for side-effects approach serves the same purpose:
import "svelte";
Despite extending the Svelte tsconfig, I encountered the issue of Svelte types not being referenced. This was attributed to this line in my tsconfig:
{
"extends": "@tsconfig/svelte/tsconfig.json",
// ... Omitted...
"compilerOptions": {
// ... Omitted...
"types": ["node"] // This overrides ["svelte"]!
}
}
To rectify this issue, I replaced
"types": ["node"]
with
"types": ["node", "svelte"]
.