vue+ts的书写规范

什么是ts

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

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

声明函数

private formStatus: string = 'create';

@ 装饰器（替换钩子函数）

从vue-property-decorator引入相应的装饰器（Component, Prop, Watch…）

import { Component, Vue, Prop, Watch } from 'vue-property-decorator';

!: 表示强制解析, 告诉ts编辑器一定有值，即非空。

@Prop({ default: '测试' }) private title!: string;

<script lang="ts">
import { Component, Prop, Watch, Vue } from "vue-property-decorator";
import vHead from './header.vue';@Component({components: {vHead,},
})export default class Test extends Vue {@Prop({type: Object,required: false,default: {}}) formData !: object@Watch('formData', { immediate: true, deep: true })private onFormDatachanged(val: any){// console.log(val)this.currentId = val.id;this.formStatus = val.dialogStatus;}private formStatus: string = 'create';
};
</script>

检察权代码规范原理

Typescript是javascript的超集，所以ts在运行之前，得先编译成js，那么这个编译的过程，ts的编译引擎就得知道，文件里包括哪些方法，方法包含哪些参数，各参数的定义是什么，类型是什么，总之，所有源信息必须都知道，才能准确无误的把ts翻译成js。这些东西也正是我们需要的，通过这些信息，我们就可以对比规范和源信息，来确认是否是符合我们制定规范的代码。

强类型语言的优势在于静态类型检查，静态类型检查可以避免很多不必要的错误, 不用在调试的时候才发现问题.

Vue 引入 TypeScript

安装vue的官方插件
npm i vue-class-component vue-property-decorator --save// ts-loader typescript 必须安装，其他的相信你以后也会装上的
npm i ts-loader typescript tslint tslint-loader tslint-config-standard --save-dev

这些库大体的作用，可以按需引入：

vue-class-component：强化 Vue 组件，使用 TypeScript/装饰器增强 Vue 组件
vue-property-decorator：在 vue-class-component 上增强更多的结合 Vue 特性的装饰器
ts-loader：TypeScript 为 Webpack 提供了 ts-loader，其实就是为了让webpack识别 .ts
.tsx文件 tslint-loader跟tslint：我想你也会在.ts .tsx文件约束代码格式（作用等同于eslint）
tslint-config-standard：tslint 配置 standard风格的约束

添加 tsconfig.json

{// 编译选项"compilerOptions": {// 输出目录"outDir": "./output",// 是否包含可以用于 debug 的 sourceMap"sourceMap": true,// 以严格模式解析"strict": true,// 采用的模块系统"module": "esnext",// 如何处理模块"moduleResolution": "node",// 编译输出目标 ES 版本"target": "es5",// 允许从没有设置默认导出的模块中默认导入"allowSyntheticDefaultImports": true,// 将每个文件作为单独的模块"isolatedModules": false,// 启用装饰器"experimentalDecorators": true,// 启用设计类型元数据（用于反射）"emitDecoratorMetadata": true,// 在表达式和声明上有隐含的any类型时报错"noImplicitAny": false,// 不是函数的所有返回路径都有返回值时报错。"noImplicitReturns": true,// 从 tslib 导入外部帮助库: 比如__extends，__rest等"importHelpers": true,// 编译过程中打印文件名"listFiles": true,// 移除注释"removeComments": true,"suppressImplicitAnyIndexErrors": true,// 允许编译javascript文件"allowJs": true,// 解析非相对模块名的基准目录"baseUrl": "./",// 指定特殊模块的路径"paths": {"jquery": ["node_modules/jquery/dist/jquery"]},// 编译过程中需要引入的库文件的列表"lib": ["dom","es2015","es2015.promise"]}
}

类型断言

有时候你会遇到这样的情况，你会比TypeScript更了解某个值的详细信息。通常这会发生在你清楚地知道一个实体具有比它现有类型更确切的类型。

通过类型断言这种方式可以告诉编译器，“相信我，我知道自己在干什么”。类型断言好比其它语言里的类型转换，但是不进行特殊的数据检查和解构。它没有运行时的影响，只是在编译阶段起作用。 TypeScript会假设你，程序员，已经进行了必须的检查。

类型断言有两种形式。其一是“尖括号”语法：

let someValue: any = "this is a string";let strLength: number = (<string>someValue).length;

另一个为as语法：

let someValue: any = "this is a string";let strLength: number = (someValue as string).length;