Vue+ts 声明变量类型

背景

vue + ts 网上教程相对其他来说确实很少，所以经常会碰到一堆闹心的事情。这次主要记录一下关于定义变量和变量类型的闹心事。
以实际项目来说，我们从后端 api 获取的数据，像字典一样存在中（我真不知道这个在 ts 里面叫啥类型，毕竟没有系统学过 ts 基础），所以我们要定义一个接口类型 interface：

interface ProjectBriefDTO {
    id: string,
    name: string,
    keywords: string[],
    coverUrl: string,
    stars: number,
    awesomes: number,
}

这样在类里面定义一个变量就可以指定其类型为 ProjectBriefDTO 了，然后就可以识别它里面有哪些属性了。

天坑

我们之前定义变量都是这么定义的：

export default class UserArticle extends Vue {
  private a: number;
}

这样定义的变量必须要赋初值，也就是说上面的写法是会报错的，简单地说你必须带 = 号，把一个值赋给它。那么对于像 number 这样简单地数据类型，我们就可以直接让他 = 0 就完事了。
如果是像 ProjectBriefDTO 这样复杂地数据类型就不一样了，像下面地写法：

private a: ProjectBriefDTO {
	id: ""
}

这样会报错的，因为必须要把 DTO 包含的所有属性都包含进去。所以以前我们都是手动要在后面把所有的值都附上初值的。
这样做显然很麻烦，代码会很丑，而且不同文件都要初始赋值一遍，如果遇到后端程序猿把单词拼错、经常改变量名、加变量，你会当场裂开，因为所有地方都要改一遍，显然有东西我们没有掌握，才会这么烦。

最简单的解决方法

昨天我用了比较麻烦的方法解决了，但是今天突然发现了一个超级简单的方法，就先说一下这个简单的方法：

private a!: number;

对，在：前面加一个！就不报错了。如果没有赋值，就一直是 undefined，这件事告诉我们，要好好学习基础知识，只靠嫖来的语法终究会爆炸。
这样会不会出什么 bug 我就不知道了，毕竟今天才发现。

导入模块

就算你用最简单的方法解决这个问题，interface 也是要从外部导入进来的，先介绍一下导入的方法。主要就是区分一下两种写法：

// first plan
export interface ProjectBriefDTO {
    id: string,
    name: string,
    keywords: string[],
    coverUrl: string,
    stars: number,
    awesomes: number,
}

import {ProjectBriefDTO} from "../filePath"

// second plan
export default interface ProjectBriefDTO {
    id: string,
    name: string,
    keywords: string[],
    coverUrl: string,
    stars: number,
    awesomes: number,
}

import anyName from "../filePath"

就是这点区别，一个文件里面最多一个 default，就默认导出它。如果没有 default 就必须加而且名字必须一样，加了 default 的，没有大括号，名字也可以随便起。

看起来不那么方便的方法

在我发现！的秘密之前，我用了另一种方法：“生成器” 函数，直接上代码：

import STRINGS from "../../components/CommonUtils/ConstStrings"

export interface ProjectBriefDTO {
    id: string,
    name: string,
    keywords: string[],
    coverUrl: string,
    stars: number,
    awesomes: number,
}

export function getProjectBriefEmpty() {
    var projectBrief: ProjectBriefDTO = {
        id: STRINGS.EmptyGuid,
        name: "无",
        keywords: [],
        coverUrl: "",
        stars: 0,
        awesomes: 0,
    }
    return projectBrief
}

// another file
import { ProjectBriefDTO , getProjectBriefEmpty} from "../filePath"

export default class UserArticle extends Vue {
  private projectBrief: ProjectBriefDTO = getProjectBriefEmpty()
}

相信你已经看懂这在干什么了，直接调用这个函数就 OK 了，增加变量我们就只用修改 DTO 下的两个地方就好。
温馨提示：千万不要直接定义变量然后导入，因为这样所有导入的地方都会引用同一个变量，这是引用传递，你的程序一定会直接裂开。
虽然这样看起来有一丢丢麻烦，但是好处也显而易见，你可以定义你想要的初值，比如这里面的 name，在项目里面我真的是要它初值为 “无” 的。所以定义 DTO 的时候多加一个函数也不是什么坏事。