在打字稿中使用 as 关键字

Question

在一个对象中，开发人员定义了这样的代码常量：

medium: {
      fontFamily: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
      fontWeight: '500' as '500',
    },

as 关键字有什么作用？

Answer 1

在这种情况下，as什么都不做。

const x = '500';
const y = '500' as '500';
const z = '500' as string;

console.log(x === y);
console.log(z === y);
console.log(x === z);

会输出

true
true
true

我应该添加的注释 - TypeScript 有一个叫做 string literal types 的东西，它允许您定义允许变量使用的字符串集。但是，在这种情况下使用它们是没有意义的，因为 '500' 显然已经是 '500'.

类型

Answer 2

在这种情况下，as '500' 所做的是将 fontWeight 设置为无法更改，方法是使 fontWeight 属性类型为 '500' 而不是类型 string 没有那条线。

例如，在这个 Typescript Playground link 中，您会注意到 noWork 在为 fontWeight 分配新值时存在类型错误，而 works 允许它。

我还添加了一个带有字符串文字类型联合的示例 moreOptions。由于 fontWeights 通常仅适用于特定值，因此这是一个很好的联合案例，可以防止分配无效值。

const noWork = {
  fontFamily: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
  fontWeight: '500' as '500',
}
noWork.fontWeight='599' // Type '"599"' is not assignable to type '"500"'.

const works = {
  fontFamily: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
  fontWeight: '500',
}
works.fontWeight='599'

const moreOptions = {
  fontFamily: 'Roboto, "Helvetica Neue", Helvetica, Arial, sans-serif',
  fontWeight: '500' as '500'|'600'|'700',
}
moreOptions.fontWeight='600'
moreOptions.fontWeight='425' // Type '"425"' is not assignable to type '"500" | "600" | "700"'.

限制变量允许的类型是打字稿的一个非常有用的部分，尤其是当某些值适用于属性时。

在打字稿中使用 as 关键字

Usage of as keyword in typescript

typescript

tsc

react-native-paper