Vue官方文档（46）: 普通的ts组件和基于类的ts组件

一、开启ts支持：

 创建一个新工程，并选择 "Manually select features (手动选择特性)" 选项，然后选中ts
vue create my-project-name

二、定义普通的ts组件

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'
import  { VNode } from 'vue'

const OneComponent = Vue.extend({
  data () {
    return {
      msg: 'Hello'
    }
  },
  methods: {
    // 需要标注有 `this` 参与运算的返回值类型
    greet (): string {
      return this.msg + ' world 2022'
    }
  },
  computed: {
    // 需要标注
    greeting(): string {
      return this.greet() + '!'
    }
  },
  // `createElement` 是可推导的，但是 `render` 需要返回值类型
  render (createElement): VNode {
    return createElement('div', this.greeting)
  }
})

export default OneComponent
</script>

三、定义基于类的ts组件

<template>
  <div>
    <button @click="onClick">Click it!</button>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'



// @Component 修饰符注明了此类为一个 Vue 组件
@Component({
  // 所有的组件选项都可以放在这里
  //template: '<button @click="onClick">Click!</button>'
})
export default class HelloWorld extends Vue {
  // 初始数据可以直接声明为实例的 property
  message: string = 'Hello!'

  // 组件方法也可以直接声明为实例的方法
  onClick (): void {
    window.alert(this.message)
    alert(this.add(4,6))
  }

  greet():string { // 返回一个字符串
    return "Hello World";
} 

  add(a: number, b: number): number{
    return a + b;
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped>
h3 {
  margin: 40px 0 0;
}
ul {
  list-style-type: none;
  padding: 0;
}
li {
  display: inline-block;
  margin: 0 10px;
}
a {
  color: #42b983;
}
</style>

四、使用上述两个组件(App.vue中）

<template>
  <div id="app">
    <img alt="Vue logo" src="./assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
    <HelloWorld2/>
    <one-component></one-component>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator';
import HelloWorld from './components/HelloWorld.vue';
import OneComponent from './components/OneComponent.vue'

@Component({
  components: {
    HelloWorld,
    OneComponent,
  },
})
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>