请分别TypeScript中?. , ?? , !: , _ , \** 等符号的含义?

参考回答

TypeScript 中的特殊符号及其含义:

  • ?.可选链操作符(Optional Chaining)
    • 用于访问对象的深层属性时,如果某个中间属性为 nullundefined,不会抛出错误,而是返回 undefined
    • 适用于对象、数组、函数调用等,避免了多层嵌套的 null 检查。
  • ??空值合并操作符(Nullish Coalescing Operator)
    • 用于处理 nullundefined 的值。如果操作数的左边是 nullundefined,则返回右边的值,否则返回左边的值。
  • !:非空断言操作符(Non-null Assertion Operator)
    • 用于告诉 TypeScript 编译器,某个值在使用时不会是 nullundefined,可以强制解除其类型的 nullundefined 检查。
  • _下划线(通常作为占位符)
    • 通常用作变量名或参数名的占位符,或者用于表明某个值是无关紧要的(如不使用的参数)。
  • /**装饰器(Decorator)
    • 在 TypeScript 中,/** 表示注释块的开始,常用于装饰器的定义。装饰器允许我们在类、方法、属性等声明时,附加元数据或修改其行为。

详细讲解与拓展

1. ?.(可选链操作符):

可选链操作符 (?.) 使得访问对象的深层嵌套属性变得更加安全。当访问链中的某个属性为 nullundefined 时,返回 undefined,而不会抛出错误。

例子:

const user = { profile: { name: "John" } };

console.log(user.profile?.name); // 输出: John
console.log(user.address?.city); // 输出: undefined,因为 address 是 undefined

这里,user.profile?.name 会返回 "John",而 user.address?.city 返回 undefined,而不是抛出错误。避免了多个 if 检查。

2. ??(空值合并操作符):

空值合并操作符 (??) 用于当左侧的值是 nullundefined 时,返回右侧的值,否则返回左侧的值。它与逻辑 OR||)不同,|| 会在左侧值为任何假值时(如 0""false)返回右侧的值,而 ?? 只在 nullundefined 时才替代。

例子:

const foo = null;
const bar = "Hello";

console.log(foo ?? bar); // 输出: "Hello"
console.log(0 ?? bar);   // 输出: 0,因为 0 不是 null 或 undefined

这里,foo ?? bar 输出 "Hello",因为 foonull。而 0 ?? bar 返回 0,因为 0 不是 nullundefined

3. !:(非空断言操作符):

非空断言操作符 (!) 告诉 TypeScript 编译器,你确认某个值不会是 nullundefined,因此可以跳过类型检查。在类型推断无法确定时,我们可以用此操作符进行显式的断言。

例子:

let value: string | undefined = "Hello";
console.log(value!.length);  // 使用非空断言,告诉编译器 value 一定不是 undefined

在这个例子中,value! 强制断言 value 不是 undefined,因此我们可以安全地访问它的 length 属性。

4. _(下划线作为占位符):

下划线 (_) 常用于作为不需要使用的参数或变量的占位符,或者表示某些值不重要。在一些 JavaScript 和 TypeScript 代码中,开发者用 _ 来标示某个值暂时不使用,避免编译器报错。

例子:

function handleEvent(_, data: string) {
  console.log(data); // 忽略第一个参数
}

handleEvent("unused", "Hello");

在这个例子中,_ 表示第一个参数是未使用的,通常用于符合约定的场景。

5. /**(装饰器):

在 TypeScript 中,/** 用于装饰器的定义。装饰器是一个函数,能够修改类、方法、属性等的行为。装饰器在类声明、方法声明等地方使用。

例子:

function log(target: any, key: string) {
  console.log(`Calling ${key}`);
}

class MyClass {
  @log
  sayHello() {
    console.log("Hello!");
  }
}

const obj = new MyClass();
obj.sayHello(); // 输出: Calling sayHello \n Hello!

在这个例子中,@log 是一个方法装饰器,它会在方法被调用时打印一条日志。

总结:

  • ?.:可选链操作符,用于安全访问对象的深层属性。
  • ??:空值合并操作符,用于处理 nullundefined 的情况。
  • !::非空断言操作符,告知编译器某值不可能是 nullundefined
  • _:下划线,常用作占位符,表示不使用某个变量。
  • /**:装饰器,通常用于类、方法、属性等的注解或修改行为。

这些符号和操作符使 TypeScript 更加灵活和简洁,帮助开发者在编写类型安全的代码时避免了常见的错误和复杂的检查。

发表评论

后才能评论