当我try 在OpenLayers 9.1中对StyleLike等类型使用方法时,我遇到了很多类型脚本错误.在本例中,我创建了一个具有单点要素的层,并让它使用默认样式:

const feat = new Feature({
    geometry: new Point ([0, 0]),
    name: 'Whatever',
    population: 100,
    rain: 500
})

const vectorSource = new VectorSource({
    features: [feat]
})

const pointLayer = new VectorLayer({
    source: vectorSource
})

如果我以后想获取特征的 colored颜色 :

const color = pointLayer.getStyle()
console.log(color.getFill().getColor())

类型脚本推断变量colorStyleLike | null | undefined类型.

根据documentationStyleLike定义为Style | Style[] | StyleFunction.

console.log线将在getFill()以下产生一个红色的弯曲字母:

Property 'getFill' does not exist on type 'StyleLike'.
  Property 'getFill' does not exist on type 'Style[]'.

这是有道理的,因为是的,如果colorStyle[]的,它就不会有getFill()方法,但在这个例子中,我知道color实际上是Style类型(我在调试时也证实了这一点).Style类型具有有效的getFill()方法.代码确实运行并且我确实得到了我想要的值,但how do I properly define the type of 100 so I don't get error squigglies?

定义color: Style无效.它会在color下面放一个曲线,并说:

Type 'StyleLike | null | undefined' is not assignable to type 'Style'.
  Type 'undefined' is not assignable to type 'Style'.

推荐答案

鉴于color的TypScript类型包括它可能是nullundefined、数组或函数的可能性,您应该仔细判断您如何"知道"color实际上是Style.调试是一个好兆头,但如果在不同的环境中运行,相同的代码可能会产生不同的结果. 我不确定,因为我对OpenLayers一无所知.

无论如何,有两种通用方法,这取决于您是否确信您知道编写color.getFill().getColor()时运行时会发生什么.


如果您不确定color一定会是Style,您可以编写代码来判断并说服TypScript您正在做的事情是类型安全的. 例如:

if (color && "getFill" in color) {
    const fill = color.getFill();
    if (fill) {
        console.log(fill.getColor())
    }
}

在这里,我们将narrow colorStyle乘以truthiness checking(消除nullundefined)和乘以in operator narrowing(确保它是Style而不是数组或函数). 我们还必须判断color.getFill()的真实性,因为它也可能是null.

这是类型安全的,但有点乏味,因为您需要不断判断内容,其中一些需要将内容复制到其他变量. (如果您所要做的就是避免nullundefined,您可以像color?.getFill()?.getColor()一样使用optional chaining,但数组/函数的事情阻止它变得那么简单.)


另一方面,如果您确定color并且不想费心进行额外的运行时判断,那么您可以只 Select assert个您所知道的内容:

console.log((color as Style).getFill()!.getColor())

这里的color as Style是一个类型断言,表明您保证color可以安全地视为Style. 我还在getFill()的结果上使用了non-null assertion operator (!)来告诉编译器您知道它不是null. 这根本不会更改运行时代码,并且可以防止编译器错误.如果您对color的类型及其getFill()结果的真实性是正确的,那么这就没问题了.如果您错了,您会出现运行时错误.如果这种可能性不太可能让您担心,那么断言类型是完全合理的.


您是否要进行运行时判断或跳过它们取决于您的用例和要求.

Playground link to code

Typescript相关问答推荐

当两个参数具有相同的通用类型时,如果没有第一个参数,则递减约束默认会导致第二个参数的错误推断

为什么在将条件返回类型的字符串赋给数字时没有类型错误?

React-Native运行方法通过监听另一个状态来更新一个状态

TypeScript Page Routing在单击时不呈现子页面(React Router v6)

如何推断计算逻辑的类型

React重定向参数

诡异的文字类型--S为物语的关键

ANGLE独立组件布线错误:没有ActivatedRouting提供程序

在HighChats列时间序列图中,十字准线未按预期工作

推断从其他类型派生的类型

为什么我的查询钩子返回的结果与浏览器的网络选项卡中看到的结果不同?

Angular 自定义验证控件未获得表单值

@TANSTACK/REACT-QUERY中发生Mutations 后的数据刷新问题

如何在React组件中指定forwardRef是可选的?

TypeScrip错误:为循环中的对象属性赋值

使用强类型元组实现[Symbol.iterator]的类型脚本?

接口中可选嵌套属性的类型判断

如何创建由一个帐户签名但使用另一个帐户支付的Hedera交易

Angular另一个组件的nativeelement未定义

Typescript 子类继承的方法允许参数中未定义的键