保险网站建设的目标,工作室注册,科技公司起名,网站群建设成本分析在 TypeScript 中#xff0c;! 和 ? 是两个非常重要且常用的操作符#xff0c;分别用于非空断言和可选链操作。下面简单介绍一下二者。
1. 非空断言操作符 !
1.1 含义
非空断言操作符 !#xff08;Non-null assertion operator#xff09;用来告诉 TypeScript 编译器! 和 ? 是两个非常重要且常用的操作符分别用于非空断言和可选链操作。下面简单介绍一下二者。
1. 非空断言操作符 !
1.1 含义
非空断言操作符 !Non-null assertion operator用来告诉 TypeScript 编译器某个值在当前情况下绝对不是 null 或 undefined即使 TypeScript 的类型系统无法推断这一点。这会绕过 TypeScript 的类型检查直接断言该值不是 null 或 undefined。 let user {name: Alice,age: 25
};// TypeScript 会认为 user.address 可能是 undefined因为它没有在 user 对象中定义// 使用非空断言告诉 TypeScript 我确信 user.address 存在可以强制将其视为有效的对象。
console.log(user.address!.length);
这里user.address! 告诉 TS user.address 一定有值因此可以安全地调用 .length。 如果 user.address 真的为 undefined就会抛出运行时错误。
const singleRef ref();const open () {singleRef.value!.openDialog();
};
这里 ! 告诉 TS尽管 singleRef.value 可能是 null 或 undefined但确定在调用 openDialog 时一定是有值的因此跳过类型检查。
1.2 适用场景
- 当确信某个值不会是 null 或 undefined并且 TypeScript 编译器无法推断出这一点时可以使用 ! 告知 TS 该值运行时肯定存在。
- 在某些情况下可能是外部库的 API 或代码中的某些逻辑导致 TS 无法推断出某个值的类型可以使用 ! 强制该值不是 null 或 undefined。
1.3 注意事项
1过度使用 ! 会让 TypeScript 类型系统失去意义这可能会在运行时导致错误。因为强行告诉 TypeScript 这个值不会是 null 或 undefined但实际上可能是这会导致潜在的运行时错误。
2谨慎使用只有在非常确定值不会为 null 或 undefined 的情况下使用。
2. 可选链操作符 ?
2.1 含义
可选链操作符 ?Optional chaining operator允许我们安全地访问一个对象的属性或方法而不必担心中间某一环节为 null 或 undefined。如果对象的某个部分为 null 或 undefined则表达式会短路并返回 undefined而不会抛出错误。 const user {name: Alice,address: {city: New York}
};// 使用可选链操作符安全访问
console.log(user.address?.city); // New York// 连续链式调用
const length user.address?.street?.length; // undefined而不是抛出错误
console.log(length); // undefined这里user.address?.city 可以安全地访问 address 属性即使 user.address 为 undefined也不会抛出错误而是返回 undefined。
const singleRef ref();const open () {singleRef.value?.openDialog();
};
这里 ? 表示如果 singleRef.value 是 null 或 undefined则不调用 openDialog 方法而是返回 undefined避免抛出错误。
2.2 适用场景
- 当访问对象的深层嵌套属性时 不确定某个中间属性是否存在使用 ? 可以防止因访问 null 或 undefined 的属性而导致的错误。
- 当调用一个方法或访问一个属性时可能该对象本身或某些属性可能为 null 或 undefined可选链操作符帮助我们避免报错。
2.3 注意事项
1可选链操作符可以防止错误但它不会提供默认值如果需要返回一个默认值可以结合 ??空值合并操作符使用。
2如果属性链中的任何一部分为 null 或 undefined则后续的属性访问停止结果为 undefined而不会抛出异常。如果该属性存在继续访问链式属性。这能避免代码中因访问未定义属性而导致的运行时错误尤其是在处理不确定或动态结构的数据时非常有用。
3. 总结 ! 和 ?
3.1 作用不同
- ! 是非空断言告诉 TypeScript 确定某个值不为空可以绕过类型检查但其本身不处理 null 或 undefined 的问题。
- ? 是可选链操作符用于安全地访问对象属性或方法避免抛出错误自动处理 null 或 undefined 的情况。
3.2 使用场景
- ! 适用于非常确定某个值不为 null 或 undefined 的场景是一种强制断言要求开发者对代码有明确的信心保证。
- ? 适用于不确定某个值是否存在想要安全访问嵌套属性或方法的场景。
3.3 性能考虑
- 使用 ! 时TypeScript 会跳过类型检查但在运行时仍然可能抛出异常因此它不提供运行时安全性。
- 使用 ? 时TypeScript 会在运行时检查值是否为 null 或 undefined并返回 undefined避免报错。
这两个操作符在书写 TypeScript 代码时都非常有用可以帮助我们写出更健壮的代码。
