如何用 Typescript 写一个完整的 Vue 应用程序

最新推荐文章于 2024-09-20 19:38:12 发布

弹琴弹琴

最新推荐文章于 2024-09-20 19:38:12 发布

阅读量1.2k

点赞数 3

分类专栏： Vue点滴知识文章标签： vue typescript

原文链接：https://juejin.im/post/6860703641037340686

版权

Vue点滴知识专栏收录该内容

103 篇文章 6 订阅

订阅专栏

译者推荐：Typescript 和 Vue 都是现在前端必备的知识，本文基本覆盖了目前 Vue 2.x 的一些基础用法的 Typescript 版本实现，感兴趣的了解一下，更好的迎接 Vue 3.0

译者根据文章中提到的知识点，自己写了一个 demo，已放到 Github 地址，建议大家可以动手实战一下，如果遇到什么问题，可以留言评论或者提 issue

Vue 是一个惊人的，轻量的渐进式前端框架。因为 Vue 是灵活的，所以用户不需要使用 Typescript。但是不像 Angular，老版本的 Vue 并没有很好的支持 Typescript。因为这点，大多数 Vue 应用程序都是直接使用 JavaScript 写的。

现在随着官方对 Typescript 的支持，使用 Vue CLI 可以从头开始创建 Typescript 项目。但是我们仍然需要一些带有自定义装饰器和功能的第三方包来创建一个真正的、完整的 Typescript 应用程序，而官方文档并不包含入门所需要的所有信息。

为了帮助大家全面地了解它，我们将演示如何使用 Vue CLI 构建一个新的 Vue + TypeScript 应用程序。

开始

用下面这句代码开始

vue create typescript-app
复制代码

选择手动选择功能并进行配置，如下所示

项目搭建好之后，我们将项目跑起来

cd typescript-app
npm run serve
复制代码

会自动打开 localhost:8080 网页（或者会在你启动项目后打印出这个链接），这代表我们项目启动成功

我们通过这个教程，我们会回顾以下功能，并展示如何使用 Typescript 去实现

1.基于类的组件 2.Data, props, computed 属性, methods, watchers, and emit 3.生命周期 4.Mixins 5.Vuex

在 components 目录中打开 HelloWorld.vue，你会看到如下结构

注意：对于每个实例，我将同时显示 TypeScript 和 Javascript 等价代码，这样您就可以轻松地比较两者。让我们开始吧

1.基于类的组件

//Typescript code
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
@Component
export default class HelloWorld extends Vue {
}
</script>
复制代码

Javascript 等价代码如下：

<script>
export default {
name: 'HelloWorld'
}
</script>
复制代码

为了使用 Typescript，我们首先需要设置 <script> 的 lang 属性为 ts

是一个第三方包，它使用官方的 vue-class 组件包，并在此基础上添加了更多装饰器。

vue-property-decorator 是一个第三方包，它使用了 Vue 类组件包，并在此基础上添加了更多的装饰器。指定了类名，会默认使用类名作为 name，当然我们也可以显式地使用 name 属性来命名组件。

@component({
  name: 'HelloWorld'
})
复制代码

引入一个组件

在组件中注册其他组件的代码是在 @Component 装饰器中编写的，如下所示。

<template>
  <div class="main">
    <project />
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import Project from '@/components/Project.vue'
@Component({
  components: {
    project
  }
})
export default class HelloWorld extends Vue {
}
</script>
复制代码

Javascript 等价代码如下：

<template>
  <div class="main">
    <project />
  </div>
</template>
<script>
import Project from '@/components/Project.vue'
export default {
  name: 'HelloWorld',
  components: {
    project
  }
})
</script>
复制代码

2. Data, props, computed 属性, methods, watchers, and emit

使用 data

要使用 data 属性，我们可以简单地将它们声明为类变量。

@Component
export default class HelloWorld extends Vue {
  private msg: string = "welcome to my app"
  private list: Array<object> = [
    {
      name: 'Preetish',
      age: '26'
    },
    {
      name: 'John',
      age: '30'
    }
  ]
}
复制代码

Javascript 等价代码如下：

export default {
  data() {
    return {
      msg: "welcome to my app",
      list: [
        {
          name: 'Preetish',
          age: '26'
        },
        {
          name: 'John',
          age: '30'
        }
      ]
    }
}
复制代码

使用 props

我们可以使用 @Prop 装饰器在 Vue 组件中使用 props。在 Vue 中，我们可以给额外的配置给 props，比如 required、default 和 type。首先我们可以像下面一样从 vue-property-decorator 引入 Prop 装饰器。我们还可以使用 readonly 去避免操作改变 props。

import { Component, Prop, Vue } from 'vue-property-decorator'
@Component
export default class HelloWorld extends Vue {
  @Prop() readonly msg!: string
  @Prop({default: 'John doe'}) readonly name: string
  @Prop({required: true}) readonly age: number
  @Prop(String) readonly address: string
  @Prop({required: false, type: String, default: 'Developer'}) readonly job: string
}
</script>
复制代码

Javascript 等价代码如下：

  props: {
    msg,
    name: {
      default: 'John doe'
    },
    age: {
      required: true,
    },
    address: {
      type: String
    },
    job: {
      required: false,
      type: string,
      default: 'Developer'
    }
  }
}
复制代码

