安装vue-cli 安装ts依赖 配置webpack 添加tsconfig,json 添加tslint.json 让ts识别.vue 改造.vue文件
什么是 typescript
typescript 时javascript的强类型版本。然后在编译期去掉类型和特有语法，生成纯粹的 javascript 代码，由于最终在浏览器中运行的仍然是 JavaScript ，所以 TypeScript 并不依赖于浏览器的支持，也并不会带来兼容性问题。
TypeScript 是 JavaScript 的超集，这意味着他支持所有的 JavaScript 语法。并在此之上对 JavaScript 添加了一些扩展，如 class / interface / module 等。这样会大大提升代码的可阅读性。
强类型语言的优势在于静态类型检查，具体可以参见 http://www.zhihu.com/question... 的回答。概括来说主要包括以下几点
1.静态类型检查（静态类型检查可以避免很多不必要的错误, 不用在调试的时候才发现问题）
2.IDE智能提示
3.代码重构
4.可读性
Vue 引入 TypeScript
首先Cli之后，接下来需要安装一些必要/以后需要的插件
安装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 风格的约束配置 webpack
首先找到 .webpack.config.js或 ./build/webpack.base.conf.js
找到 entry.app 将 main.js 改成 main.ts , 顺便把项目文件中的 main.js 也改成 main.ts , 里面内容保持不变
entry: {
app: './src/main.ts'
}
找到 resolve.extensions 里面加上 .ts 后缀 （是为了之后引入.ts的时候不写后缀）
resolve: {
extensions: [ '.js', '.vue', '.json', '.ts' ],
alias: {
'@': resolve('src' )
}
}
找到 module.rules 添加webpack对 .ts 的解析
{
test: /\.ts$/ ,
exclude: /node_modules/ ,
enforce: 'pre' ,
loader: 'tslint-loader'
},
{
test: /\.tsx?$/ ,
loader: 'ts-loader' ,
exclude: /node_modules/ ,
options: {
appendTsSuffixTo: [ /\.vue$/ ],
}
},
添加这段代码
ts-loader 会检索当前目录下的 tsconfig.json 文件，根据里面定义的规则来解析 .ts 文件（就跟 .babelrc 的作用一样）
tslint-loader 作用等同于 eslint-loader 添加 tsconfig.json
添加 tsconfig.json
接下来在根路径下创建 tsconfig.json 文件
这里有一份参考的 tsconfig.json 配置，完成的配置请点击 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"
]
}
}
自己的配置
{
"include" : [
"src/**/*"
],
"exclude" : [
"node_modules"
],
"compilerOptions" : {
"allowSyntheticDefaultImports": true ,
"experimentalDecorators": true ,
"allowJs": true ,
"module": "esnext" ,
"target": "es5" ,
"moduleResolution": "node" ,
"isolatedModules": true ,
"lib" : [
"dom" ,
"es5" ,
"es2015.promise"
],
"sourceMap": true ,
"pretty": true
}
}
添加 tslint.json
在根路径下创建 tslint.json 文件
这里就很简单了，就是 引入 ts 的 standard 规范
{
"extends": "tslint-config-standard" ,
"globals" : {
"require": true
}
}
让 ts 识别 .vue
由于 TypeScript 默认并不支持 *.vue 后缀的文件，所以在 vue 项目中引入的时候需要创建一个 vue-shim.d.ts 文件，放在项目项目对应使用目录下，例如 src/vue-shim.d.ts
declare module "*.vue" {
import Vue from "vue" ;
export default Vue;
}
重点
TypeScript *.vue 后缀的文件可以交给 vue 模块来处理。
而在代码中导入 *.vue 文件的时候，需要写上 .vue 后缀。原因还是因为 TypeScript 默认只识别 *.ts 文件，不识别 *.vue 文件：
import Component from 'components/component.vue'
文件
在这之前先让我们了解一下所需要的插件（下面的内容需要掌握 es7 的 装饰器 , 就是下面使用的@符号）
vue-class-component
vue-class-component 对 Vue 组件进行了一层封装，让 Vue 组件语法在结合了 TypeScript 语法之后更加扁平化：
<template>
<div>
<input v-model="msg">
<p>msg: {{ msg }}</p>
<p>computed msg: {{ computedMsg }}</p>
<button @click="greet">Greet</button>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
@Component
export default class App extends Vue {
// 初始化数据
msg = 123
// 声明周期钩子
mounted () {
this .greet()
}
// 计算属性
get computedMsg () {
return 'computed ' + this .msg
}
// 方法
greet () {
alert( 'greeting: ' + this .msg)
}
}
</script>
上面的代码等同于
export default {
data () {
return {
msg: 123
}
}
// 声明周期钩子
mounted () {
this .greet()
}
// 计算属性
computed: {
computedMsg () {
return 'computed ' + this .msg
}
}
// 方法
methods: {
greet () {
alert( 'greeting: ' + this .msg)
}
}
}
开始修改 App.vue 文件
在 script 标签上加上 lang="ts" , 意思是让 webpack 将这段代码识别为 typescript 而非 javascript 修改vue组件的构造方式( 跟 react 组件写法有点类似, 详见 官方 )， 如下图 用 vue-property-decorator 语法改造之前代码
<template>
<div >
<img src="./assets/logo.png">
<router-view/>
</div>
</template>
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
@Component({})
export default class App extends Vue {
}
</script>
<style>
#app {
font -family: 'Avenir', Helvetica, Arial, sans- serif;
-webkit-font- smoothing: antialiased;
-moz-osx-font- smoothing: grayscale;
text - align: center;
color: #2c3e50;
margin - top: 60px;
}
</style>
最后npm run dev
如果按照文章没有配置出来，可以参考此 repo vue-typescript-starter (安全按照文章一步一步操作的版本)
TypeScript vue typescript 支持 从 JavaScript 到 TypeScript 6 - Vue 引入 TypeScript Vue with TypeScript ES7 Decorator 装饰者模式
查看更多关于vue-cli+webpack-simple +typescript 入门的详细内容...