了解之间的区别！和 ？ TypeScript 中的运算符

TypeScript 中处理非空断言与可选链接

TypeScript - 使用非空断言和可选链接进行对象属性访问的前端上下文

// Example 1: Using non-null assertion operator (!)
// The assumption here is that obj is definitely not null or undefined
const obj: { data?: string } | null = { data: 'Hello' };
const data: string = obj!.data;  // Non-null assertion, ignores potential null/undefined
console.log(data);  // Output: 'Hello'

// Example 2: Optional chaining (?.) for safer access
// This approach checks if obj exists before accessing data property
const obj2: { data?: string } | null = null;
const data2: string | undefined = obj2?.data;  // Safely returns undefined if obj2 is null
console.log(data2);  // Output: undefined

// Note: The first approach forces the compiler to assume obj is not null
// The second approach ensures no runtime error if obj is null or undefined

使用非空断言的安全函数调用与可选链接

TypeScript - 涉及具有错误处理和安全访问的对象函数调用的前端上下文

// Example 1: Using non-null assertion operator for function invocation
// Assumes obj is not null or undefined before invoking the method
const objFunc: { doSomething?: () => void } | null = { doSomething: () => console.log('Action') };
objFunc!.doSomething();  // Forces execution, assuming objFunc is valid

// Example 2: Optional chaining operator for function invocation
// This approach safely checks if objFunc exists before calling the method
const objFunc2: { doSomething?: () => void } | null = null;
objFunc2?.doSomething();  // No error thrown, simply does nothing if objFunc2 is null

// Conclusion: Non-null assertion is riskier but direct, while optional chaining is safer but may return undefined

非空断言和可选链接的单元测试

TypeScript - 在不同环境中对两种方法进行单元测试

// Unit Test 1: Testing non-null assertion operator (!)
import { expect } from 'chai';
it('should return data with non-null assertion', () => {
  const obj = { data: 'Test' };
  const result = obj!.data;
  expect(result).to.equal('Test');
});

// Unit Test 2: Testing optional chaining operator (?.)
it('should return undefined if obj is null using optional chaining', () => {
  const obj = null;
  const result = obj?.data;
  expect(result).to.be.undefined;
});

// Ensures both methods behave as expected in null/undefined scenarios

有关非空断言和可选链的常见问题

1. 非空断言运算符 (!) 在 TypeScript 中起什么作用？
2. 这 ! 运算符告诉 TypeScript 编译器忽略 null 或未定义的检查，假设变量始终已定义。
3. 可选链接 (?.) 与非空断言有何不同？
4. 可选链接 ?. 安全地访问属性或方法，如果对象为 null，则返回 undefined，而 ! 强制访问而不进行空检查。
5. 我什么时候应该使用可选链？
6. 使用 ?. 当使用潜在的未定义或空对象时，以防止运行时错误并安全地访问属性。
7. 非空断言会导致运行时错误吗？
8. 是的，使用 ! 如果值为 null 或未定义，可能会导致运行时错误，因为它绕过了 TypeScript 的安全检查。
9. 使用可选链有什么好处？
10. 可选链接 ?. 通过避免尝试访问对象中未定义的属性时发生崩溃来提高代码安全性。

关于 TypeScript 运算符的最终想法

总之， 非空断言 当您确信某个值永远不为空时，运算符 (!) 非常有用。它强制 TypeScript 忽略安全检查，但应谨慎使用以避免意外的运行时错误。该操作员为您提供控制权，但也带来风险。

另一方面， 可选链接 运算符 (?.) 是访问属性和方法的更安全的替代方案。当对象或属性不存在时，它通过返回 undefined 来帮助防止崩溃，从而使您的 TypeScript 代码在复杂场景中更加可靠和可维护。