Computed 属性

计算属性用于编写简单的模板逻辑，例如操作、添加或连接数据。在 TypeScript 中，一个普通的计算属性也以 get 关键字作为前缀。

export default class HelloWorld extends Vue {
  get fullName(): string {
    return this.first+ ' '+ this.last
  }
}
复制代码

Javascript 等价代码如下：

export default {
  fullName() {
    return this.first + ' ' + this.last
  }
}
复制代码

在 Typescript 中，我们可以写一些复杂的包括 getter 和 setter 的计算属性，如下所示

export default class HelloWorld extends Vue {
  get fullName(): string {
    return this.first+ ' '+ this.last
  }
  set fullName(newValue: string) {
    let names = newValue.split(' ')
    this.first = names[0]
    this.last = names[names.length - 1]
  }
}
复制代码

Javascript 等价代码如下：

fullName: {
  get: function () {
    return this.first + ' ' + this.last
  },
  set: function (newValue) {
    let names = newValue.split(' ')
    this.first = names[0]
    this.last = names[names.length - 1]
  }
}
复制代码

Methods

与普通类方法一样，TypeScript 中的方法也有一个可选的访问修饰符。

export default class HelloWorld extends Vue {
  public clickMe(): void {
    console.log('clicked')
    console.log(this.addNum(4, 2))
  }
  public addNum(num1: number, num2: number): number {
    return num1 + num2
  }
}
复制代码

Javascript 等价代码如下：

export default {
  methods: {
    clickMe() {
      console.log('clicked')
      console.log(this.addNum(4, 2))
    }
    addNum(num1, num2) {
      return num1 + num2
    }
  }
}
复制代码

Watchers

Watcher 的写法跟我们平时书写 JavaScript 的方式不同，我们最常用的 JavaScript 书写 watcher 的语法如下：

watch: {
  name: function(newval) {
    //do something
  }
}
复制代码

我们不经常使用 handler 语法

watch: {
  name: {
    handler: 'nameChanged'
  }
}
methods: {
  nameChanged (newVal) {
    // do something
  }
}
复制代码

但是，Typescript 跟第二种方式相似。在 TypeScript 中，我们使用 @Watch 装饰器并传递需要监视的变量的名称。

@Watch('name')
nameChanged(newVal: string) {
  this.name = newVal
}
复制代码

我们也可以使用 immediate 和 deep

@Watch('project', { 
  immediate: true, deep: true 
})
projectChanged(newVal: Person, oldVal: Person) {
  // do something
}
复制代码

Javascript 等价代码如下：

watch: {
  person: {
      handler: 'projectChanged',
      immediate: true,
      deep: true
    }
}
methods: {
  projectChanged(newVal, oldVal) {
    // do something
  }
}
复制代码

Emit

要从一个子组件 emit 一个方法到父组件，在 Typescript 中，我们将使用 @Emit 装饰器。

@Emit()
addToCount(n: number) {
  this.count += n
}
@Emit('resetData')
resetCount() {
  this.count = 0
}
复制代码

在第一个示例中，函数名 addToCount 被转换为短横线分隔 (kebab-case)，这与 Vue emit 的工作方式非常类似。

在第二个示例中，我们传递方法的显式名称 resetData，并使用该名称。因为 addData 是驼峰式的，所以它再次被转换为短横线分隔 (kebab-case)。

<some-component add-to-count="someMethod" />
<some-component reset-data="someMethod" />
复制代码

//Javascript Equivalent
 methods: {
    addToCount(n) {
      this.count += n
      this.$emit('add-to-count', n)
    },
    resetCount() {
      this.count = 0
      this.$emit('resetData')
    }
}
复制代码

3.生命周期钩子

一个 Vue 组件有八个生命周期，包括 created、mounted 等等，每个钩子都使用相同的 Typescript 语法。这些被声明为普通类方法。因为生命周期钩子是自动调用的，所以它们既不接受参数也不返回任何数据。因此，我们不需要访问修饰符、输入参数或返回类型。

export default class HelloWorld extends Vue {
  mounted() {
    //do something
  }
  beforeUpdate() {
    // do something
  }
}
复制代码

Javascript 等价代码如下：

export default {
  mounted() {
    //do something
  }
  beforeUpdate() {
    // do something
  }
}
复制代码

4. Mixins

为了在 Typescript 中创建 mixins，我们必须首先创建 mixin 文件，其中包含我们与其他组件共享的数据。

创建一个名为 ProjectMixin.ts 的文件。在 mixin 目录中添加下面的 mixin，它共享 projName 和更新 projName 的方法。

import { Component, Vue } from 'vue-property-decorator'
@Component
class ProjectMixin extends Vue {
  public projName: string = 'My project'
  public setProjectName(newVal: string): void {
    this.projName = newVal
  }
}
export default ProjectMixin
复制代码

