Vue.js 3 中 TypeScript 全局类型 & 全局变量 & 局部类型

「这是我参与11月更文挑战的第3天，活动详情查看：2021最后一次更文挑战」

前言

主要说明全局和局部的划分，这也是开始使用 Typescript 的第一步

1. 全局类型
2. 全局变量
3. 局部类型

全局类型

项目的根目录有 tsconfig.json 可以配置 TypeScript。include 属性包含了需要校验 ts 的文件

默认会将 xx.d.ts 类型文件中的类型注册成全局的，下面是一个例子

// index.d.ts

type T1 = number;
interface T2 {
    a: string
};
declare namescpace golbal {
    type T3 = '1' | '2'
}

// 组件内
<script lang="ts">
const t1: T1 = 1;
const t2: T2 = {
    a: ''
}
const t3: golbal.T3 = '2'
</script>

常用于定义的数据类型(接口、环境变量等)

全局变量

全局变量也是在 xx.d.ts 的文件中申明的

// index.d.ts
declare const HaHa = number;

declare namespace golbal {
    const HaHa: string;
}

全局变量使用场景主要是多个地方使用，例如引入的第三方库

vue.js 相关的依赖在 vue.js 3 和 typescript 的支持也越来越好了。如果不支持的话可能会被新的相同功能依赖所顶替，所以全局变量主要是我们自己用

局部类型

<script lang="ts">
type T1 = string

const t1: T1 = '123'
<script>

局部类型可以理解成：单独的一个地方需要使用，就写在使用的附近

小结

1. 项目中使用 TypeScript 的好处不言而喻，合理的划分类型和变量的作用域也是项目规划的一部分。

2. 当全局类型和局部类型都存在的时候，取的还是局部类型，即使是 interface。命名空间能较好的规避这种情况

3. 对于接口类型的一个想法：让服务端返回的详情、列表和编辑数据类型统一，这个我们就可以只定义一个类型用在三个地方

4. 全局和局部的概念可以和组件结合理解。有全局组件，也有局部组件。