TypeScript :使用mock提供数据&as const 的使用&tsconfig.json配置

前言

在现代前端开发中，测试和数据模拟变得越来越重要，尤其是在构建复杂的用户界面时。使用 Mock 数据可以帮助开发者在没有真实后端的情况下进行有效的开发和调试。本文将详细介绍如何在项目中使用 Mock 提供数据，包括安装所需的依赖、配置 Vite 和 TypeScript，以及如何利用 as const 和元组等特性来增强数据的类型安全性。此外，我们还将探讨 tsconfig.json 配置文件的相关设置，以确保项目的最佳实践和灵活性。通过这些配置，您将能够实现更高效的开发体验，轻松应对动态数据的需求，无论您是在开发新功能还是进行单元测试。无论您是刚入门的开发者还是经验丰富的工程师，本指南都将为您提供实用的建议和技巧，帮助您掌握 Mock 数据的使用。

使用mock提供数据

简单使用

下载好所有需要的依赖
注意这个
npm i mockjs vite-plugin-mock@2.9.8 -D

npm i vue-router axios -S

vite.config.ts的配置

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { viteMockServe } from 'vite-plugin-mock'
// https://vitejs.dev/config/
export default defineConfig({
  plugins: [
    vue(),
    // mock服务
    viteMockServe({
      supportTs: false,
      logger: false,
      mockPath: "./src/mock/",
    }),
  ]
})

混入

对象的

// 对象的混入
interface Name{
  name:string
}

interface Age{
  age:number
}
let a:Name={name:"youren"}
let b:Age={age:22}
let obj = Object.assign(a,b)
console.log(obj)

as const 的使用

在TypeScript中，as const 是一种类型断言，但它具有特殊的行为，不仅仅是告诉TypeScript编译器“我确定这个值的类型是这样的”，而是实际地改变了值的类型，使其成为一个只读且每个元素类型都被固定下来的元组（tuple）类型。

当你对一个数组使用 as const 时，TypeScript会创建一个只读的元组类型，其中每个元素的类型都被固定为它们在数组字面量中的类型，并且整个数组的类型也被固定下来，不再是普通的数组类型。这意味着你不能向这个数组添加新的元素，也不能修改现有元素的值（如果元素是可变的）。

将数组里面的元素可以展开使用

// as const 也是类型断言的一种
const args = [8, 5];
// const args: number[]
const angle = Math.atan2(...args); // error! Expected 2 arguments, but got 0 or more.
console.log(angle);

const args = [8, 5] as const;
// const args: readonly [8, 5]
const angle = Math.atan2(...args); // okay
console.log(angle);

元组

我们知道数组中元素的数据类型都一般是相同的（any[] 类型的数组可以不同），如果存储的元素数据类型不同，则需要使用元组。

元组中允许存储不同类型的元素，元组可以作为参数传递给函数。

var tuple_name = [value1,value2,value3,…value n]

元组运算

我们可以使用以下两个函数向元组添加新元素或者删除元素：

push() 向元组添加元素，添加在最后面。

pop() 从元组中移除元素（最后一个），并返回移除的元素。

var a =[10,"Runoob"] 
var [b,c] = a 
console.log( b )    
console.log( c )

tsconfig.json配置

在TS的项目中，TS最终都会被编译JS文件执行，TS编译器在编译TS文件的时候都会先在项目根目录的tsconfig.json文件，根据该文件的配置进行编译，默认情况下，如果该文件没有任何配置，TS编译器会默认编译项目目录下所有的.ts、.tsx、.d.ts文件。实际项目中，会根据自己的需求进行自定义的配置，下面就来详细了解下tsconfig.json的文件配置。

files : 表示编译需要编译的单个文件列表

"files": [
  // 指定编译文件是src目录下的a.ts文件
  "scr/a.ts"
]

"include": [
   "scr" // 会编译src目录下的所有文件，包括子目录
   "scr/*" // 只会编译scr一级目录下的文件
  "scr/*/*" // 只会编译scr二级目录下的文件
]

"exclude": [
  // 排除src目录下的lib文件夹下的文件不会编译
  "src/lib"
]

"compileOnSave": true

typeRoots：指定额外的类型声明文件的搜索位置，通常用于指定全局声明文件的位置。

include：指定哪些文件需要参与编译，可以使用通配符匹配多个文件。

exclude：指定哪些文件不参与编译，可以使用通配符排除多个文件

{
  "compilerOptions": {
    "typeRoots": ["./typings"]
  }
}