ref從零實(shí)現(xiàn)暂题，主要跟著這篇文章來練習(xí)的
插件
ts-node：編譯 + 運(yùn)行。
泛型正向
泛型：創(chuàng)建可重用的組件究珊，一個(gè)組件可支持多種類型的數(shù)據(jù)薪者。
項(xiàng)目結(jié)構(gòu)
-
shims-tsx.d.ts剿涮，允許編寫jsx代碼言津，在.tsx結(jié)尾的文件中 -
shims-vue.d.ts，讓ts識(shí)別vue文件
interface和 type的區(qū)別
相同點(diǎn)：都用來描述對(duì)象或函數(shù)幔虏，都能拓展（extends)
不同點(diǎn)：
type可聲明基本類型別名纺念，聯(lián)合類型，元組想括。type可用typeof獲取實(shí)例的類型進(jìn)行賦值陷谱。
interface可以聲明合并。interface有可選屬性和只讀屬性瑟蜈。
private烟逊、public、protected
vue組件的ts寫法
Vue.extend需要與mixins結(jié)合使用铺根。
vue-class-component：基于類的API宪躯，官方在維護(hù)。
vue-property-decorator：基于vue-class-component位迂，寫起來更順手访雪。
子組件components/Blog.vue
<template>
<div>
<h2>{{ post.title }}</h2>
<p>{{ post.body }}</p>
<p>written by {{ post.author }} on {{ date }}</p>
</div>
</template>
<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
// 對(duì)數(shù)據(jù)進(jìn)行類型約束
export interface Post {
title: string;
body: string;
author: string;
datePosted: Date;
}
@Component
export default class Blog extends Vue {
@Prop() private post!: Post;
get date() {
return `${this.post.datePosted.getDate()}/${this.post.datePosted.getMonth()}/${this.post.datePosted.getFullYear()}`;
}
}
</script>
<style lang="scss" scoped></style>
父組件home.vue
<template>
<div class="about">
<h1>This is an about page</h1>
<Blog v-for="item in data" :post="item" :key="item.author"></Blog>
</div>
</template>
<script lang="ts">
import { Vue, Component, Prop } from "vue-property-decorator";
import Blog, { Post } from "@/components/Blog.vue";
@Component({
components: {
Blog,
}
})
export default class Home extends Vue{
private data: Post[] = [
{
title: '我來了Ｏ耆稹！臣缀！',
body: '這是我的第一篇博客',
author: 'leeee',
datePosted: new Date(2020, 6, 6)
},
{
title: '今天放假了',
body: '這是我的第二篇博客',
author: 'yyyyy',
datePosted: new Date(2020, 6, 8)
},
{
title: '要開始運(yùn)動(dòng)了',
body: '這是我的第三篇博客',
author: 'gggeee',
datePosted: new Date(2020, 6, 10)
},
]
}
</script>
es6中的class創(chuàng)建getter時(shí)坝橡，使用關(guān)鍵字get
