.ts 表示你的代码就是用 ts 写的。
TypeScript 相比 JavaScript 增加了类型声明。这些类型声明帮助编译器识别类型，从而防止开发者“搬起石头砸自己的脚”。
原则上，TypeScript 需要开发者做到先声明后使用。这就导致开发者在调用很多原生接口（浏览器、Node.js）或者第三方模块的时候，因为某些全局变量或者对象的方法并没有声明过，导致编译器的类型检查失败。
好了，下面开始结合vue使用。
- 安装vue-cli3
npm install -g @vue/cli
1
- 创建vue项目脚手架
```javascript
vue create ts-temp // ts-temp是项目名
1
-
选择创建模式，如图我门选择第二个自定义创建
-
手动选择特性（上下箭头移动，空格选择，回车完成）
-
接下来会选择一些配置（y-是，n-否）
是否使用类样式组件语法？选择y
是否将babel与typescript一起使用？选择y
路由是否使用history模式（默认hash模式）？选择y
选择css预编译方式，我选的是Sass/SCSS (with node-sass)
选择一个语法检测配置，选择TSLint
选择语法检查方式，选择Lint on save
你希望babel、postcss、eslint等的配置文件放在哪？选择In dedicated config files
将此保存为将来项目的预设？随意选，我选的n
vue-cli3脚手架生成项目目录说明
│ .browserslistrc
│ .gitignore
│ .postcssrc.js // postcss 配置
│ babel.config.js
│ package.json // 依赖
│ README.md // 项目 readme
│ tsconfig.json // ts 配置
│ tslint.json // tslint 配置
│ vue.config.js // webpack 配置（自己新建）
│ yarn.lock
│
├─public // 静态页面
│ │—favicon.ico
│ │—index.html
│
├─src // 主目录
│ ├─assets // 静态资源
│ │ logo.png
│ │
│ ├─components
│ │ HelloWorld.vue
│ │
│ │─views // 页面
│ │ About.vue
│ │ Home.vue
│ │
│ │ App.vue // 页面主入口
│ │
│ │ main.ts // 脚本主入口
│ │
│ ├─router // 路由配置
│ │ index.ts
│ │
│ │ registerServiceWorker.ts // PWA 配置
│ │
│ │ shims-tsx.d.ts
│ │ shims-vue.d.ts
│ │
│ ├─filters // 过滤（自己新建）
│ ├─lib // 全局插件（自己新建）
│ │
│ │
│ ├─store // vuex 配置
│ │ index.ts
│ │
│ ├─typings // 全局注入（自己新建）
│ │
│ ├─utils // 工具方法(axios封装，全局方法等)（自己新建）
│
————————————————
插件
- vue-class-component
强化 Vue 组件，使用 TypeScript/装饰器 增强 Vue 组件 - vue-property-decorator
在 vue-class-component 上增强更多的结合 Vue 特性的装饰器 - vuex-class
基于vue-class-component对Vuex提供的装饰器
改造.vue
原因还是因为 TypeScript 默认只识别 .ts 文件，不识别 .vue 文件
import Component from ‘components/component.vue’
<script lang="ts">
import {Component,Vue} from 'vue-property-decorator'
import add from "../components/add.vue"
@Component(
{
components:{
add
}
}
)
export default class App extends Vue {
// 初始化数据
msg = 123
msgObj:any={
a:"data1",
b:"data2"
}
// 声明周期钩子
mounted () {
this.greet()
}
// 计算属性
get computedMsg () {
return 'computed ' + this.msg
}
// 方法
greet () {
console.log('greeting: ' + this.msg)
}
}
</script>
如果不用class写法差别不大
import Vue from 'vue'
export default Vue.extend({
data () {
return {}
}
})
class写法
import { Component, Vue, Watch, Prop } from 'vue-property-decorator'
import { Route } from 'vue-router'
@Component({
components: {},
mixins: []
})
export defalut class xxx extends Vue {
private a: number = 0 // 声明变量
@Prop({required: true})
private b!: string
@Watch('$route',{ immediate: true })
private changeRouter(route: Route){
console.log(route)
}
get c () { // 计算属性
retrun xxx
}
private d () { // 方法不用写在methods里面了
}
}
父组件传值给子组件（使用vue-property-decorator装饰器 @Prop）
父组件
<template>
<div class="home">
<add :title="abb"></add>
</div>
</template>
<script lang="ts">
import {Component,Vue} from 'vue-property-decorator'
import add from "../components/add.vue"
@Component({
components:{
add
}
}
)
export default class Add extends Vue {
private abb="我是好人啊"
}
</script>
子组件
<template>
<div class="home">
<h2>父组件传递过来的值</h2>
<h3>{{title}}</h3>
</div>
</template>
<script lang="ts">
import {Component,Prop,Vue} from 'vue-property-decorator'
import add from "../components/add.vue"
@Component
export default class Add extends Vue {
@Prop({
type:String,
required:true,
default:""
}) private title!:string
}
</script>
子组件传值给父组件（使用vue-property-decorator装饰器 @Emit）
子组件
<template>
<div class="home">
<button @click="emitbtn">点击我吧</button>
</div>
</template>
<script lang="ts">
import {Component,Emit,Vue} from 'vue-property-decorator'
@Component
export default class Add extends Vue {
private count=0;
@Emit() private emitbtn() {
return this.count
}
}
</script>
父组件
<template>
<div class="home">
<add @emitbtn="att"></add>
</div>
</template>
<script lang="ts">
import {Component,Vue} from 'vue-property-decorator'
import add from "../components/add.vue"
@Component({
components:{
add
}
}
)
export default class Add extends Vue {
private att(c:any){
console.log(c);
}
}
</script>
注：@Emit其他写法
