# 项目初始化

# 前言

TypeScript 适不适合在 vue 业务开发中使用？

问题的本质其实很简单：因为当初 API 的设计根本就没有考虑类型系统。Vue 的组件本质上就是一个 “包含了描述组件选项的对象”。必须要承认的是，2.x 的 TS 支持显然跟 React 和 Angular 是有差距的，这也是为什么 3.0 要加强这一块。(尤雨溪 (opens new window))
当前版本下，肯定是不适合的，因为在 vue 的设计中存在逻辑断层。(匿名用户 (opens new window))
目前，不合适，倒也不是说不行，就是绕，纠结。(Jim Liu (opens new window))
真实感受，和 ts 结合 vue 没 angular 和 react 爽，但也不是不能用。(s 牵着你的笑容 (opens new window))

结论：目前能用但是不好用。

# 入门参考

# 安装脚手架

yarn global add @vue/cli

// OR

npm i -g @vue/cli

1
2
3
4
5

# 创建项目

# STEP 1

vue create <project name>

# STEP 2

选择 vue cli preset: Manually select features

# STEP 3

features

# 与 JS 项目对比

Vue JS&TS

# `Component` 的两种风格

通过 Manually select features 过程中的 Use class-style component syntax 指定

# `Vue.extend` 构造器

<script lang="ts">
import Vue from "vue";
import HelloWorld from "@/components/HelloWorld.vue";

export default Vue.extend({
  name: "home",
  components: {
    HelloWorld,
  },
});
</script>

1
2
3
4
5
6
7
8
9
10
11

# `class-style component syntax`

<script lang="ts">
import { Component, Vue } from "vue-property-decorator";
import HelloWorld from "@/components/HelloWorld.vue";

@Component({
  components: {
    HelloWorld,
  },
})
export default class Home extends Vue {}
</script>