什么是TypeScript？
TypeScript是JavaScript的超集；
JavaScript有的功能TypeScript同样全部都有；
TypeScript最终是解析成JavaScript渲染的;
TypeScript可以说是补齐JavaScript在类型方面上的短板，大家都知道JavaScript是个弱语言（没有强制的类型要求），所以有了TypeScript的问世；
作为前端开发，JavaScript是必备的知识，所以我们只要看看TypeScript文档就可以直接上手开发了，边开发边学习效果会更好；因为就算你在 ts 文件里一样写 JavaScript 语法一样能运行并且打包部署；但是！ 在编辑器里或者是打包的时候会有很多红色报错和黄色警告，多的你...受不了 ~~~；不过在浏览器控制台是看不见（注意:不推荐也不应这样直接开发，我想表达的是不用畏首畏尾直接撸代码效率更高）
我们作为有一个有节操的程序猿肯定要严格要求自己不能那么随便是吧；
也避免自己养成习惯；又或者是被同事看到你的代码，相信我他会内心鄙视你到一塌糊涂 ~~！
开发 TypeScript 我们应时刻关注编译器给出的提示，去校正过来；个人宗旨：不让项目出现一个红色报错和黄色警告，可以说成是强迫症 ~~!
一：
安装 vue-cli3.0 并创建项目！ 这时需要把你电脑之前安装的vue-cli2 卸载
npm uninstall vue-cli -g // 卸载cli2
npm install -g @vue/cli // 安装新版本
vue create vue-cli3-project // 创建
二：选择 Manually select features 后回车 在按照下图根据需求按 空格键 选中后回车
三：安装vue的官方插件 详情点击
npm i vue-class-component vue-property-decorator --save
四：根目下添加 vue.config.js 入口文件 内容如下可根据自己需求修改
const path = require('path')
const resolve = dir => {
return path.join(__dirname, dir)
}
// 线上打包路径，请根据项目实际线上情况
const BASE_URL = process.env.NODE_ENV === 'production' ? '/' : '/'
module.exports = {
baseUrl: BASE_URL,
outputDir: 'dist', // 打包生成的生产环境构建文件的目录
assetsDir: '', // 放置生成的静态资源路径，默认在outputDir
indexPath: 'index.html', // 指定生成的 index.html 输入路径，默认outputDir
pages: undefined, // 构建多页
runtimeCompiler: true,
productionSourceMap: false, // 开启 生产环境的 source map?
chainWebpack: config => {
// 热加载
config.resolve.symlinks(true)
// 修复Lazy loading routes Error： Cyclic dependency [https://github.com/vuejs/vue-cli/issues/1669]
config.plugin('html').tap(args => {
args[0].chunksSortMode = 'none'
return args
})
// 配置路径别名
config.resolve.alias
.set('@', resolve('src'))
.set('_c', resolve('src/components'))
// 打包分析
if (process.env.IS_ANALYZ) {
config.plugin('webpack-report')
.use(BundleAnalyzerPlugin, [{
analyzerMode: 'static',
}]);
}
},
css: {
modules: false, // 启用 CSS modules
// extract: true, // 是否使用css分离插件
sourceMap: false, // 开启 CSS source maps?
loaderOptions: {} // css预设器配置项
},
devServer: {
open: true, // 自动打开浏览器
port: 8089, // 端口
proxy: '' // 设置代理
}
}
五：根目下添加 tsconfig.json 校验规则 相当于Eslint
{
"defaultSeverity": "warning",
"extends": [
"tslint:recommended"
],
"linterOptions": {
"exclude": [
"node_modules/**"
]
},
"rules": {
"quotemark": false, // 字符串文字需要单引号或双引号。
"indent": false, // 使用制表符或空格强制缩进。
"member-access": false, // 需要类成员的显式可见性声明。
"interface-name": false, // 接口名要求大写开头
"ordered-imports": false, // 要求将import语句按字母顺序排列并进行分组。
"object-literal-sort-keys": false, // 检查对象文字中键的排序。
"no-consecutive-blank-lines": false, // 不允许连续出现一个或多个空行。
"no-shadowed-variable": false, // 不允许隐藏变量声明。
"no-trailing-whitespace": false, // 不允许在行尾添加尾随空格。
"semicolon": false, // 是否分号结尾
"trailing-comma": false, // 是否强象添加逗号
"eofline": false, // 是否末尾另起一行
"prefer-conditional-expression": false, // for (... in ...)语句必须用if语句过滤
"curly": true, //for if do while 要有括号
"forin": false, //用for in 必须用if进行过滤
"import-blacklist": true, //允许使用import require导入具体的模块
"no-arg": true, //不允许使用 argument.callee
"no-bitwise": true, //不允许使用按位运算符
"no-console": false, //不能使用console
"no-construct": true, //不允许使用 String/Number/Boolean的构造函数
"no-debugger": true, //不允许使用debugger
"no-duplicate-super": true, //构造函数两次用super会发出警告
"no-empty": true, //不允许空的块
"no-eval": true, //不允许使用eval
"no-floating-promises": false, //必须正确处理promise的返回函数
"no-for-in-array": false, //不允许使用for in 遍历数组
"no-implicit-dependencies": false, //不允许在项目的package.json中导入未列为依赖项的模块
"no-inferred-empty-object-type": false, //不允许在函数和构造函数中使用{}的类型推断
"no-invalid-template-strings": true, //警告在非模板字符中使用${
"no-invalid-this": true, //不允许在非class中使用 this关键字
"no-misused-new": true, //禁止定义构造函数或new class
"no-null-keyword": false, //不允许使用null关键字
"no-object-literal-type-assertion": false, //禁止object出现在类型断言表达式中
"no-return-await": true, //不允许return await
"arrow-parens": false, //箭头函数定义的参数需要括号
"adjacent-overload-signatures": false, // Enforces function overloads to be consecutive.
"ban-comma-operator": true, //禁止逗号运算符。
"no-any": false, //不需使用any类型
"no-empty-interface": true, //禁止空接口 {}
"no-internal-module": true, //不允许内部模块
"no-magic-numbers": false, //不允许在变量赋值之外使用常量数值。当没有指定允许值列表时，默认允许-1,0和1
"no-namespace": [true, "allpw-declarations"], //不允许使用内部modules和命名空间
"no-non-null-assertion": true, //不允许使用!后缀操作符的非空断言。
"no-parameter-reassignment": true, //不允许重新分配参数
"no-reference": true, // 禁止使用/// <reference path=> 导入 ，使用import代替
"no-unnecessary-type-assertion": false, //如果类型断言没有改变表达式的类型就发出警告
"no-var-requires": false, //不允许使用var module = require("module"),用 import foo = require('foo')导入
"prefer-for-of": true, //建议使用for(..of)
"promise-function-async": false, //要求异步函数返回promise
"max-classes-per-file": [true, 2], // 一个脚本最多几个申明类
"variable-name": false,
"prefer-const": false // 提示可以用const的地方
}
}
六：启动项目 就能看到初始化效果了；至此项目搭建完毕
npm run serve
vue页面实例
<template>
<!--登录页 Login-->
<div>
<!--DOM-->
</div>
</template>
import { Component, Emit, Inject, Model, Prop, Provide, Vue, Watch } from 'vue-property-decorator'
@Component
export default class Login extends Vue {
@Prop()
propA: number = 1
@Prop({ default: 'default value' })
propB: string
@Prop([String, Boolean])
propC: string | boolean
@Prop({ type: null })
propD: any
@Watch('child')
// 该组件私有方法且没有返回值的 private void
private onChanged1(val: string, oldVal: string): void { }
// 组件之间公共方法 且有返回值的 pubilc
pubilc onChanged2(val: string, oldVal: string) { return val }
}
<style scoped>
// 样式表
</style>
上面的代码相当于：
export default {
props: {
checked: Boolean,
propA: Number,
propB: {
type: String,
default: 'default value'
},
propC: [String, Boolean],
propD: { type: null }
}
methods: {
onChanged1(val, oldVal) { }，
onChanged2(val, oldVal) { return val }
},
watch: {
'child': {
handler: 'onChildChanged',
immediate: false,
deep: false
}
}
}
总结：
- 觉得
TypeScript会是以后的发展方向；所以要趁早上手！ - 当你用
vue3.0 + TypeScript开发用过react.js的同学会发现，vue3.0越来越像react.js了；我觉得这不是vue忠实粉丝想要的，但话说回来尤大大要这样改，那我们也只能去接受... vue3.0 + TypeScript对比vue2.0除去TypeScript本身差异； 写法上的差别比较直观的就是以前的方法函数会放在methods周期里，vue3.0 + TypeScript则可以说不存在methods这个生命周期了， 所以说越来越像react了
结尾： 后续会把实际项目上传到 gitHub 上， 目前是个完整的线上项目，全部上传不实际也不能， 需要删掉一些在上传； 有问题或不对之处欢迎指正；
文章部分参考 segmentfault.com/a/119000001…
分享个vue-property-decorator 的语法剖析文章 juejin.cn/post/684490…
