前言：前置语言要求是 ES6 , Node.js （ Npm 命令的使用）。该系列主要记录学习 TS 的一些总结。
初见
最开始知道 TS 感觉是很久之前了，已经忘了是在哪里，就是觉得和 JS 名字很像（虽说名字像也没有什么必然练习，比如 JS 和 JAVA ）。严格来说，是近期才开始了解的，给我的第一印象：复杂。为什么不用 JS 而用这么麻烦的 TS？与其说是复杂或麻烦，其实更合适的来说，是严格。从声明变量到声明函数，都需要同时声明类型，如果没有说明，不说运行，连编译都无法通过。
这种感觉不是陌生，而是熟悉。因为在高中的时候使用过相当长时间的 VB ，大学里又有 C / C# 的课程，所以再看到静态类型的语言，会有一些熟悉的感觉。不管是编码时的语句联想，还是编译前的错误检查，都让开发过程变得透明了许多。最显而易见的就是一些低级的错误不会发生，也不会因为类型原因而踩坑。
未完待续…（第2次更新 8.3）
实操
本打算将之前的 JS 项目使用 TS 重写，但是又想起了想要开发 UI 库的想法，于是在 UIKit 项目中使用了 TS 进行开发（Vue2 + TS），当时 Vue3 还没有正式发布，所以用的还是 Vue2。Vue2 与 TS 的配合确实不是很好，之前只是看到有帖子这样说，但是没有真正操作过。
Vue2 + TS 是这样定义组件的：
<script lang="ts">
import { Component, Emit, Prop, Vue } from "vue-property-decorator";
@Component
export default class UIButton extends Vue {
@Prop(Boolean) private large: boolean | undefined;
@Prop(Boolean) private xlarge: boolean | undefined;
@Prop(Boolean) private small: boolean | undefined;
@Prop(Boolean) private xsmall: boolean | undefined;
@Prop(Boolean) private tile: boolean | undefined;
@Prop(Boolean) private rounded: boolean | undefined;
@Prop(Boolean) private circle: boolean | undefined;
@Prop(Boolean) private disabled: boolean | undefined;
@Prop(String) private color: string | undefined;
@Prop(String) private fontColor: string | undefined;
@Emit("click")
private emitClickEvent(event: MouseEvent) {
//console.log("事件处理函数", event);
}
private onClickBtn(event: MouseEvent) {
if (!this.disabled) this.emitClickEvent(event);
else console.log("按钮已禁用");
}
get TintColor() {
if (this.color) return this.color;
else return "#2d8cf0";
}
get FontColor() {
if (this.fontColor) return this.fontColor;
else return "#17233D";
}
}
</script>可以看见在 Vue2 中大量使用装饰器来做原先 OptionsApi 做的事情，但是感觉稍显复杂，而且代码冗余，很多都是相同的部分但是却需要重复书写。
Vue3 为了融合 TS 做出改进，用 TS 重写，也带来了 CompositionApi，这使得开发有了更多的选择。下面是 Vue3 中使用 TS 定义组件：
import { defineComponent } from "vue";
export default defineComponent({
props: {
large: Boolean,
xlarge: Boolean,
small: Boolean,
xsmall: Boolean,
tile: Boolean,
rounded: Boolean,
circle: Boolean,
disabled: Boolean,
color: String,
fontColor: String,
},
computed: {
TintColor(): string {
if (this.color) return this.color;
else return "#2d8cf0";
},
FontColor(): string {
if (this.fontColor) return this.fontColor;
else return "#17233D";
},
},
methods: {
onClickBtn(event: MouseEvent) {
if (!this.disabled) console.log("按钮被点击", event);
else {
console.log("按钮已禁用", event);
}
},
},
});
</script>光从 Props 的部分来看就精简了不少。另外还有 setup() 函数可以使用，具体的使用在 UIKit 中轮播图组件中，具体可能会放在 Vue 相关的帖子中具体记录。
未完待续…（第3次更新 9.22）