TypeScript 变量

命令

tsc test.ts        # 编译 TS
tsc test.ts -wtach # 自动编译 TS,在有 TS 配置文件的文件夹下，会按照配置文件编译 TS
tsc test.ts -w     # 自动编译 TS 简写
tsc --init         # 生成 TS 配置文件

类型推断

TS 会根据初始化时的赋值自动确定变量类型

let str = 'abc';
str = 10;

类型注解

基础

使用 : 来主动确定变量类型

let v1: string = 'abc'; // 字符串
let v2: number = 10; // 数字
let v3: boolean = true; // 布尔
let nu: null = null; // 空
let un: undefined = undefined; //未定义
let v4: string | null = null; // 多个基层类型
let v5: 1 | 2 | 3 = 3; // 指定具体值

数组

let arr: number[] = [1, 2, 3]; // 数组
let arr1: Array<string> = ['a', 'b', 'c']; // 数组

元组

let t1: [number, string, number?] = [1, '1', 2]; //元组，规定数组内每个位置类型的数组。？代表设置为可选项

函数

let afA: (a: number, b: number) => number = (x: number, y: number): number => {
  return x + y;
};

类型断言

使用 as 主动确定返回类型

let numArr = [1, 2, 3];
const result = numArr.find((item) => item > 2) as number; // 应该做踏空处理，此处只是为了演示
result * 5;

let afC: unknown = 'AAA';
let afD: string = afC as string;
let afF: number = 123; // 将变量断言为常量

let afE: number = 123 as const; // 将变量断言为常量
const afG = [afD, afE] as const; // 将数组断言为只读元组
const afJ = <const>[afD, afE]; // 将数组断言为只读元组的另一种写法
const afH = {
  name: afE,
}; // 将对象断言为内容确定的只读对象

解构中使用 as const

function afFun() {
  let a = 'AAA';
  let b = (x: number, y: number): number => x + y;
  return [a, b];
}
const [afI, afK] = afFun();
const afL = afK as Function;
afL(18, 2);

function bafFunB() {
  let a = 'AAA';
  let b = (x: number, y: number): number => x + y;
  return [a, b];
}
const [afBI, afBK] = bafFunB() as [string, Function];
afBK(12, 2);

function bafFunC() {
  let a = 'AAA';
  let b = (x: number, y: number): number => x + y;
  return [a, b] as [string, Function];
}
const [afCI, afCK] = bafFunC();
afCK(12, 2);

function bafFunD() {
  let a = 'AAA';
  let b = (x: number, y: number): number => x + y;
  return [a, b] as const;
}
const [afDI, afDK] = bafFunD();
afDK(12, 2); 

非空断言

const afA: HTMLDivElement = document.querySelector('.af') as HTMLDivElement;
const afB: HTMLDivElement = document.querySelector('.af')!;

关于 any 和 unknown 类型

any 根据上下文变化，unknown 是独立的类型。

let afA: any = 'doc.alrcly.com'; // 任意值
let afB: any[] = ['a', 1, null]; // 数组内的元素任意

let afC: unknown = 'AAA'; // 定义一个 unknown 类型
let afD: string = afC as string; //afD 是字符串，所以是不能直接接收 unknown 类型的

let afE: string = 'AAA'; // unknown 可以通过断言变成指定类型
let afF: number = afE as unknown as number; // unknown 可以是类型的桥梁

索引签名

在 TypeScript 中，索引签名（Index Signature）用于描述那些属性名和属性值类型不确定的对象。它允许你定义一个对象，该对象可以有任意数量的属性，并且这些属性的名称和类型可以在编译时不确定。

索引签名的语法如下：

{
  [key: KeyType]: ValueType;
}

例如：

type User = {
  name: string;
  age: number;
  show(): string;
  [key: string]: any;
};

关于 type 关键字

• type 可以用来定义基本类型、对象类型、联合类型、交叉类型等。
• type 不支持声明合并，重复定义会报错。
• type 也可以使用 implements 让类实现。
• 实际使用中可以用接口代替 type

//基本类型
type afUserNameA = string; 
//联合类型
type afUserNameB = string | number; 
//对象类型
type User = { 
  name: string; 
  age: number;
  show(): string;
  [key: string]: any;
};
// 交叉类型
type Person = {
  name: string;
  age: number;
};
type Employee = {
  employeeId: number;
  department: string;
};
type EmployeeDetails = Person & Employee;
const employee: EmployeeDetails = {
  name: "Alice",
  age: 30,
  employeeId: 12345, 
  department: "Engineering"
};