一、关于对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)
    .use(store)
    .use(router)
    .use(ElementPlus, {
        locale: zhCn,
        size: 'small',
        zIndex: 3000
    .mount('#app') 
5.vs code ts(2307) 
ts本身不支持@的使用，当配置好@的使用之后，运行没问题，但是浏览器报错：找不到文件Cannot find module ‘@*****' 
方案:将项目单独在vscode中打开(最好用，最常用)
                    系列文章目录TypeScript介绍ts中的数据类型1.为 ref() 标志类型2.为 reactive() 标注类型3.为事件处理器标注类型typescript 特点TS的局限什么时候用泛型类型定义在哪？vue3中使用TypeScript前提问题1.需要说明类型2.引用报错3.(0 , import_vite.transformWithEsbuild) is not a function4.ts报错类型“string | null”的参数..................
				Vue3.0后台管理系统
功能已开发完成，新需求请提
vue版本代码：  :  vue版本在线地址：http:  react版本代码：  :  angular版本代码：  :  angular版本在线地址：  :  节点接口：  :  doc文档：  : 
 github地址：  :  gitee地址：  ://gitee.com/yiming_chang/CURD-TS
帮助你获取最新的API [vue3.0中文文档地址]：  ://vue3js.cn/docs/zh/ [element-plus中文文档地址]：  :  [composition-Api中文文档地址]：  :  [vue-router-next文档地址]：  :  [next.vuex文档地址]：  ://next.vuex.vuejs.org/ [vite源码]：  :  [vite文档地址]：  ://vi
				VUE-H5-TEMPLATE
Vue-H5-Template 项目以小商城作为基本的内容演示，使用 Vue3.0+Typescript+Vant 搭建 移动端h5页面 开发所需的基础模板，并提供一些通用型的解决方案及扩展功能。
部分页面预览：
手机扫码预览：
# 项目下载
# 克隆项目很慢？将地址中的 `github.com` 替换为 `github.com.cnpmjs.org` 试试
$ git clone git@github.com:Ewall1106/vue-h5-template.git
# 安装运行
$ yarn & yarn dev
:hammer: 开发规范
Eslint 校检及错误提示
Prettier 统一代码风格
StyleLint 样式风格
Typescript 语法支持
:hammer: 初始化配置
vw 移动端适配
css 预处理器
				解决Cannot find module '@sentry/webpack-plugin'，Cannot find module '@sentry/browser'，Cannot find module '@sentry/cli'等问题。<br/>
下载后，解压后文件夹，放在vue项目的node_modules文件夹下，即可。
问题： npm run dev 项目启动时报错 (0 , import_vite.transformWithEsbuild) is not a function
解决：更新 vite 版本后解决；原版本vite：2.3.7升级到 vite：2.6.13
				报错Cannot find module 'XXXXXX ’ or its corresponding type declarations
vite.config.ts
tsconfig.json
配置baseUrl，paths
					Cannot find module ‘vue‘. Did you mean to set the ‘moduleResolution‘ option to ‘node‘, or to add ali
				现发现只要是报错 Error: Cannot find module ‘xxx’（例如 Error: Cannot find module ‘webpack’）这类的问题都可以用下面的方法解决。
报错内容如下：
运行 npm install 没问题，运行 npm run serve 就会报错：
Error: Cannot find module ‘webpack’
解决方案：
到项目文件夹下，删除node_modules 文件和package-lock.json 文件。注意不是packag...
				在Vue 3.0中，使用`defineEmits`来定义组件的emits选项，而不是在组件中直接声明`emits`选项。
如果您想手动触发一个事件，可以使用`$emit`方法。例如，如果您有一个名为`myEvent`的事件，您可以在组件方法中使用`this.$emit('myEvent', data)`来手动触发它。
以下是一个示例组件，展示如何在Vue 3.0中使用`defineEmits`和`$emit`：
```typescript
import { defineComponent } from 'vue';
export default defineComponent({
  emits: ['myEvent'],
  methods: {
    handleClick() {
      // 在此处手动触发myEvent事件
      this.$emit('myEvent', { eventData: 'example data' });
  template: `
    <button @click="handleClick">Click me</button>
请注意，在组件中使用`this.$emit`之前，必须将事件名称添加到`emits`选项中。
一、关于对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)

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