TypeScript与Vue的结合使用

创建项目

选择 babel、vuex、typescript、vue-router。
TypeScript只对Vue文件里面的 script代码 进行改造，与html和css无关

vue  create  test

1644824313(1).png

编写测试文件

创建 views/Test.vue

<template>
    <div>
        <div>{{ name }}</div>
        <div>{{ msg }}</div>
        <div>{{ computedMsg }}</div>
        <div>{{ num }}</div>
        <button @click="emitBtn">传递给父组件</button>
    </div>
</template>

<script lang="ts">
import { Component, Prop, Watch, Emit, Vue } from "vue-property-decorator";

@Component({
    components: {},
})
export default class Test extends Vue {
    // prop
    @Prop({
        type:String,
        required: true,
        default: 'aaa'
    }) 
    private name!: string;

    // data
    private msg: string = "hello ";
    private num: number = 10;

    // watch
    @Watch("msg")
    msgChange(val:string, oldVal:string){
        alert(val +" - "+ oldVal);
    }

    // lifecycle hook
    private mounted() {
        alert("mounted, "+this.name);
        setTimeout(() => {
            this.msg = Math.random().toString();
        }, 3000);
        setTimeout(() => {
            this.greet();
        }, 5000);
    }

    // emit
    @Emit('emit-btn')
    private emitBtn(){
        return this.num;
    }

    // computed
    private get computedMsg() {
        return this.msg + " computed";
    }

    // method
    private greet() {
        alert("函数---");
    }
}
</script>

<style scoped>
</style>

创建 views/Test2.vue

<template>
    <div>
        <Test :name="name" @emit-btn="emitBtn"></Test>
    </div>
</template>

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

@Component({
    components:{
        Test
    }
})
export default class Test2 extends Vue{
    private name:string = 'test2';

    private emitBtn(e:any){
        alert(e);
    }
}
</script>

修改 router/index.ts

import Vue from 'vue'
import VueRouter, { RouteConfig } from 'vue-router'
import Home from '../views/Home.vue'

Vue.use(VueRouter)

const routes: Array<RouteConfig> = [
  {
    path: '/',
    name: 'Home',
    component: Home
  },
  {
    path: '/about',
    name: 'About',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/About.vue')
  },
  {
    path: '/test2',
    name: 'Test2',
    component: ()=> import('../views/Test2.vue')
  }
]

const router = new VueRouter({
  routes
})

export default router

修改 App.vue

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

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

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

1644824286(1).png