feat(create-app): improve client types (#3214)

Author: fi3ework

docs/guide/features.md

@@ -38,7 +38,13 @@ Note that because `esbuild` only performs transpilation without type information
 
 ### Client Types
 
-Vite's default types are for its Node.js API. To shim the environment of client side code in a Vite application, add `vite/client` to `compilerOptions.types` of your `tsconfig`:
+Vite's default types are for its Node.js API. To shim the environment of client side code in a Vite application, add a `d.ts` declaration file:
+
+```typescript
+/// <reference types="vite/client" />
+```
+
+Also, you can add `vite/client` to `compilerOptions.types` of your `tsconfig`:
 
 ```json
 {

packages/create-app/template-lit-element-ts/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

packages/create-app/template-lit-element-ts/tsconfig.json

@@ -2,7 +2,6 @@
   "compilerOptions": {
     "module": "esnext",
     "lib": ["es2017", "dom", "dom.iterable"],
-    "types": ["vite/client"],
     "declaration": true,
     "emitDeclarationOnly": true,
     "outDir": "./types",

packages/create-app/template-preact-ts/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

packages/create-app/template-preact-ts/tsconfig.json

@@ -2,7 +2,6 @@
   "compilerOptions": {
     "target": "ESNext",
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "types": ["vite/client"],
     "allowJs": false,
     "skipLibCheck": false,
     "esModuleInterop": false,

packages/create-app/template-react-ts/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

packages/create-app/template-react-ts/tsconfig.json

@@ -2,7 +2,6 @@
   "compilerOptions": {
     "target": "ESNext",
     "lib": ["DOM", "DOM.Iterable", "ESNext"],
-    "types": ["vite/client"],
     "allowJs": false,
     "skipLibCheck": false,
     "esModuleInterop": false,

packages/create-app/template-svelte-ts/src/global.d.ts packages/create-app/template-svelte-ts/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

packages/create-app/template-svelte/src/global.d.ts packages/create-app/template-svelte/src/vite-env.d.ts

@@ -8,7 +8,6 @@
     "sourceMap": true,
     "resolveJsonModule": true,
     "esModuleInterop": true,
-    "types": ["vite/client"],
     "noEmit": true,
     "noUnusedLocals": true,
     "noUnusedParameters": true,

packages/create-app/template-vanilla-ts/src/vite-env.d.ts

@@ -0,0 +1 @@
+/// <reference types="vite/client" />

packages/create-app/template-vanilla-ts/tsconfig.json

@@ -8,8 +8,7 @@
     "sourceMap": true,
     "resolveJsonModule": true,
     "esModuleInterop": true,
-    "lib": ["esnext", "dom"],
-    "types": ["vite/client"]
+    "lib": ["esnext", "dom"]
   },
   "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
 }