TypeScript 额外的属性检测

最新推荐文章于 2025-08-04 13:02:02 发布

weixin_33817333

最新推荐文章于 2025-08-04 13:02:02 发布

阅读量1.3k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript ViewUI

原文链接：https://juejin.im/post/5d09efbde51d45108126d24b

博客介绍了TypeScript中对象字面量在赋值或传参时会进行“额外属性检查”，若存在“目标类型”不包含的属性会报错。同时给出官网提供的三种解决方法，包括使用类型断言、添加字符串索引签名、将字面量赋值给另外一个变量。

先来看个例子：

interface Config {
    width?: number;
}

function  CalculateAreas （config: Config）: { area: number} {
    let square = 100;
    if (config.width) {
        square = config.width * config.width;
    }
    return square;
}

let mySquare = CalculateAreas({ widdth: 5 });
复制代码

我们传入的参数是widdth，并不是width。

此时TypeScript会认为这段代码可能存在问题。对象字面量当被赋值给变量或作为参数传递的时候，会被特殊对待而且经过“额外属性检查”。

如果一个对象字面量存在任何“目标类型”不包含的属性时，你会得到一个错误。

// error: 'widdth' not expected in type 'Config'
let mySquare = CalculateAreas({ widdth: 5 });
复制代码

解决方法，官网上给了三种方式：

第一种使用类型断言：

let mySquare = CalculateAreas({ widdth: 5 } as Config);
复制代码

第二种添加字符串索引签名：

interface Config {
   width?: number;
   [propName: string]: any;
}
复制代码

这样Config可以有任意数量的属性，并且只要不是width，那么就无所谓他们的类型是什么了。

第三种将字面量赋值给另外一个变量：

let options = { widdth: 5 };
let mySquare = CalculateAreas(options);
复制代码

转载于:https://juejin.im/post/5d09efbde51d45108126d24b