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

最新推荐文章于 2024-07-20 09:47:20 发布
最新推荐文章于 2024-07-20 09:47:20 发布
阅读量1.2k 收藏 12
点赞数 3
分类专栏： Vue点滴知识 文章标签： vue typescript
原文链接：https://juejin.im/post/6860703641037340686
版权

译者推荐：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

弹琴弹琴
关注
专栏目录
如何用Typescript写Vue组件
m0_49210479的博客
09-13 475
Toast 首先我们做需求分析： 难点 1. 动态生成Vue实例 第一个难点在于：我们需要动态生成Vue实例，作为弹窗，这就需要用到插件的知识 另外，由于我用的是Typescript, 还需要额外指定类型 首先我们准备一个Toast.vue <template> <div class="toast"> <slot></slot> </div> </template> <scri
使用 TypeScript 来写 Vue
kaelyn_X的博客
12-16 7821
使用 TypeScript 来写 Vue   Vue 和 TypeScript 的结合使我们在编写的代码的时候能更及时的避免各种错误，要想更优雅的去编写 Vue 组件，我们可以使用官方维护的 vue-class-component，这个库 给我们提供了各种装饰器去结合 TypeScript 来编写我们的 Vue 组件，使用它的好处是我们能通过基于类的 API 去声明组件。   而 vue-prop...
vue3+TypeScript(一)
最新发布
2301_80339466的博客
07-20 1078
修改名字
用 typescript 写 Vue 文件
Wanan
12-26 469
import Vue, { VNode, PropType } from 'vue' interface ComplexMessage { title: string, okMessage: string, cancelMessage: string } const Component = Vue.extend({ props: { name: String, success: { type: String }, callback: { type: F
typescript+vue写法对比
唯一的切慕，唯一的诗歌……
07-07 518
vue 写法 import {mapGetters, mapActions} from 'vuex' import tree from './components/all/tree/tree.vue' export default{ data () { return { a: 1, b: '2', c: true, d: { a: 'qi', b: 77 } } },
【总结】Typescript 结合Vue3的写法
有事儿私信。
08-11 643
Vue 3与TypeScript结合使用能够提供类型检查和智能提示，增强了代码的可靠性和可维护性。本文整理了项目开发时用到的结合写法，供学习和参考。
个Vite+Vue3+TypeScript+Cesium.js集成模板是一个开箱即用的项目模板
04-01
这个Vite+Vue3+TypeScript+Cesium.js集成模板是一个开箱即用的项目模板，旨在帮助开发者快速搭建基于Cesium.js的Vue3应用程序。该模板使用了最新的Vite构建工具和Vue3框架，并集成了TypeScript和Cesium.js技术栈。 ...
使用typescript构建Vue应用的实现
10-16
在本文中，我们将深入探讨如何使用TypeScript构建Vue应用程序。TypeScript是一种静态类型的编程语言，它是JavaScript的一个超集，提供更强的类型检查和更丰富的代码提示，使得大型项目开发更加可维护和高效。 首先...
js_vue_ts_app_ls:使用Vue 3 TypeScript的大型应用程序
04-18
使用Vue 3 TypeScript的大型应用程序 项目设置 npm install 编译和热重装以进行开发 npm run serve 编译并最小化生产 npm run build 运行单元测试 npm run test:unit 自定义配置 请参阅。
vue-ts-demo:用Typescript编写Vue应用程序
05-09
一个Vue.js项目 构建设置 # install dependencies npm install # serve with hot reload at localhost:8080 npm run dev # build for production with minification npm run build # build for production and view...
uniapp + vue3 + TypeScript + pinia + uviewplus
11-03
**uniApp** 是一个基于 Vue.js 开发的多端开发框架，支持编写一次代码，运行在iOS、Android、H5、小程序等多个平台。uniApp通过统一的API接口，使得开发者可以方便地调用原生功能，实现丰富的业务逻辑和界面交互。 ...
typeScript在vue项目中常见用法
极客神殿
06-17 76
prop。
TypeScript+Vue项目开发指南
高先生的猫
04-27 2202
TypeScript是国内外前端技术圈被评为2020年最受欢迎的技术之一，如果你还没开始学，是不是就out了呢？今天我们就开始TypeScript+Vue项目开发的探索，带你体验完全不一样的Vue开发方式。话不多说，让我们开始吧...... 1、初始化项目及环境搭建 1.1、全局安装vue脚手架 npm install -g @vue/cli 目前默认安装的是vue/cli的最新4.0...
typescript用什么软件写_我是如何从零开始学TypeScript的
weixin_29373995的博客
12-29 544
本文记录了我这个周末从零开始学习 TypeScript 的经历，包括背景学习途径做笔记的技巧保持专注和确保进度的方法实践过程背景我的Java基础很好 —— 熟悉静态语言类型的常见规范我的JavaScript基础也很好我正计划将 typescript 引进工作项目(以下统一将 typescript 简写成 ts)从官方文档入手虽然之前从未系统学习过 ts， 但在看一些三方库的源码或者示例代码时，多多...
Vue.js破浪——使用 Typescript 编写简单的单页面组件
若即的专栏
12-27 5716
Vue.js 破浪——使用 Typescript 编写简单的单页面组件 原文 TypeScript-Vue-Starter 译序  已经很久没有更新博客了，最近在翻译 ASP.Net Core 的文档，又写了一下 JS ，发现写完强类型的 C# 后觉得 IDE 对弱类型的 JS 的自动补全简直天差地别。听说 TypeScript 在 Js 的基础上加入了类型系统，能够让 IDE 实现更好的自动补
webstorm tslint配置
weixin_30609287的博客
07-22 803
webstorm设置 settings >> TypeScript >> TSLint, 勾选Enable,选取 tslint包路径...npm\node_modules\tslint，这里webstorm基本会自动读取 配置tslint.json { "rules": { // TS特性 "member...
Vue3 + TypeScript 相关代码写法合集
weixin_50450473的博客
10-12 4256
1、深层查找写法。
vue搭建TypeScript
smileLs的博客
06-03 170
vue搭建TypeScript
关于如何在vue中使用typescript(第一天)
小陈的博客
11-04 383
开始前我们先来了解一下在 vue 中使用 typescript 非常好用的几个库整理了75个JS高频面试题，并给出了答案和解析，基本上可以保证你能应付面试官关于JS的提问。
使用vue3和typeScript写一个中台项目
03-22
好的，我可以为您提供一些关于使用Vue3和TypeScript编写中台项目的建议。...最后，您可以使用Vue Router和Vuex来管理应用程序的路由和状态。如果您需要更多的帮助，可以参考Vue3和TypeScript的官方文档。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值