TypeScript + vue3.0项目实战中遇到的问题及解决方案

理想必须要人们去实现它，它不但需要决心和勇敢而且需要知识。——吴玉章

系列文章目录

 第一章 

论vue3.0和vue2.0区别之编程方式及例子详解

第二章

同一台电脑 实现 vue-cli2和vue-cli3同时并存 及 常见命令

第三章

vue3.0项目实战 - ElementUI框架版

第四章

TypeScript + vue3.0项目实战中遇到的问题及解决方案

第五章

vue3.0项目实战系列文章 - 登录页面

---

目录

系列文章目录

一、关于对TypeScript的疑问

1.ts中的数据类型

 1.为 ref() 标志类型

2.为 reactive() 标注类型

3.为事件处理器标注类型

2.typescript 特点

3.TS的局限

4.什么时候用泛型

5.类型定义在哪？

二、vue3中使用TypeScript

前提

问题

1.需要说明类型

2.引用报错

3.(0 , import_vite.transformWithEsbuild) is not a function

4.ts报错类型“string | null”的参数不能赋给类型“string”的参数。 不能将类型“null”分配给类型“string”

三、未知问题的备份：

1.设置 `@` 指向 `src` 目录

2.控制台不出现css原路径

3.总是报错Failed to resolve import "element-plus" from "src\main.js"

4.main.js关于css+elementPlus的全局配置

5.vs code ts(2307)

---

一、关于对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 = ref('2022')

2.为 reactive() 标注类型

interface List {
  id: number,
  name: string
}

// 这样的情况下，如果创建初始值的时候，没有遵循接口List 的数据类型就会出错
const list: List = reactive({id:100,name:'fell'})

3.为事件处理器标注类型

// 
const handlerChange=(event:Event)=>{
  // console.log(event.target.value);
  console.log((event.target as HTMLButtonElement).value);
}

// aa
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

前提

使用 

问题

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中打开(最好用，最常用)