当前位置: 首页 > 编程笔记 >

TypeScript 运行时类型检查补充工具

方飞翼
2023-03-14
本文向大家介绍TypeScript 运行时类型检查补充工具,包括了TypeScript 运行时类型检查补充工具的使用技巧和注意事项,需要的朋友参考一下

TypeScript是静态类型系统,在编译时做类型检查。一般而言,如果项目所用到的所有库、模块都是基于ts的,那么静态类型已经可以避免大部分编程层面的类型问题。不过,在一些场景下来,单纯静态类型是无法解决问题的,部分数据是动态传入到系统中的,主要包含场景如下:

  • 第三方数据源(接口API、本地持久化存储、postMessage等)
  • 第三方调用者传参
  • 全局状态变更

当然,还有其他可能,总之,单纯靠静态类型检查,无法解决运行时类型问题。因此,我写了tyshemo这个工具。它可以帮助我们完成运行时的类型检查。它暴露了很多接口,其中的Ty接口,很适合在js中作为ts的补充被使用,我们来看下。

import { Ty } from 'tyshemo'

@Ty.decorate.with([Number, Number])
class Some {
 constructor(a, b) {
  this.x = a + b
 }
 
 @Ty.decorate.with(String)
 name = 'calc'
 
 @Ty.decorate.with([Number], Number)
 plus(y) {
  return this.x + y
 }
}

const some = new Some(1, 3) // ok
const some2 = new Some('1', '3') // throw error

some.name = 'ooo' // ok
some.name = 123 // throw error

const z = some.plus(2) // ok
const z1 = some.plus('3') // throw error

我们可以通过 Ty.decorate.with() 作为装饰器来限定一个类上属性的值类型,方法的参数和返回值类型。

在正常的程序中,我们有的时候也需要对值进行限定,但是由于js语言的特性,我们无法对基础类型的值进行监听,不过我们可以对object进行监听。我们可以如下操作:

const o = process.env.NODE_ENV === 'production' ? {} : Ty.decorate({}).with({
 name: String,
 age: Number,
})

o.name = null // throw error
o.name = 'aaa' // ok

o.age = '12' // throw error
o.age = 12 // ok

通过 process.env.NODE_ENV === 'production' 来控制当前环境,如果在正式环境,就不需要这个能力,毕竟我们在测试环境已经做过充分验证了。

要对来自API的数据进行检查,我们可以这样操作。

function getData(url) {
 return fetch(url).then(res => res()).then((data) => {
  if (process.env.NODE_ENV !== 'production') {
   Ty.expect(data).to.be({
    name: String,
    age: Number,
   })
  }
  return data
 })
}

Ty 这个接口可以快速对数据进行结构化检查。tyshemo还有很多其他方面的能力,可以在它的文档中了解更多。

到此这篇关于TypeScript 运行时类型检查补充工具的文章就介绍到这了,更多相关TypeScript 运行时类型检查内容请搜索小牛知识库以前的文章或继续浏览下面的相关文章希望大家以后多多支持小牛知识库!

 类似资料:
  • 我试图找到一种方法来传递一个对象来发挥作用,并在运行库中检查它的类型。这是一个伪代码: 但是总是返回,我无法找到获取或的真正类型的方法。也不起作用,返回了相同的内容。

  • 问题内容: 这个问题是使用TypeScript进行类类型检查的直接类比 我需要在运行时找出类型为any的变量是否实现了接口。这是我的代码: 如果在打字机游乐场输入此代码,则最后一行将被标记为错误,“名称A在当前作用域中不存在”。但这不是事实,该名称确实存在于当前范围内。我什至可以将变量声明更改为无编辑者的抱怨。浏览完网络并在SO上找到另一个问题后,我将接口更改为一个类,但是后来我无法使用对象文字来

  • 我正在从事一个Ionic/Angular项目,我正在尝试消除html文件中的类型检查问题。 我的. ts文件中有一个htest变量,如下所示 Typescript似乎对此很满意。我循环在我的html视图中显示它们,就像这样 但当我使用usr.value访问fn和ln时,typescript不理解它们是什么(红色下划线)。fn或usr.value。ln在html中,如上所述,带有keyvalue管道

  • 这个问题直接类似于使用TypeScript进行类类型检查

  • TypeScript版本2.4.2,使用编译 代码行: 导致TypeScript抛出 错误TS2322:类型“number[]”不能分配给类型{coin:number;}[]' 然而,线路: 编译成功,没有错误。 这是TypeScript错误,还是预期行为(不是以这种方式声明的数组的类型检查)?。如果是,为什么?