构建类型安全的前端应用

类型安全问题会影响系统的稳定性。举个例子:

  • 把字符串当成数字进行数学运算,得到错误结果。
  • 用户输入错误数据,导致系统异常。

以下是常见的类型报错:

text 复制代码
- TypeError: Cannot read property "xx" of undefined
- TypeError: Cannot set properties of undefined
- TypeError: 'undefined' is not a function

一. 静态类型安全

一个经典的类型错误:

javascript 复制代码
function add(a, b){
    return a + b;
}

add(1, 1); // 预期值 2
add('1', 1); // 错误值 '11'

上面代码在编译时和运行时都不会报错,但是有可能得到错误的结果。

这类问题是代码本身引入的,在调用函数时传入了错误的数据类型。

解决方案是使用TypeScript。TypeScript是类型安全的语言,会在编译时检查变量类型。

javascript 复制代码
function add(a:number, b:number){
    return a + b;
}

add(1, 1); // 编译通过
add('1', 1); // 编译报错,类型检查不通过

二. 动态类型安全

除了代码本身引入的类型错误,外界输入也是存在风险的。例如,用户输入接口参数 等变量,在编译阶段是不知道变量值的,只能在运行时校验。所以我们需要有一个强大的运行时数据类型校验工具,例如zod。

  • 基本数据类型检验

在zod中,每一种数据类型都有对应的schema实现。

javascript 复制代码
import { z } from "zod";

// 创建一个字符串schema
const stringSchema = z.string();
// 数据校验
stringSchema.parse("abc"); // => "abc" 
stringSchema.parse(123); // => throws ZodError

// 数据校验(不会抛异常)
stringSchema.safeParse("abc"); // => { success: true; data: "abc" }
stringSchema.safeParse(123); // => { success: false; error: ZodError }

// 常见的schema如下:
z.string(); 
z.number(); 
z.bigint(); 
z.boolean(); 
z.date(); 
z.symbol();

对于复杂的数据类型,例如对象,则可以通过多个schema组合的方式实现。

  • 复杂数据类型检验
javascript 复制代码
import { z } from "zod";

// 创建一个对象schema
const userSchema = z.object({ username: z.string(), age: z.number()}); 
// 数据校验
userSchema.parse({ username: "Ludwig", age: 10 }); 
  • 实践案例

下面以一个用户信息表单为例。

首先,设计出用户信息如下:

json 复制代码
{
    "姓名": 最长32位字符串,必填
    "年龄": 正整数,必填
    "邮箱": 邮箱地址,必填
    "头像": 图片链接,可选
}

然后,定义表单schema:

javascript 复制代码
export const userSchema = z.object({
  name: z.string().max(32),
  age: z.number({required_error: '请输入年龄'})
        .int({message:'年龄是一个正整数'})
        .positive({message:'年龄是一个正整数'}),
  email: z.string().email(),
  image: z.string().url(),
})

最后,在提交表单时校验数据。

javascript 复制代码
// extract the inferred type 
// { name: string, age: number, email: string, image: string}
type UserType = z.infer<typeof userSchema>; 
function submit(UserType formData){
    const data = userSchema.parse(formData);
    // ...
}

总结

对于Web应用来说,类型安全问题无处不在。例如,代码本身引入的类型错误;用户输入的数据类型不对;或者接口传参的类型错误等等。这些都会影响系统的稳定性

所以,我们要构建类型安全的应用,包括以下两点:

  • 第一,静态类型安全。使用TypeScript等类型安全的语言,在编译阶段检查类型。
  • 第二,动态类型安全。使用zod等检验工具,在运行时检验数据。
相关推荐
灵感__idea3 小时前
Hello 算法:让前端人真正理解算法
前端·javascript·算法
向葭奔赴♡4 小时前
CSS是什么?—— 网页的“化妆师”
前端·css
黑犬mo4 小时前
在Edge、Chrome浏览器上安装uBlock Origin插件
前端·edge
excel4 小时前
🧩 Vue 3 watch 源码详解(含完整注释)
前端·javascript·vue.js
大前端helloworld4 小时前
前端梳理体系从常问问题去完善-网络篇
前端·面试
excel4 小时前
🌿 一文看懂 Vue 3 的 watch 源码:从原理到流程
前端
Guheyunyi4 小时前
消防管理系统如何重构现代空间防御体系
大数据·运维·人工智能·安全·信息可视化·重构
繁依Fanyi5 小时前
让工具说话:我在 Inspira Board 里用 AI 把“能用、好用、可复用”落成了日常
前端
weixin_456904276 小时前
C# 中的回调函数
java·前端·c#
kura_tsuki6 小时前
[Web网页] LAMP 架构与环境搭建
前端·架构