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
语法应该少用或者不用的,不能作为主流写法。