프로그래밍프론트엔드 개발자

strictNullChecks 매개변수는 TypeScript에서 null 및 undefined가 어떻게 작동하는지 궁금합니다. 이를 활성화하면 일상 프로그래밍에 어떤 영향을 미칩니까?

Hintsage AI 어시스턴트로 면접 통과

답변

strictNullChecks 매개변수는 TypeScript가 nullundefined를 별도의 유형으로 간주할지 여부를 결정합니다. 이 매개변수가 비활성화되어 있으면 (버전 2.0 이전의 기본값) 모든 유형의 변수가 컴파일 오류 없이 nullundefined 값을 가질 수 있습니다. strictNullChecks가 활성화되면 (strictNullChecks: true), 이러한 값은 명시적으로 지정된 경우를 제외하고 다른 유형과 호환되지 않는 것으로 간주됩니다.

예:

// strictNullChecks: false let name: string = null; // OK // strictNullChecks: true let title: string = null; // 오류! let title2: string | null = null; // OK, 명시적 유형 결합

엄격한 검사를 활성화하면 함수/메서드가 null 또는 undefined 값을 받을 가능성을 고려하지 않을 때 초기 개발 단계에서 오류를 피하는 데 도움이 됩니다.

트릭 질문

strictNullChecks가 활성화될 때 number 유형의 변수에 undefined를 할당할 수 있습니까?

답변: 아닙니다. strictNullChecks가 활성화되면 number 유형의 변수에 undefined를 할당할 수 없습니다. number | undefined로 명시적으로 선언한 경우만 가능합니다.

예:

let count: number = undefined; // TS 오류, strictNullChecks: true 에서 let count2: number | undefined = undefined; // OK

주제의 미세한 차이점을 알지 못한 실제 오류 사례.


이야기

한 대규모 node.js 프로젝트에서 개발자들은 "마이그레이션을 쉽게 하기 위해" null/undefined의 엄격한 검사를 비활성화했습니다. 결과적으로 런칭 1년 후, API의 어떤 기능이 숫자 값 대신 undefined를 반환했습니다. 클라이언트 측 코드는 이에 대비하지 않았기 때문에 사용자 측 애플리케이션이 간단한 계산 response.count + 1에서 치명적으로 중단되었습니다.


이야기

이커머스 프로젝트에서 상품 컬렉션이 서버에서 null로 왔고, []가 아닙니다. UI 구성 요소가 이러한 상품들에 대해 map을 수행하여 각 항목의 속성을 호출할 때 렌더링 오류가 발생했습니다. strictNullChecks를 활성화하자 거의 40개의 유사한 오류가 즉시 드러났습니다.


이야기

대규모 라이브러리에서 일부 Props component API에 대한 "허용된" 값이 시간이 지남에 따라 string | null | undefined로 변경되었습니다. 이로 인해 많은 처리되지 않은 상황이 발생했습니다. strictNullChecks를 활성화한 후 특정 구성에서 UI 크래시와 관련된 미세한 버그를 잡을 수 있었습니다.