TypeScript学习(四)——变量类型约束（&，|，别名，数组，类型断言，枚举，元祖）

王元肉==>个人主页

大家一起加油，我喜欢分专栏将知识打碎成一份一份小知识点，一篇文章只说一个知识点，因此每篇文章篇幅较短，希望大家不要介意。如有需要可以查看专栏看看是否有该文章中涉及到的知识点进行讲解的文章，如果大家觉得有帮助，希望大家三连支持一下。

推荐阅读

前往上一篇==>变量类型约束（any,void,object,Object,unknown,undefined,null,never,string,number,boolean）

&交叉类型

// 两个约束同时起效果
interface IPerson {
    name:string,
    age:number
}

interface IStudent {
    classroom:string
}

// xiaoming对象中必须要有name,age.classroom属性
const xiaoming : IPerson & IStudent = {
    name: "xiaoming",
    age: 12,
    classroom: "六年一班"
}
console.log(xiaoming);

|联合类型

interface IWorkers {
    name: string;
    age: number;
    company: string;
}

interface IStudent {
    name: string;
    age: number;
    classroom: string;
}

// xiaoming的类型要么是工人或者是学生，满足其一即可
const xiaoming: IWorkers | IStudent = {
    name: 'xiaoming',
    age: 18,
    company: '央视'
}
console.log(xiaoming);

别名

// 当类型的约束太长时，可以起别名
const variables: string | number | 'a' | 'b' = 1;
type varRules = string | number | 'a' | 'b';
const variables2: varRules = 2;
console.log(variables,variables2); // 1,2

数组

/* 
  TypeScript像JavaScript一样可以操作数组元素。 
  有两种方式可以定义数组。 第一种，可以在元素类型后面接上 []，表示由此类型元素组成的一个数组
  第二种方式是使用数组泛型，Array<元素类型>
*/
let list1: number[] = [1,2,3];
console.log(list1.length,list1[2]);
let list2: Array<string> = ['a','b','c'];
console.log(list2[1]);

类型断言

/* 
  1.类型断言实际上就是程序员告诉编译器我明确的知道这个值就是什么类型的数据
  2.当你在TypeScript里使用JSX时，只有as语法断言是被允许的。
*/
// 写法一
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;

// 写法二
let someValue2: any = "this is a string";
let strLength2: number = (someValue as string).length;
console.log(strLength,strLength2);//16 16

枚举

/* 
  enum枚举是将一组“数值”放在一起作为一个，并起一个名字，
  可以通过枚举名[下标名]获取数值，下标名可以是数字也可以是字符串
  一个枚举多次声明，会自动合并(枚举合并,需要保证每一个枚举中的下标值都不冲突)
  第一个元素的下标默认是0，当给第二个元素设置下标为1时，以此类推后面的下标依次叠加（数字枚举）
  也可以给每一个数值指定一个下标
  发过来也可以通过值拿到下标(方向映射)
  异构枚举，同一个枚举中的下标可以既有数字又有字符串
  枚举中值全是字符串类型
*/
enum Color1 {
  Red,
  Green,
  Blue
}

enum Color1 {
  // 保证下标不冲突
  false = 3,
  true
}

enum Color2 {
  Red = 1,
  Green,
  Blue
}

enum Color3 {
  Red = 1,
  Green = 3,
  Blue = 2
}

enum Sex {
  Female,
  Male
}

console.log(Color1[2], Color2[3], Color3[2]);
console.log(Color1);
/* {
  '0': 'Red',
  '1': 'Green',
  '2': 'Blue',
  '3': 'false',
  '4': 'true',
  Red: 0,
  Green: 1,
  Blue: 2,
  false: 3,
  true: 4
} */
console.log(Color1["Green"]); // 1
const o = {
  sex: Sex.Female,
}
console.log(o.sex === Sex.Female); // true

元祖

/* 
  元祖：其实就是一个限制了长度和每一个元素的类型的数组，
  元祖编译成js，就会发现元祖被编译成了一个数组，因此元祖也可以通过下标和length拿到元素和下标，并且可以使用操作数组的方法
  当元祖长度超出时，会使用联合类型（也就是元祖中使用到的数据类型的集合）
*/  
let tuples: [number,string,boolean] = [1,'a',true];
console.log(tuples[1],tuples.length);
console.log(tuples.reverse());
// tuples.push([1,2,3]); // 报错类型“number[]”的参数不能赋给类型“string | number | boolean”的参数。ts(2345)
console.log(tuples);

前往下一篇==>变量类型约束（接口，函数，泛型，类）

结束啦！