TS断言的问题

Question

class ProjectInput {
  templateElement: HTMLTemplateElement;
  hostElement: HTMLDivElement;

  constructor() {
    this.templateElement = document.getElementById('project-input') as HTMLTemplateElement;
    this.hostElement = document.getElementById('app')! as HTMLDivElement;
    console.log(this.templateElement);
  }
}

两个问题：

1. templateElement属性做了类型限制又在赋值时做断言，这样错误也只能在runtime检测出来，有什么意义？
2. hostElement属性做了类型断言还有必要做非空断言吗？

Answer 1

因为 document.getElementById 的返回值是 HTMLElement | null 啊，你不断言怎么赋值给另一种类型？

举例：

interface BaseType {}

interface SubType extends BaseType {
    subProperty: string;
}

function getType(): BaseType | null {
    // do something, then return a BaseType
    return {};
}

// Error: 类型 "BaseType" 中缺少属性 "subProperty"，但类型 "SubType" 中需要该属性。
const obj1: SubType = getType();

// Error: 不能将类型“BaseType”分配给类型“SubType”。
const obj2: SubType = getType()!;

// OK!
const obj3: SubType = getType() as SubType;

---

下面那个非空断言倒是没什么用，有类型断言就可以了。