ts实践与vben框架的ts用法分析 #

1.ts实践 #

如何在项目中用好 TypeScript 🤔 - 掘金 (juejin.cn)

对应的代码练习

• 1.善用类型注释(ec13e8b)
• 2.善用类型扩展(5027d5c)
• 3.1第三方声明文件(5619ba4)
• 3.2自定义声明文件(b4aae36)
• 3.3全局类型声明(bb582e3)
• 4.Js新特性-可选链和空值合并运算符
• 5.访问限定修饰符(504f5ed)
• 6.1类型断言(b96705d)
• 6.2类型守卫(96fe471)
• 6.3双重断言(59ba2ff)
• 7.善用常量枚举(f78d5a7)
• 8.高级类型(8750000)

2.ts处理返回接口 #

🚀 TS项目如何高效处理接口返回数据 - 掘金 (juejin.cn)

通常项目中用到ts的时候就是类型校验

主要还是接口数据的类型的校验

例如

const fetchInfo = async (url: string, id: string) => {
  return $http.get(url, params);
}

const res = await fetchInfo('/info', '886');

// 假设 `/info` 接口返回如下数据
{ id: '886',
  🙈:{ 
      name: 'Jack', 
      📱: { brand: 'Chinese Pineapple' } 
  } 
}

如何用ts来顶返回的接口呢

1.any大法

const res:any = await fetchInfo('/info', '886');
console.log(res.🙈.name) // Jack
console.log(res.🙈.📱.brand)  // Chinese Pineapple

2.更加优雅的 interface 写法：

/** 根据接口返回的数据，声明对应的 interface **/
interface Info {
  id: string;
  🙈: Monkey;
}

interface Monkey {
  name: string;
  📱: Phone;
}

interface Phone {
  brand: string;
}

/** 改写 `fetchInfo` 函数返回值类型 **/
const fetchInfo = async (url: string, id: string): Promise<Info> => {
  return $http.get(url, params);
}
const res = await fetchInfo('/info', '886');
console.log(res.🙈.name) // Jack
console.log(res.🙈.📱.brand)  // Chinese Pineapple

总结: #

通过上面的总结不难看出，interface 方式优势众多，但同时也有着一个致命的弊端：

我们在前期的开发过程中需要对所有接口返回的不同数据类型定义对应的 interface。

例如上面示例的 /info 接口我们就需要定义三个 interface ，实际项目中，字段数量可能达到几十上百个！

基于上面 interface 方式所面临的问题

给大家安利一款前端在线代码生成工具：JsonToAny （ Gitee / GitHub ）

3.vben的项目ts玩法 #

3.1准备工作 #

介绍 | Vben Admin (vvbin.cn)

精简版仓库地址

vbenjs/vue-vben-admin at thin (github.com)

• 获取项目代码

git clone https://github.com/anncwb/vue-vben-admin.git

• 安装依赖

cd vue-vben-admin
git checkout thin
pnpm install

• 运行

pnpm serve

• 打包

pnpm build

3.2先看tsconfig.json文件 #

观察到项目的ts的声明文件和配置

3.3观察src下的api的getMenuList接口最具代表性 #

可以看到axios映入 然后用枚举去定义接口地址 还有一个泛型类型getMenuListResultModel,这个定义了其返回的类型

为什么是

export const getMenuList = () => {
  return defHttp.get<getMenuListResultModel>({ url: Api.GetMenuList })
}

去掉会怎么样

我们也可以点入get方法中去一探究竟,可以看到其类型定义是一个泛型函数返回是Promise<T>

api是调用接口,接口是在mock中的

然后在需要的地方进行只用用校验过的数据

3.4再看一个调用本地数据的例子,看看ts怎么来定义 #

这种可以用在做表格组件的时候,用ts来定义表格列的数据也非常实用

我们的例子再vben项目下的

比如我们定义了一个data.ts文件

先定义类型接口

interface NavItem {
  title: string
  icon: string
  color: string
}

然后按照类型,定义出对应类型的变量,再导出

接着我们引入和使用的时候,就可以有代码提示了

我们可以运行项目看一下,用ts定义类型的数据

3.5 小挑战 #

其实在下面的页面也是用data.ts来定义的 按照上述方法,一起分析一下把