Javascript 等价代码如下：

export default {
 data() {
   return {
     projName: 'My project'
   }
 },
 methods: {
   setProjectName(newVal) {
     this.projName = newVal
   }
 }
}
复制代码

在我们的 Vue 组件中使用上面的 mixin，我们需要从 vue-property-decorator 引入 Mixins 和引入 mixin 文件，如下所示

//Projects.vue
<template>
  <div class="project-detail">
    {{ projectDetail }}
  </div>
</template>
<script lang="ts">
import { Component, Vue, Mixins } from 'vue-property-decorator'
import ProjectMixin from '@/mixins/ProjectMixin'
@Component
export default class Project extends Mixins(ProjectMixin) {
  get projectDetail(): string {
    return this.projName + ' ' + 'Preetish HS'
  }
}
</script>
复制代码

Javascript 等价代码如下：

<template>
  <div class="project-detail">
    {{ projectDetail }}
  </div>
</template>
<script>
import ProjectMixin from '@/mixins/ProjectMixin'
export default {
  mixins: [ ProjectMixin ],
  computed: {
    projectDetail() {
      return this.projName + ' ' + 'Preetish HS'
    }
  }
}
</script>
复制代码

5. Vuex

Vuex 是大多数 Vue.js 应用程序中使用的官方状态管理库。将 store 划分为命名空间模块是一个很好的实践。我们将演示如何在 TypeScript 中编写它。

首先，我们需要安装两个流行的第三方库：

npm install vuex-module-decorators -D
npm install vuex-class -D
复制代码

在 store文件夹中，让我们创建一个 module 文件夹来放置我们的命名空间存储模块。

创建一个名为 user 的文件。ts 拥有 user 的状态。

// store/modules/user.ts
import { VuexModule, Module, Mutation, Action } from 'vuex-module-decorators'
@Module({ namespaced: true, name: 'test' })
class User extends VuexModule {
  public name: string = ''
  @Mutation
  public setName(newName: string): void {
    this.name = newName
  }
  @Action
  public updateName(newName: string): void {
    this.context.commit('setName', newName)
  }
}
export default User
复制代码

vuex-module-decorators 库为 Module, Mutation 和 Action 提供了装饰器。状态变量是直接声明的，就像类变量一样。这是一个简单的模块，它存储用户名，并通过一个 mutation 和一个 action 去更新用户名的操作。

我们不需要将 state 作为 Mutations 和 Actions 中的第一个参数，这个库已经考虑到这一点。它已经被注入到那些方法中。

Javascript 等价代码如下：

export default {
  namespaced: true,
  state: {
    name: ''
  },
  mutations: {
    setName(state, newName) {
      state.name = newName
    }
  },
  actions: {
    updateName(context, newName) {
      context.commit('setName', newName)
    }
  }
}
复制代码

在 store 文件夹中，我们需要创建一个 index.ts 去初始化 Vuex 并注册此模块

import Vue from 'vue'
import Vuex from 'vuex'
import User from '@/store/modules/user'
Vue.use(Vuex)
const store = new Vuex.Store({
  modules: {
    User
  }
})
export default store
复制代码

在组件中使用 Vuex

要使用 Vuex，我们可以利用一个名为 Vuex -class 的库。这个库提供装饰器来绑定 Vue 组件中的 State, Getter, Mutation 和 Action。

因为我们使用的是带有命名空间的 Vuex 模块，所以我们首先从 Vuex 类导入命名空间，然后传递模块的名称来访问该模块。

<template>
  <div class="details">
    <div class="username">User: {{ nameUpperCase }}</div>
    <input :value="name" @keydown="updateName($event.target.value)" />
  </div>
</template>
<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import { namespace } from 'vuex-class'
const user = namespace('user')
@Component
export default class User extends Vue {
  @user.State
  public name!: string

  @user.Getter
  public nameUpperCase!: string

  @user.Action
  public updateName!: (newName: string) => void
}
</script>
复制代码

Javascript 等价代码如下：

<template>
  <div class="details">
    <div class="username">User: {{ nameUpperCase }}</div>
    <input :value="name" @keydown="updateName($event.target.value)" />
  </div>
</template>
<script>
import { mapState, mapGetters, mapActions} from 'vuex'
export default  {
  computed: {
    ...mapState('user', ['name']),
    ...mapGetters('user', ['nameUpperCase'])
  }  
  methods: {
    ...mapActions('user', ['updateName'])
  }
}
</script>
复制代码

总结

现在，你已经掌握了在 TypeScript 中完全创建 Vue.js 应用程序所需的所有基本信息，可以使用一些官方和第三方库来充分利用类型化和自定义装饰器特性。Vue 3.0 将对 TypeScript 提供更好的支持，并且整个 Vue.js 代码都在 TypeScript 中重写，以提高可维护性。

一开始，使用 TypeScript 似乎有点让人不知所措，但是当你习惯了之后，你的代码中就会有更少的 bug，并且在相同代码基础上的其他开发人员之间的代码协作也会更顺畅。

转载：https://juejin.im/post/6860703641037340686