·

Vue 和 React 都有优缺点,Vue 打包体积和性能略好,但 typescript 支持一言难尽,也就注定了只要项目规模稍微大一点就不可能用 Vue。

Vue2 的 Object 写法用 as 关键字去支持 Typescript 本来就很不好,比如官方的例子

import Vue, { PropType } from 'vue'

interface ComplexMessage {
  title: string,
  okMessage: string,
  cancelMessage: string
}
const Component = Vue.extend({
  props: {
    name: String,
    success: { type: String },
    callback: {
      type: Function as PropType<() => void>
    },
    message: {
      type: Object as PropType<ComplexMessage>,
      required: true,
      validator (message: ComplexMessage) {
        return !!message.title;
      }
    }
  }
})

as 是类型断言,通常在编译器无法正确推断类型的时候才使用,常用在 js 项目往 ts 项目迁移,比如如果你这么写会报错:

const foo = {};
foo.bar = 123; // Error: 'bar' 属性不存在于 ‘{}’
foo.bas = 'hello'; // Error: 'bas' 属性不存在于 '{}'

需要改成:

interface Foo {
  bar: number;
  bas: string;
}

const foo = {} as Foo;
foo.bar = 123;
foo.bas = 'hello';

实现 js 项目像 ts 项目迁移,或者 ts 官方的例子

const myCanvas = document.getElementById("main_canvas") as HTMLCanvasElement;

也可以写成(这样写更好):

const myCanvas = <HTMLCanvasElement>document.getElementById("main_canvas");

as 语法应该少用或者不用的,不能作为主流写法。