TypeScript学习笔记系列一(类型)

思维导图

基本类型

布尔：只有2个参数 true 和 false

let EagleChinaWu: boolean = true;  // false

数字类型：浮点数(二/八/十/十六进制)

let EagleChinaWu: number = 0b1010;   // 0b1010、0o744、6、0xf00d

字符串类型：使用双引号（ "）或单引号（'）表示字符串

let EagleChinaWu: string = '微信公众号EagleChinaWu';

数组类型：需要指定数组内的类型或者声明的时候必须赋值

let EagleChinaWu: Array<string>;

// 同类写法
let EagleChinaWu = ['EagleChinaWu1', 'EagleChinaWu2', 'EagleChinaWu3'];

// 同类写法
let EagleChinaWu: String[];

元组类型：固定长度空间，使用场景比如坐标（经纬度）

let EagleChinaWu: [number, number];

枚举类型：规定取值范围

enum WeekDay { Sunday, Monday, Tuesday, Wednesday, Thursday, Friday, Saturday };
let day: WeekDay = WeekDay.Monday;

any类型：当前还不清楚的类型，直接通过编译阶段。（显示any、隐式any）

//  let EagleChinaWu: any = '微信公众号EagleChinaWu';

//  let EagleChinaWu: any;     // 显式any：开发者(自己)已知道风险，自行处理未知类型
let EagleChinaWu;              // 隐式any：开发者(自己)不知道风险，typescript告知有风险

显式类型：声明的时候已添加类型

隐式类型（类型推断）：赋值的时候必须有内容，根据内容推断出类型

对象类型：除了number，string，boolean，symbol，null或undefined之外的类型

let EagleChinaWu: object = { WeChat: 'EagleChinaWu' };

void类型：只有undefined和null选项，不常用于变量，常用于函数

// let EagleChinaWu: void = undefined;  // null
function EagleChinaWu(): void {}

null类型：只有null和undefined选项

let EagleChinaWu: null = null;  // undefined

undefined类型：只有undefined和null选项

let EagleChinaWu: undefined = undefined;  // null

never类型：永远不会结束，用于代码调试

function eagleChinaWu(msg: string): never {
  throw new Error(msg);
}

JSON类型：规定value类型，JSON里面的数量(少或者多都不可以)，除非声明期，预先声明可有/无(在key后面添加?)

let eagleChinaWu: { name: string, total: number, type?: string };
eagleChinaWu = {
  name: 'EagleChinaWu',
  total: 1327,
  type: 'Typescript'
};

类型声明

type EagleChinaWu = {
  name: string,
  type: string,
  total: number,
};

// // 变量声明
// let ecw: EagleChinaWu = {
//   name: 'EagleChinaWu',
//   total: 1327,
//   type: 'Typescript'
// };

// 函数声明
function ecw(arg: EagleChinaWu) {
  console.log(arg.name);
  console.log(arg.type);
  console.log(arg.total);
}
ecw({
  name: 'EagleChinaWu',
  total: 1327,
  type: 'Typescript'
});

类型断言

type EagleChinaWu = {
  name: string,
  total: number,
};

function ecw(arg: EagleChinaWu) {
  console.log(arg.name);
  console.log(arg.total);
}

let weChat = 'EagleChinaWu';

// // 错误实例
// ecw(weChat);

// 正确实例 -- 类型守卫：运行在运行时
function isEagleChinaWu(arg: any): arg is EagleChinaWu {
  if (!arg) {
    return false;
  } else {
    if (typeof arg.name === 'string' && typeof arg.total === 'number') {
      return true;
    } else {
      return false;
    }
  };
}

// 类型断言
if (isEagleChinaWu(weChat)) {
  ecw(weChat);
}

联合类型：取值可以为多种类型中的一种

// let weChat: string | number;

// weChat = 'EagleChinaWu';
// weChat = 1327;

function weChat(el: string | Element) {
  let $el;
  if (typeof el === 'string') {
    $el = document.querySelector(el) as HTMLElement;
  } else {
    $el = el as HTMLElement;
  }
  $el.style.width = '1327px';
};

weChat('#EagleChinaWu');

let $ecw = document.querySelector('#EagleChinaWu');

字面类型： 只代表自己，只取已定义的

let weChat: 'EagleChinaWu' | 1327;

// // 错误示例
// weChat = 'weixin';

// 正确示例
weChat = 'EagleChinaWu'