【Vite基础】003-Vite 中使用 TypeScript
文章目录
一、Vite 天生支持 ts
1、只编译,不校验
在开发环境中,Vite 使用 es build ,es build 本身支持 ts 语法!
只编译(将 ts 编译成 js),不校验。
2、手动校验
# 只校验,不输出编译的文件
tsc --noEmit
二、编译代码验证
直接使用 ts 语法!
第一步:在 src 目录下新建 test.ts 文件
interface People {
name: string;
}
export const people: People = {
name: '大哥刘备',
};
第二步:在 App.jsx 文件下导入并使用
import { defineComponent } from "vue";
import { people } from './test.ts'
export default defineComponent({
setup() {
return () => <div class="root">Hello { people.name } !</div>;
}
});
第三步:运行并访问
npm run dev 便于复制!
第四步:结论
vite 支持 ts 语法,只编译,可直接使用,但不校验!
三、不校验代码验证
第一步:修改 test.ts
interface People {
name: string;
}
export const people: People = {
name: '大哥刘备',
age: 22,
};
第二步:发现 vs code 报错
说明:vs code 天生支持 ts 语法校验!
第三步:重新运行并访问
没有任何报错!(其实不重新运行也是可以看出来的,如果有错误会立即显示!)
四、使 Vite 编译时支持校验
第一步:安装 typescript
yarn add typescript
第二步:创建 tsconfig.json 文件
下面是一个比较常规的 ts 配置!
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"baseUrl": ".",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom"
],
"skipLibCheck": true
},
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue"
],
"exclude": [
"node_modules"
]
}
第三步:修改 package.json
scripts 下的 build 的值
vite build
改为tsc --noEmit && vite build
{
"name": "vite-vue3",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "tsc --noEmit && vite build",
"preview": "vite preview"
},
"dependencies": {
"@postcss-plugins/console": "^0.2.5",
"@vitejs/plugin-vue-jsx": "^2.0.1",
"typescript": "^4.8.4",
"vue": "^3.2.37"
},
"devDependencies": {
"@vitejs/plugin-vue": "^3.1.0",
"less": "^4.1.3",
"vite": "^3.1.0"
}
}
第四步:编译
npm run build
五、使 Vite 支持 .vue 文件的校验
第一步:安装 vue-tsc
yarn add vue-tsc
第二步:修改 package.json
scripts 下的 build 的值
tsc --noEmit && vite build
改为vue-tsc --noEmit && tsc --noEmit && vite build
{
"name": "vite-vue3",
"private": true,
"version": "0.0.0",
"type": "module",
"scripts": {
"dev": "vite",
"build": "vue-tsc --noEmit && tsc --noEmit && vite build",
"preview": "vite preview"
},
"dependencies": {
"@postcss-plugins/console": "^0.2.5",
"@vitejs/plugin-vue-jsx": "^2.0.1",
"typescript": "^4.8.4",
"vue": "^3.2.37",
"vue-tsc": "^0.40.13"
},
"devDependencies": {
"@vitejs/plugin-vue": "^3.1.0",
"less": "^4.1.3",
"vite": "^3.1.0"
}
}
第三步:编译
结果省略!
npm run build
六、isolatedModules 配置
1、概述
说明
推荐将这个配置写在 tsconfig.json 文件里面;
配置
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"baseUrl": ".",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom"
],
"skipLibCheck": true,
"isolatedModules": true,
},
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue"
],
"exclude": [
"node_modules"
]
}
2、作用1:重新导出类型报错
如果没有此配置,程序会出错,但没有警告!
代码
运行时出错
开启 isolatedModules 后
修正写法后的代码
运行并访问的结果
正常无错!
3、作用2:访问枚举
代码
关闭时,正常不报错!
运行时出错
开启 isolatedModules 后
报错!
补充
当不使用 declare 关键字声明枚举的时候是可以直接使用,不报错的!
declare 参考文章:
1、TS之declare的简单使用 https://blog.csdn.net/youhebuke225/article/details/125664535
2、ts的.d.ts和declare究竟是干嘛用的 https://blog.csdn.net/qq_34551390/article/details/118800743
4、作用3:ts 文件中没有导入或导出则报错
不常用!
报错
添加导出后
七、clent types
1、概述
Vite 提供了一些内置的对象,但默认不知道这些变量的类型,需要配置以令其显示。
2、演示
第一步:修改 tsconfig.json
添加 “types”: [“vite/client”],
{
"compilerOptions": {
"target": "esnext",
"module": "esnext",
"moduleResolution": "node",
"strict": true,
"jsx": "preserve",
"sourceMap": true,
"resolveJsonModule": true,
"esModuleInterop": true,
"baseUrl": ".",
"paths": {
"@/*": [
"src/*"
]
},
"lib": [
"esnext",
"dom"
],
"skipLibCheck": true,
"types": ["vite/client"],
"isolatedModules": true,
},
"include": [
"src/**/*.ts",
"src/**/*.d.ts",
"src/**/*.tsx",
"src/**/*.vue"
],
"exclude": [
"node_modules"
]
}
第二步:查看
提示
类型
3、支持哪些类型
支持的类型
- Asset imports:静态文件
- env:环境变量
- HMR API:import.meta.hot;
静态文件导入举例
import VueSVG from './assets/vue.svg';