Improve create-svelte types (#517)

- Re-added globals.d.ts to JS template
- Fixed globals.d.ts TSDoc notation and added vite/client type references
- Upped tsconfig target to es2018
- Enable checkJs in tsconfig

.changeset/thin-grapes-dance.md

@@ -0,0 +1,5 @@
+---
+'create-svelte': patch
+---
+
+create-svelte: globals.d.ts TSDoc fixes, add vite/client types to js/tsconfig

packages/create-svelte/cli/modifications/add_typescript.js

@@ -17,7 +17,6 @@ export default async function add_typescript(cwd, yes) {
 		update_component(cwd, 'src/routes/index.svelte', [['<script>', '<script lang="ts">']]);
 		add_svelte_preprocess_to_config(cwd);
 		add_tsconfig(cwd);
-		add_d_ts_file(cwd);
 
 		console.log(
 			bold(
@@ -37,10 +36,6 @@ function add_tsconfig(cwd) {
 	copy_from_ts_template(cwd, 'tsconfig.json');
 }
 
-function add_d_ts_file(cwd) {
-	copy_from_ts_template(cwd, 'src', 'globals.d.ts');
-}
-
 function copy_from_ts_template(cwd, ...path) {
 	fs.copyFileSync(join(__dirname, 'ts-template', ...path), join(cwd, ...path));
 }

packages/create-svelte/template/globals.d.ts

@@ -0,0 +1,30 @@
+/// <reference types="@sveltejs/kit" />
+/// <reference types="vite/client" />
+
+//#region Ensure Svelte file endings have a type for TypeScript
+/**
+ * These declarations tell TypeScript that we allow import of Svelte files in TS files, e.g.
+ * ```js
+ * import Component from './Component.svelte';
+ * ```
+ */
+declare module '*.svelte' {
+	export { SvelteComponent as default } from 'svelte';
+}
+//#endregion
+
+//#region Ensure image file endings have a type for TypeScript
+/**
+ * Tell TypeScript that we allow import of images, e.g.
+ * ```html
+ * <script lang='ts'>
+ * 	import successkid from 'images/successkid.jpg';
+ * </script>
+ * <img src="{successkid}">
+ * ```
+ */
+declare module '*.(gif|jpg|jpeg|png|svg|webp)' {
+	const value: string;
+	export = value;
+}
+//#endregion

packages/create-svelte/template/jsconfig.json

@@ -1,5 +1,6 @@
 {
 	"compilerOptions": {
+		"baseUrl": ".",
 		"paths": {
 			"$app/*": [".svelte/dev/runtime/app/*", ".svelte/build/runtime/app/*"],
 			"$lib/*": ["src/lib/*"]

packages/create-svelte/template/src/routes/index.svelte

@@ -6,6 +6,7 @@
 	<h1>Hello world!</h1>
 
 	<Counter />
+
 	<p>Visit <a href="https://svelte.dev">svelte.dev</a> to learn how to build Svelte apps.</p>
 </main>
 

packages/create-svelte/ts-template/tsconfig.json

@@ -1,7 +1,7 @@
 {
 	"compilerOptions": {
 		"moduleResolution": "node",
-		"target": "es2017",
+		"target": "es2018",
 		/**
 			svelte-preprocess cannot figure out whether you have a value or a type, so tell TypeScript
 			to enforce using \`import type\` instead of \`import\` for Types.
@@ -18,6 +18,7 @@
 		"forceConsistentCasingInFileNames": true,
 		"baseUrl": ".",
 		"allowJs": true,
+		"checkJs": true,
 		"paths": {
 			"$app/*": [".svelte/dev/runtime/app/*", ".svelte/build/runtime/app/*"],
 			"$components/*": ["src/components/*"]