在 TypeScript 开发过程中，有时编译器无法获取具体的类型信息，这时就需要使用类型断言（Type Assertion）来告诉编译器具体的类型。本文将详细介绍 TypeScript 中常用的类型断言语法，包括 as 关键字、非空断言 !、可选链 ?.、空值合并操作符 ?? 等内容。

一、基本介绍

1，什么是类型断言

2，常用的类型断言方式

二、类型断言 as

1，基本语法

// 类型断言 as（案例1）
const myEl = document.getElementById("my-img");

// 报错：Property 'src' does not exist on type 'HTMLElement'
myEl.src = "图片地址";

// 使用 as 关键字断言为 HTMLImageElement
const myEl = document.getElementById("my-img") as HTMLImageElement;

// 不会报错，因为明确断定 myEl 是 HTMLImageElement
myEl.src = "图片地址";

2，类型断言案例：类继承

// 类型断言 as（案例2）
class Person {}

class Student extends Person {
  studying() {
    console.log("正在学习");
  }
}

function sayHello(p: Person) {
  // 报错：Property 'studying' does not exist on type 'Person'
  p.studying();
}

const stu = new Student();
sayHello(stu);

function sayHello(p: Person) {
  // 使用类型断言 as，将 p 断言为 Student
  (p as Student).studying();  // 可以调用 studying 方法
}

const stu = new Student();
sayHello(stu);  // 输出: 正在学习

3，类型断言的限制

// 不合理的类型强制转换会报错
const message = "Hello World";

// 错误：Conversion of type 'string' to type 'number' may be a mistake.
const num: number = message as number;

const message = "Hello World";

// 报错：Type 'string' is not assignable to type 'number'
// const num1: number = message;

// 方式一：先断言为 unknown，再断言为 number
const num2: number = (message as unknown) as number;

// 方式二：先断言为 any，再断言为 number
const num3: number = (message as any) as number;

console.log(num2, num3);  // 输出: Hello World Hello World

三、非空类型断言 !

1，基本语法

2，使用场景

// 参数 message 是可选的，值可能为 undefined 或 string
function printMessageLength(message?: string) {
  // 编译报错：Object is possibly 'undefined'
  console.log(message.length);
}

printMessageLength("coder");

function printMessageLength(message?: string) {
  // 方式一：使用 if 进行非空判断
  if (message) {
    console.log(message.length);
  }
}

printMessageLength("coder");  // 输出: 5

function printMessageLength(message?: string) {
  // 方式二：使用非空类型断言 !
  // 这里断言 message 一定有值，跳过 TypeScript 编译阶段的检测
  console.log(message!.length);
}

printMessageLength("coder");  // 输出: 5

四、可选链操作符 ?.

1，基本概念

2，使用示例

// 为对象类型起一个 Person 别名
type Person = {
  name: string;
  friend?: {
    name: string;
    age?: number;
    girlFriend?: {
      name: string;
    };
  };
};

// 定义一个对象，指定类型为 Person 类型
const info: Person = {
  name: "hangge",
  friend: {
    name: "kobe",
    girlFriend: {
      name: "lily"
    }
  }
};

// 获取 info 对象的属性，使用可选链 ?.
console.log(info.name);  // 输出: hangge

// 使用非空断言 !：当 friend 为空时，运行程序会报错
// console.log(info.friend!.name);

// 使用可选链 ?.：当 friend 不为空时，才取 age
console.log(info.friend?.age);  // 输出: undefined

// 多层可选链：当 friend、girlFriend 都不为空时，才取 name
console.log(info.friend?.girlFriend?.name);  // 输出: lily

五、!! 双重否定操作符

1，基本用法

const message = "Hello World";

// 方式一：以前转换 boolean 类型的方式
const flag1 = Boolean(message);
console.log(flag1);  // 输出: true

// 方式二：使用 !! 操作符转成 boolean 类型
const flag2 = !!message;
console.log(flag2);  // 输出: true

// !! 操作符转换示例
console.log(!!0);          // false
console.log(!!"");        // false
console.log(!!null);      // false
console.log(!!undefined); // false
console.log(!!1);         // true
console.log(!!"hello");   // true
console.log(!!{});        // true
console.log(!![]);        // true

六、?? 空值合并操作符

1，基本概念

2，与 || 操作符的区别

let message: string | null = 'Hello World';
 
// 方式一：使用三元运算符判空，赋默认值
// 会判断 null、undefined、''、false 为假
const content1 = message ? message : "你好啊，小刘1";
 
// 方式二：使用 || 操作符判空，赋默认值
// 会判断 null、undefined、''、false 为假
const content2 = message || "你好啊，小刘2";
 
// 方式三：使用 ?? 操作符判空，赋默认值
// 只判断 null 或 undefined 为假
const content3 = message ?? "你好啊，小刘3";
 
console.log(content1, content2, content3);
// 输出: Hello World Hello World Hello World

// 当值为空字符串时
let str: string = "";

console.log(str || "默认值");   // 输出: 默认值（空字符串被视为假值）
console.log(str ?? "默认值");  // 输出: ''（空字符串不是 null 或 undefined）

// 当值为 0 时
let num: number = 0;

console.log(num || 100);   // 输出: 100（0 被视为假值）
console.log(num ?? 100);   // 输出: 0（0 不是 null 或 undefined）