VUE-cli3与TypeScript错误处理

关键字：VUE-TypeScript TS vue-cli3 has no initializer and is not definitely assigned in the constructor

如果你搜索到这个文章，你可能已经遇到这错误

错误信息

Property 'propMessage' has no initializer and is not definitely assigned in the constructor.

翻译：

'propMessage' 属性 还没有 初始化方法(initializer) 而且在构造器(constructor)中也没有明确指出。

错误的来源是：Error TS2564(TS)
Property '*******' has no initializer and is not definitely assigned in the constructor

错误原因：

在Typescript 2.7 release版本出来后，设置了一个新的编译器选项strictPropertyInitialization。
当本选项 strictPropertyInitialization:true 的时候，编译器会确保一个类中所有的属性都已经初始化，如果没有，那么在属性构建的过程中就会抛出错误。

举例说明

class Person {
    userName:'string'
    age:number
    constructor() {
      this.age = 42;
    }
}

此时如果我们设置了 strictPropertyInitialization:true 会依次抛出错误

错误信息

错误的提示信息意思是： userName ，age 都没有初始化方法而且也没有构造器来帮助他们初始化，

出现问题的原因一般都有两种，

• 第一种，我们没有明确的设置或者指出本错误所需要的初始化方法或者构造方法。
• 第二种，我们没有考虑好我们自己变量的类型究竟是否是string。（注意：undefined与string类型不是同一个类型）

---

为什么要Typescript检查这个东西？

其实报错就是严格的类型检查，错误信息已经很明确地指出，我们应当在构造器或者初始化方法里面赋值。

我们在TypeScript里面声明出来的userName其实是希望它符合一个string类型的，但是如果你没有为当前变量在构造器或者初始化方法中赋予默认值，那么他就有可能变为undefined，而undefined并不符合我们的期望。

---

如何解决？

1. 你可以设置 strictPropertyInitialization:false取消这个限制（不建议）

{
  "compilerOptions": {
    "strictPropertyInitialization": false
  }
}

2. 你也可以在构造器里面为变量赋予一个默认值(建议做法）
3. 或者如果你确定自己已经有了初始化方法
   也许你是通过辅助方法或者依赖注入等动态引入(TypeScript只能处理静态分析）

你可以通过设置最新的修饰符来避免这个错误的抛出

调整参考