断言

Question

interface RuleProp { //定义一个接口
    type: 'requirde' | 'email';
    message: string;
}
...........
  props: {
      rules: Array as PropType<RulesProp>
  },

老师您好
我有点不太理解断言
断言相当于类型转换吗？ 还是判断
这里的rules 必须遵守RuleProp 这个接口 规则对吧
谢谢 老师

Answer 1

慕雪9208097 2020-10-16 14:54:44

我自己试了试，断言应该是把联合类型具体指定为某个类型，只是为了通过ts编译的。但本质上没有做类型转换和判断处理。

ts代码：将stringOrNumber断言成string，这样获取length属性就不会报错。不进行断言，由于length不是number和string的共有属性，将会报错。

function getLength(stringOrNumber: string | number): number {
  const result = stringOrNumber as string;
  return result.length;
}

console.log(getLength(123));

编译后的js代码：可以看到，没有做判断和类型转换处理。虽然通过了ts编译，但这段代码运行在浏览器上是有问题的。

function getLength(stringOrNumber) {
    var result = stringOrNumber;
    return result.length;
}
console.log(getLength(123));

• 提问者 慕妹8334715 #1

  同学 您好 谢谢您  我还是不太理解
  function getLength(stringOrNumber: string | number):any {
      const result = stringOrNumber as string;
      return result
    }
    console.log(typeof getLength(123));
  这里的 返回 是 number 类型  但是 鼠标放上去 result 是 String 类型
  在一个您这样写确实有问题 当 是一个数字的时候 是没有 length 属性的这样是 undefined  
  function getLength(stringOrNumber: string | number) {
      const result = stringOrNumber as string;
      if(result.length){
          return result.length;
      }else {
         return  stringOrNumber.toString().length
      }
    }
    console.log(getLength(123));
  我还是没有明确理解断言是什么意思

• 慕雪9208097 回复 提问者 慕妹8334715 #2

  可以理解为，断言是告诉ts，这个stringOrNumber，是string类型，那么被赋值的result，ts自然也会认为这是string类型。
  
  实际上返回的是number，是因为断言并不是类型转换。我举的例子，也是为了说明，用了断言编译出来的js代码，实际上没有做类型转换的工作。
  
  在你举的第二段代码里，如果不将stringOrNumber断言为string，那么在result.length的时候，ts会有这么个推断过程：
  判断result的类型，string | number，
  判断length属性在string和number上都存在么，在number上不存在
  抛出错误
  将stringOrNumber断言为string，那么ts的推断是这样的
  判断result的类型，string，
  判断length属性在string上存在么，存在
  顺利编译
  
  可以理解为ts的类型判断太笨（严格），需要你用断言来告诉他，当你用result.length的时候，result应该是string类型，而不是number类型。
  当我们享受ts严格的类型检查的时候，也需要偶尔处理一下ts的死脑筋。
  
  有点啰嗦，希望会有帮助。