一、Vue3.x集成Typescript

Ts基礎(chǔ)教程：https://www.itying.com/goods-905.html

# 1\. Install Vue CLI, if it's not already installed
npm install --global @vue/cli

# 2\. Create a new project, then choose the "Manually select features" option
vue create my-project-name

# If you already have a Vue CLI project without TypeScript, please add a proper Vue CLI plugin:
vue add typescript

image-20201108121622154.png

image-20201108121848583.png

image-20201108121935756.png

二、Vue3.x集成Typescript后定義組件

vue3.x中集成ts后請(qǐng)確保組件的 script 部分已將語言設(shè)置為 TypeScript

<script lang="ts">
  ...
</script>

要讓 TypeScript 正確推斷 Vue 組件選項(xiàng)中的類型，需要使用 defineComponent 全局方法定義組件

import { defineComponent } from 'vue'

const Component = defineComponent({
  // 已啟用類型推斷
})

1、定義一個(gè)基于ts的Home組件

<template>
<div>
    home組件
    <br>
    {{book.title}}
    <br>
    {{book.author}}
    <br>
    {{book.year}}
    <br>

</div>
</template>

<script lang="ts">
import {
    defineComponent
} from 'vue';

export default defineComponent({
    name: 'App',
    data() {
        return {
            book: {
                title: 'Vue 3 Guide',
                author: 'Vue Team',
                year: 2020
            }
        }
    }

});
</script>

<style>

</style>

2、定義一個(gè)接口約束Home組件中data的數(shù)據(jù)類型

<template>
<div>
    home組件
    <br />
    {{ book.title }}
    <br />
    {{ book.author }}
    <br />
    {{ book.year }}
    <br />
</div>
</template>

<script lang="ts">
import {
    defineComponent
} from 'vue';

interface Book {
    title: string
    author: string
    year: number
}
var book: Book = {
    title: 'Vue 3 Guide',
    author: 'Vue Team',
    year: 2020
}
export default defineComponent({
    name: 'App',
    data() {
        return {
            book
        }
    }

});
</script>
<style>
</style>

3、方法、計(jì)算屬性中約束數(shù)據(jù)類型

<template>
<div>
    home組件
    <br /> <br />
    {{ book.title }}
    <br /> <br />
    {{ book.author }}
    <br /> <br />
    {{ book.year }}
    <br /> <br />

    <button @click="setTitle()">設(shè)置數(shù)據(jù)</button>
    <br /> <br />

    {{greeting}}

</div>
</template>

<script lang="ts">
import {
    defineComponent
} from 'vue';

interface Book {
    title: string
    author: string
    year: number
}
var book: Book = {
    title: 'Vue 3 Guide',
    author: 'Vue Team',
    year: 2020
}
export default defineComponent({
    name: 'App',
    data() {
        return {
            book
        }
    },
    methods: {
        setTitle(): void {
            this.book.title = "你好vue3.0"
        }
    },
    computed: {
        // 需要注釋
        greeting(): string {
            return this.book.title + '!'
        }
    }
});
</script>

<style>
</style>

三、Vue3.x集成Typescript與組合式 API 一起使用

<template>
<div>
    home組件
</div>
</template>

<script lang="ts">
import {
    defineComponent,
    ref,
    reactive
} from 'vue';

interface Book {
    title: string
    year ? : number
}
export default defineComponent({
    name: 'App',
    setup() {
        const year1 = ref < string | number > ('2020');

        const book1 = reactive < Book > ({
            title: 'Vue 3 Guide'
        })
        // or
        const book2: Book = reactive({
            title: 'Vue 3 Guide'
        })
        // or
        const book3 = reactive({
            title: 'Vue 3 Guide'
        }) as Book

        return {
            year1,
            book1,
            book2,
            book3
        }

    }
});
</script>

<style>
</style>