npm install
npm run serve
npm run build
vue3.x 结合 typescript 初体验
- 更小\更快 - Vue 3.0 大小大概减少一半，只有 10kB
- 加强 TypeScript 支持
- 加强 API 设计一致性 - 易读
- 提高自身可维护性
- 开放更多底层功能
vue3.x 采用 Function-based API 形式组织代码，使其更容易压缩代码且压缩效率也更高,由于 修改了组件的声明方式，以函数组合的方式完成逻辑，天然与 typescript 结合。（vue2.x 中的组件是通过声明的方式传入一系列 options 的，所以在 2.x 下使用 typeScript 需要装饰器的方式vue-class-component才行）
// vue2.x 要想使用ts 需要这样处理,详见官方文档 https://cn.vuejs.org/v2/guide/typescript.html
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class App extends Vue {}
</script>
- 大部分函数看类型定义就知道是干嘛的
- 静态类型检查，减少运行时错误
- 在 vue3 热潮下，之后 typescript 要成为主流，快学
npm install -g @vue/cli
vue create vue-next-project
这里在输入命令后，需要选择Manually select features, 至少要把 babel typescript router 选上，（vuex 看自身情况是否需要）。如下图:
不清楚 vue-cli 的可参考文章
https://github.com/vuejs/vue-cli-plugin-vue-next
cd vue-next-project
vue add vue-next
这个命令会自动帮你把 vue2.x 升级到 vue3.x ，包括项目中对应的依赖进行升级与模板代码替换，像：vue-router vuex
完成以上三步主体环境算搭建完成，看刚才创建的目录里多了个 tsconfig.json 配置文件，可以根据自身与项目需要，进行配置。
接下来需要简单处理一下，使其支持 typescript 形式。（模板 cli 还没完善 typescript 的模板代码）
- 将
shims-vue.d.ts文件中的内容修改一下，这步操作应该会少了一些报错。
// declare module "*.vue" {
// import Vue from 'vue';
// export default Vue;
// }
declare module "*.vue" {
import {defineComponent} from 'vue'
const Component: ReturnType<typeof defineComponent>;
export default Component
}
- 组件里使用需声明
script lang="ts",然后用defineComponent进行包裹,即可。
<script lang="ts">
import {
defineComponent,
ref,
onMounted,
onUpdated,
onUnmounted,
} from "vue";
export default defineComponent({
name: "hello world",
props: {},
setup(props: any) {
const count = ref(0);
const increase = (): void => {
count.value++;
};
function test(x: number): string {
return props.toString();
}
test(1);
// test('number');
// 生命周期
onMounted(() => {
console.log("mounted vue3 typescript");
});
onUpdated(() => {
console.log("updated vue3 typescript");
});
onUnmounted(() => {
console.log("onUnmounted vue3 typescript");
});
// 暴露给模板
return {
count,
increase
};
},
});
</script>
生命周期对应
与 2.x 版本生命周期相对应的组合式 API
beforeCreate → 使用 setup()
created → 使用 setup()
beforeMount → onBeforeMount
mounted → onMounted
beforeUpdate → onBeforeUpdate
updated → onUpdated
beforeDestroy → onBeforeUnmount
destroyed → onUnmounted
errorCaptured → onErrorCaptured