typescript vuex_vue + typescript 类组件教程

typescript 简介

TypeScript 是 JavaScript 的强类型版本。然后在编译期去掉类型和特有语法，生成纯粹的 JavaScript 代码。由于最终在浏览器中运行的仍然是 JavaScript，所以 TypeScript 并不依赖于浏览器的支持，也并不会带来兼容性问题。

TypeScript 是 JavaScript 的超集，这意味着他支持所有的 JavaScript 语法。并在此之上对 JavaScript 添加了一些扩展，如 class / interface / module 等。这样会大大提升代码的可阅读性。

与此同时，TypeScript 也是 JavaScript ES6 的超集，Google 的 Angular 2.0 也宣布采用 TypeScript 进行开发。这更是充分说明了这是一门面向未来并且脚踏实地的语言。

强类型语言的优势在于静态类型检查，具体可以参见 http://www.zhihu.com/question... 的回答。概括来说主要包括以下几点：

1. 静态类型检查
2. IDE 智能提示
3. 代码重构
4. 可读性

❝

静态类型检查可以避免很多不必要的错误, 不用在调试的时候才发现问题

❞

项目搭建

• Generate project in current directory？是否在当前目录创建项目

• Choose Vue version，Babel，Ts，Router，Vuex，CSS Pre-processor

• Use class-style component syntax？

• Use Babel alongside Typescript

• Use history mode for router？

• Pick a CSS Pre-processor：Less

• Where do you prefer placing config for Babel，ESLint，

• Save this as a preset for future project？
• Save preset as

可能需要等待几分钟安装依赖，安装成功之后，使用 yarn serve 运行

概览

Vue 类组件是一个库，可让你使用类的语法制作 Vue 组件。例如，我们可以使用 Vue 类语法制作一个计算器组件：

在 src/components 新建 Counter.vue。html 部分跟往常一样。

<template>
  <div>
    <button v-on:click="decrement">-button>
    {{ count }}
    <button v-on:click="increment">+button>
  div>
template>

重点部分就是 javascript：

您可以通过使用@Component装饰器为类添加注释，从而以直观和标准的类语法定义组件数据和方法。您可以简单地用类样式的组件替换组件定义，因为它等同于组件定义的普通options对象样式。

通过以类样式定义组件，不仅可以更改语法，还可以利用某些ECMAScript语言功能，例如类继承和装饰器。Vue类组件还提供了一个用于mixin继承的mixins助手，以及一个轻松创建自己的装饰器的createDecorator函数。

您可能还需要检查Vue Property Decorator提供的@Prop和@Watch装饰器