vue & typescript

这天小E 提及到几个问题

Vue 的 Single-File Component 混合HTML / Code 内容放一起的问题.

Vue 的 Single-File Component 档案结构基本如下

<template>  <div>This will be pre-compiled</div></template><script src="./my-component.js"></script><style src="./my-component.css"></style>

Single-File Component 档案可以把HTML , CSS 以及 JavaScript/Typescript 内容集中在一个档案,
但也可以把这三种类型内容分开到三个档案 .vue .css .js 或 .ts

关注点分离, 在该原则下，系统应该按照其业务来将系统本身划分成不同的部分，从而进一步降低耦合性.

那么首先，关注点是什么呢？
比如说这个Single-File Component 里面最主要有两种业务区隔，就是基本的Code 实现层(infrastruture) 和UI 展现层(Persistent ).

对Developer 角度来说, 他最常修改最关心的地方就是Javascript/Typescript Code 的部分, 它对Developer 是有用的，我们就称它为一个关注点.
对UI Designer 来说, 他最常修改关注的点, 则就是UI 展现层的 template 和 css.

对Developer 浏览程式码角度来说, 打开一个Single-File Component 档案, 开头映入眼中却是HTML 内容,
当HTML 内容很大, 就得移动游标到code block 地方. 这实在是不方便.

我的建议是分两种档案类型就可以了.
my-component.vue 和 my-component.ts

Developer 人员只需打开 .ts 就可以快速浏览修改Code .
Designer 人员也只需要打开 .vue 档案修改HTML / CSS

当然假如你是"全端"超人(Designer / Javascript / Typescript 样样精通, 样样常常修改), 那就Single-File 混在一起修改吧.

对我来说, 就算要同时修改HTML / Code , 我也顷向分两个档案类型,

偏好Javascript 开发, 写 any 就很爽 !?

为什么我们要在 Vue 专案中使用 TypeScript，有几个点是我认为的好处:

好在Vue 2.5 版以后开始在 vue-cli3 新增了 TS 模板，方便了许多.

基本上 Typescript vue component 样子如下

import { Component, Prop, Vue } from 'vue-property-decorator';@Componentexport default class HelloWorld extends Vue {   @Prop() private msg!: string;   @Emit('ParentEmit')    private changeMsg(s: string) {     return;   }   public mounted() {   }}

使用Typescript 之后, 引用第三方js 套件, 使用上不方便 ??

常常引用第三方js 套件, 却没提供Typescript declaration 定义档案, 使用上不方便
相反的, 这有好处,

第一个引用js 套件的developer 就得自行提供Typescript declaration file.
我们有超多 developer , 不是每一个 developer 通通都知道这第三方js 有哪些public method 可以用.
透过 "先锋developer" 可以让后面的 developer 快速方便知道public methods

尝试用了Typescript 之后, 也引用TDD 测试, 但常常会遇到non-public method , 就把它变成public 来测试.

将要测试的私有方法公开为公共方法, 这真的不是一个好主意. 会破坏封装并将内部实现程式码向外部用户公开.

因为单元测试的意义, 在于：「单元测试就是用来模拟外部如何使用测试目标物件, 验证其行为是否符合预期」

而物件导向的封装原则用意在于: 隔离出物件的内部与外部, 也就是定义private 与 public methods.

另外我们常常会遇到因为一些需求异动，导致单元测试程式就需要跟着重新调整, 设计或修改, 而且频率与範围导致测试的维护成本增加不少.
所以是不希望 developer 去针对非 public method 写单元测试.

但如果你认为这个private method 真的非常重要又不希望曝露出去,
那就把private 提取出去变成物件, 反之你觉得这不值得提取出去, 那就表明这个private 一点都不重要.

总而言之-最好不要对私有方法进行测试