차이점 이해하기! 그리고 ? TypeScript의 연산자

TypeScript에서 Null이 아닌 어설션과 선택적 연결 처리

TypeScript - null이 아닌 어설션과 객체 속성 액세스를 위한 선택적 연결을 사용하는 프런트엔드 컨텍스트

// 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

Null이 아닌 어설션과 선택적 연결을 사용한 안전한 함수 호출

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

Null이 아닌 어설션 및 선택적 연결에 대한 단위 테스트

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

Null이 아닌 어설션 및 선택적 연결에 대해 자주 묻는 질문

1. TypeScript에서 null이 아닌 어설션 연산자(!)는 무엇을 합니까?
2. 그만큼 ! 연산자는 변수가 항상 정의되어 있다고 가정하고 TypeScript 컴파일러에게 null 또는 정의되지 않은 검사를 무시하도록 지시합니다.
3. 선택적 연결(?.)은 null이 아닌 어설션과 어떻게 다릅니까?
4. 선택적 체인 ?. 속성이나 메서드에 안전하게 액세스하고 개체가 null이면 undef를 반환합니다. ! null 검사 없이 강제로 액세스합니다.
5. 선택적 체이닝은 언제 사용해야 합니까?
6. 사용 ?. 런타임 오류를 방지하고 속성에 안전하게 액세스하기 위해 잠재적으로 정의되지 않거나 null 개체로 작업할 때.
7. null이 아닌 어설션으로 인해 런타임 오류가 발생할 수 있나요?
8. 예, 사용 중입니다 ! 값이 null이거나 정의되지 않은 경우 TypeScript의 안전 검사를 우회하므로 런타임 오류가 발생할 수 있습니다.
9. 선택적 체이닝을 사용하면 어떤 이점이 있나요?
10. 선택적 체인 ?. 객체의 정의되지 않은 속성에 액세스하려고 할 때 충돌을 방지하여 코드 안전성을 향상시킵니다.

TypeScript 연산자에 대한 최종 생각

결론적으로, null이 아닌 어설션 연산자(!)는 값이 결코 null이 아니라고 확신할 때 유용합니다. TypeScript가 안전 검사를 무시하도록 강제하지만 예상치 못한 런타임 오류를 방지하려면 주의해서 사용해야 합니다. 이 연산자는 제어권을 제공하지만 위험도 따릅니다.

반면, 선택적 연결 연산자(?.)는 속성 및 메서드에 액세스하는 데 더 안전한 대안입니다. 개체나 속성이 존재하지 않을 때 정의되지 않은 값을 반환하여 충돌을 방지함으로써 복잡한 시나리오에서 TypeScript 코드를 더욱 안정적이고 유지 관리하기 쉽게 만듭니다.