了解基础篇：请跳转

3.4.3 TS的编译

点击跳转 TypeScript和JavaScript的区别,全面解读超详细
我们知道.js的文件可以直接在浏览器中运行的，而.ts或者.tsx却不行，所以我们在运行TS项目时需要编译成浏览器引擎可以识别的JS语言。同时为了提高编译速度，我们可以将稳定的module提前编译成js文件放到工程中，这样下次编译就会直接跳过该nodule的编译。在引用编译生成的 JavaScript 文件时，我们需要注意好顺序。以上面的代码为例，我们在 Html 代码中这么引用。

<script src="Validation.js" type="text/javascript"/>
<script src="LettersOnlyValidator.js" type="text/javascript"/>
<script src="ZipCodeValidator.js" type="text/javascript"/>
<script src="Test.js" type="text/javascript"/>

在这里插入图片描述

时光使我们渐行渐远，有人活着却没有理想，就宛如在地狱，有人活着却满怀理想，就宛如在天堂，没有理想的人如同行尸走肉，对生活而感到不精彩，无味，而我是一个对生命充满希望，永不放弃，为理想而拼搏的人

4.TS 高级类型

更新日期：2022年11月30日
更新时间：20点46分

4.1 元组

提到元组，我们一定要搞清楚它和数组的区别，或者他和数组的关系，混淆两者等于是浪费我们宝贵的时间，所以一定要学懂

元组可以看做是数组的拓展，它表示已知元素数量和类型的数组。确切地说，是已知数组中每一个位置上的元素的类型

你读懂这句话了吗，数组元素的类型

let tuple: [string, number, boolean];
tuple = ["a", 2, false];
tuple = [2, "a", false]; // error 不能将类型“number”分配给类型“string”。 不能将类型“string”分配给类型“number”。
tuple = ["a", 2]; // error Property '2' is missing in type '[string, number]' but required in type '[string, number, boolean]'
tuple = ["a", 2, false,"parm"] //在 2.6 及之前版本中，超出规定个数的元素"parm"称作越界元素

可以看到，上面我们定义了一个元组 tuple，它包含三个元素，且每个元素的类型是固定的。当我们为 tuple 赋值时：各个位置上的元素类型都要对应，元素个数也要一致。

当某个方法具有多个类型的参数时，我们可以封装为一个元组，学过java、c# 的同学可能懂了，元组是一种更加简单的bean

给单个元素赋值

tuple[1] = 3;
tuple[2] = true;

在 2.6 之后的版本，[string, number]元组类型的声明效果上可以看做等同于下面的声明：

interface Tuple extends Array<number | string> {
  0: string; //第一个变量为string类型
  1: number; //第二个变量为number类型
  length: 2; // array的长度为2
}

接口Tuple，它继承数组类型，并且数组元素的类型是 number 和 string 构成的联合类型，这样接口Tuple 就拥有了数组类型所有的特性。并且我们明确指定索引为0的值为string类型，索引为1的值为number类型，同时我们指定 length 属性的类型字面量为 2，这样当我们再指定一个类型为这个接口Tuple的时候，这个值必须是数组，而且如果元素个数超过2个时，它的length就不是2是大于2的数了，就不满足这个接口定义了，所以就会报错。

元组里面有一个员宇宙，他有各种各样的元素，他是充实的，它对数量有限制。而数组里面是孤独的，他只有一种元素，它对数量没有限制。这样的解释只是为了帮你记住元组而不是理解元素。不过学过paython的同学一定懂得元组是什么，同时元组也是数据库的底层的一种类型。

4.2 交叉类型

交叉类型就是取多个类型的并集，使用 & 符号定义，被&符链接的多个类型构成一个交叉类型，表示这个类型同时具备这几个连接起来的类型的特点，来看例子：
T & U

const merge = <T, U>(arg1: T, arg2: U): T & U => {
  let res = <T & U>{}; // 这里指定返回值的类型兼备T和U两个类型变量代表的类型的特点
  res = Object.assign(arg1, arg2); // 这里使用Object.assign方法，返回一个合并后的对象；
                                   // 关于该方法，请在例子下面补充中学习
  return res;
};
const info1 = {
  name: "lison"
};
const info2 = {
  age: 18
};
const lisonInfo = merge(info1, info2);
 
console.log(lisonInfo.address); // error 类型“{ name: string; } & { age: number; }”上不存在属性“address”

Object.assign方法可以合并多个对象，将多个对象的属性添加到一个对象中并返回，有一点要注意的是，如果属性值是对象或者数组这种保存的是内存引用的引用类型，会保持这个引用，也就是如果在Object.assign返回的的对象中修改某个对象属性值，原来用来合并的对象也会受到影响

可以看到，传入的两个参数分别是带有属性 name 和 age 的两个对象，所以它俩的交叉类型要求返回的对象既有 name 属性又有 age 属性。学到这里你似乎感觉到typescript 名称的缘由了，就是各种各样的类型的；如果说JavaScript是一门像java的语言，那么TypeScript才是真正完成了这项使命，即面向对象的前端编程语言。

4.3 联合类型

联合类型实际是几个类型的结合，但是和交叉类型不同，联合类型是要求只要符合联合类型中任意一种类型即可，它使用 | 符号定义。当我们的程序具有多样性，元素类型不唯一时，即使用联合类型。
T | U
string | number

const getLength = (content: string | number): number => {
  if (typeof content === "string") return content.length;
  else return content.toString().length;
};
console.log(getLength("abc")); // 3
console.log(getLength(123)); // 3