526互联

1.变量的声明-原始类型

发布时间 2023-12-12 19:55:38作者: 前端自信逐梦者

变量的声明-基础类型

/*
  前言：如果变量的声明和赋值是同时进行的,TS可以自动对变量进行类型检测
  这里ts自动将variable推断为boolean类型----类型推断机制
*/
let variable = false;
variable = true;

1.number数字类型

/* 
  注意：
    TypeScript里的所有数字都是浮点数，没有整数小数区分
    支持十进制和十六进制，在ECMAScript 2015之后，也支持二进制和八进制字面量
*/
let a: number = 10;
let a1: number = 10.111;
// 十六进制
let hexLiteral: number = 0xf00d;
// 二进制
let binaryLiteral: number = 0b1010;
// 八进制
let octalLiteral: number = 0o744;

2.string字符串类型

let b: string = '10';
// 注意：也可以使用模板字符串
let b1: string = `hello${b}`;

3.boolean布尔类型

let falg: boolean = true;

4.any类型和unknown类型

4.1 any 表示任意类型，不建议使用

// 声明变量如果不指定类型，Ts解析器会自动判断变量的类型是any（隐式）
let anyVar: any;
anyVar = 1;
anyVar = '1';
anyVar = true;

4.2 unknow 表示未知类型的值

let unknownVar: unknown;
unknownVar = 1;
unknownVar = '1';
unknownVar = true;
注意：某个变量的类型是any，他可以赋值给任何类型的变量，但是unknown不行，但是unknown可以赋值给any
let var1: any;
let numberVar:number = 1;
numberVar:number = var1;
let var2: unknown;
var1 = var2;

5. void | undefined | null | never

5.1 void 常见用于函数没有返回值的情况

// 在函数中使用
function warnUser(): void {}
// 当声明一个void类型的变量，则这个变量只能给它赋值为undefined 和 null（不常用）
let voidVar1: void = undefined;
// 将null赋值给void类型的变量在严格模式下会报错
// let voidVar2: void = null;

5.2 undefined 和 null

// undefined和null两者各自有自己的类型分别叫做undefined和null
let undVar: undefined = undefined;
let nullVar: null = null;

5.3 never 表示那些永不存在的值的类型，连undefined都不返回

// 常用于报错, 任何类型的变量都不能赋值给never类型的变量，除非是never自己
function fn22(): never {
  throw new Error('报错');
}
// 推断的返回值类型为never
function fail() {
    return error("报错");
}
// 此时myType1的类型就是never，因为不可能有个变量既是string也是number
type myType1 = string & number; // 交叉类型
// never在联合类型中会被忽略，此时的myType2的类型就是 void 或者 number
type myType2 = void | number | never;
// never常用于兜底逻辑,如下
type myType3 = '唱' | '跳' | 'rap';
function switchFun(value: myType3) {
  switch (value) {
    case '唱':
      break;
    case '跳':
      break;
    case 'rap':
      break;
    default:
      const error: never = value;
      break;
  }
}
// 如果后期需要再给myType3增加一个新的类型,可以让开发人员很快知道这个函数也需要增加对应的逻辑

6.数组

定义数组有两种方式

方式一：可以在元素类型后面接上 []
let arr1: number[] = [1, 2, 3, 4];
方式二：使用数组泛型，Array<元素类型>
let arr2: Array<number> = [1, 2, 3, 4];
扩展一: 定义数组对象,使用interface
interface obj {
  name: string;
  age?: number;
  [propName: string]: any;
}
let arrobj1: obj[] = [
  {
    name: '张三',
  },
];
let arrobj2: Array<obj> = [
  {
    name: '张三',
    age: 19,
  },
];
扩展二：多维数组
let arr3: number[][] = [[1], [2]];
let arr4: Array<Array<number>> = [[1], [2]];
扩展三：任意类型数组
// 使用any
let arr5: any[] = [{}, '1', 1];
// 使用元组
let arr6: [{}, string, number] = [{}, '1', 1];

7.元组 tuple

// 表示一个已知元素数量和类型的数组
// 例如，想定义一个值得类型为string和number的元组
let tuple1: [string, number] = ['1', 2];
let tuple2: [x: string, y?: number] = ['1'];