TypeScript + vue3.0项目实战中遇到的问题及解决方案
系列文章目录TypeScript介绍ts中的数据类型1.为 ref() 标志类型2.为 reactive() 标注类型3.为事件处理器标注类型typescript 特点TS的局限什么时候用泛型类型定义在哪？vue3中使用TypeScript前提问题1.需要说明类型2.引用报错3.(0 , import_vite.transformWithEsbuild) is not a function4.ts
理想必须要人们去实现它，它不但需要决心和勇敢而且需要知识。——吴玉章
系列文章目录
第一章
第二章
同一台电脑 实现 vue-cli2和vue-cli3同时并存 及 常见命令
第三章
第四章
TypeScript + vue3.0项目实战中遇到的问题及解决方案
第五章
目录
3.(0 , import_vite.transformWithEsbuild) is not a function
4.ts报错类型“string | null”的参数不能赋给类型“string”的参数。 不能将类型“null”分配给类型“string”
3.总是报错Failed to resolve import "element-plus" from "src\main.js"
4.main.js关于css+elementPlus的全局配置
一、关于对TypeScript的疑问
1.ts中的数据类型
ts必须指定数据类型（给人理解将数据类型分成3种）
1.js有的类型
boolean类型、number类型、string类型、array类型、undefined、null
2.ts多出的类型
tuple类型（元组类型）、enum类型（枚举类型）、any类型（任意类型）
ps: tuple类型是比pair更加通用的类型,就是说,tuple是一个多元组
3.特别的类型
void类型（没有任何类型）表示定义方法没有返回值
never类型：是其他类型（包括null和undefined）的子类型，代表从不会出现的值
这意味着声明never变量只能被never类型所赋值
1.为 ref() 标志类型
const year:Ref<string|number> = ref('2022')2.为 reactive() 标注类型
interface List {
id: number,
name: string
}
// 这样的情况下，如果创建初始值的时候，没有遵循接口List 的数据类型就会出错
const list: List = reactive({id:100,name:'fell'})
3.为事件处理器标注类型
// <input type="text" @change="handleChange">
const handlerChange=(event:Event)=>{
// console.log(event.target.value);
console.log((event.target as HTMLButtonElement).value);
}
// <button @click="handleClick">aa</button>
function handleClick=(event: Event)=> {
console.log((event.target as HTMLButtonElement).innerHTML)
}
2.typescript 特点
相较于js(ES6+), ts的基础有以下几大特点：
- ts是js的超集，即你可以在ts中使用原生js语法。
- ts需要静态编译，它提供了强类型与更多面向对象的内容。
- ts最终仍要编译为弱类型，基于对象的原生的js，再运行。故ts相较java/C#这样天生面向对象语言是有区别和局限的
- ts是由微软牵头主导的，其语法风格与概念主要来自C#
3.TS的局限
- ts是js的超集，这意味着在ts中写js是完全兼容的，但同时，ts的纯洁性无法保证。
- 程序是否加入类型声明，是否使用面向对象完全取决于开发者本身，而这种过分的宽容很不利于团队合作的复杂长周期开发。
- 如果不对ts项目进行严格的代码规范，那么使用ts非但不能提高项目的安全性和严谨性，反而会给自己挖很多坑。
4.什么时候用泛型
什么是泛型？泛型解决了什么问题？
- 泛型是让一个组件支持多种类型
- 使用场景
比如你定义了一个方法：
function foo (arg:number):number {
return arg
}当你需要让这个方法支持string类型的时候，你不使用泛型的话，你可能这么写：
function foo(arg: number | string): number | string {
return arg
}这里有个问题，会出现传入number，返回string这样的情况，不够严谨。
这个时候你就会想到泛型了。
function foo(arg: T): T {
return arg
}当然，泛型的玩法不都是那么简单的，想要玩出更高阶的泛型写法，可以多看看第三方库写的类型定义文件，看看别人是怎么写各种泛型的。
5.类型定义在哪？
简单的不重用的就直接写，如上面的示例方法。
需要重用的一般来说就在方法实现的文件夹自定义一个类型，并export出去，方便其他使用者使用。
export type fooItem = string | number | null
function foo(arg:fooItem):void {
console.log(arg)
}二、vue3中使用TypeScript
前提
使用
<script lang="ts">
****
</script>问题
1.需要说明类型
//index: boolean
//index: string[]
//index:number
const selectClick = (index: number) => {
};2.引用报错
解决方案：
不要用@引用
import {
roleList
} from "../request/api.js";3.(0 , import_vite.transformWithEsbuild) is not a function
npm run dev 项目启动时报错 (0 , import_vite.transformWithEsbuild) is not a function
解决方案：
更新 vite 版本后解决；原版本vite：2.3.7升级到 vite：2.6.13
4.ts报错类型“string | null”的参数不能赋给类型“string”的参数。 不能将类型“null”分配给类型“string”
源代码：
data.now_name = localStorage.getItem("systemFlag");解决方案：
芜湖~加个类型即可 ～(￣▽￣～)~
data.now_name = localStorage.getItem("systemFlag")|| '';三、未知问题的备份：
1.设置 `@` 指向 `src` 目录
resolve: {
alias: [ //配置别名
{
find: '@',
replacement: resolve(__dirname, 'src')// 设置 `@` 指向 `src` 目录
}
],
// 情景导出 package.json 配置中的exports字段
conditions: [],
// 导入时想要省略的扩展名列表
// 不建议使用 .vue 影响IDE和类型支持
extensions: ['.mjs', '.js', '.ts', '.jsx', '.tsx', '.json']
},2.控制台不出现css原路径
devSourcemap: true,
css: {
devSourcemap: true,
// 配置 css modules 的行为
modules: {},
// postCss 配置
postcss: {},
//指定传递给 css 预处理器的选项
preprocessorOptions: {
scss: {
additionalData: `$injectedColor:orange;`
}
}
},3.总是报错Failed to resolve import "element-plus" from "src\main.js"
修改package.json配置，将引入包全部删掉，重新install。
{
"name": "vue-manage-system",
"version": "0.1.0",
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build",
"serve": "vite preview"
},
"dependencies": {
"axios": "^0.21.1",
"element-plus": "^2.2.13",
"vue": "^3.2.36",
"vue-cropperjs": "^5.0.0",
"vue-i18n": "^9.0.0",
"vue-router": "^4.0.10",
"vue-schart": "^2.0.0",
"vuex": "^4.0.2",
"wangeditor": "^4.7.4"
},
"devDependencies": {
"@iconify-json/ep": "^1.1.4",
"@types/node": "^17.0.35",
"@vitejs/plugin-vue": "^2.3.3",
"sass": "^1.52.1",
"typescript": "^4.7.2",
"unocss": "^0.34.1",
"unplugin-vue-components": "^0.19.5",
"vite": "^2.9.9",
"vite-ssg": "^0.20.0",
"vue-tsc": "^0.34.16"
},
"license": "MIT"
}
4.main.js关于css+elementPlus的全局配置
import {
createApp
} from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
/* 优先放前面 */
// import "./assets/css/elementUi.css";
import "./assets/css/public.css";
import "./assets/css/color-dark.css";
// 全局引用
import ElementPlus from 'element-plus';
// 引用所有样式
import 'element-plus/dist/index.css';
// 引入中文语言
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
app.component(key, component)
}
app
.use(store)
.use(router)
.use(ElementPlus, {
locale: zhCn,
size: 'small',
zIndex: 3000
})
.mount('#app')5.vs code ts(2307)
ts本身不支持@的使用，当配置好@的使用之后，运行没问题，但是浏览器报错：找不到文件Cannot find module ‘@*****'
方案:将项目单独在vscode中打开(最好用，最常用)
前往低代码交流专区
更多推荐
0
0- 0
已为社区贡献15条内容
所有评论(0)