Typescript: Bang 연산자는 유해한 것으로 간주됨

최근 프런트엔드에서 몇 가지 런타임 오류가 발생했습니다. Cannot read property x of null 또는 Cannot read property .length of undefined 등과 같은 오류가 발생합니다. 모든 Javascript 개발자가 이전에 접했던 것입니다.



노 부에노!

그러나 우리의 코드베이스는 Typescript로 작성된 Next.js 애플리케이션입니다. Typescript 컴파일러가 컴파일 시간 동안 이러한 오류를 포착하지 못한 이유는 무엇입니까?

조금 더 깊이 파고들어보니 .eslintrc에 Typescript에서 bang(!) operator을 사용하는 것과 관련된 모든 경고를 끄는 규칙이 있음을 발견했습니다.

// .eslintrc
rules: {
// ...
'@typescript-eslint/no-non-null-assertion': 'off'
}

Typescript docs에서는 이것을 null이 아닌 어설션 연산자로 정의합니다. 문서 상태

A new ! post-fix expression operator may be used to assert that its operand is non-null and non-undefined in contexts where the type checker is unable to conclude that fact. Specifically, the operation x! produces a value of the type of x with null and undefined excluded. Similar to type assertions of the forms x and x as T, the ! non-null assertion operator is simply removed in the emitted JavaScript code.

어렵게 들립니다. 그러나 그것이 하는 모든 것은 기본적으로 컴파일러에게 "이 값은 null이거나 정의되지 않을 수 없습니다"라고 말하는 것입니다.

Typescript의 가장 큰 장점 중 하나는 모든 유형 오류(duh)에 대해 코드를 즉시 확인하므로 정의되지 않은 개체 또는 변수 값으로 작업할 때마다 경고를 표시한다는 것입니다.



일반적으로 변수에 밑줄을 긋고 약간의 경고를 표시합니다. 게으른 개발자는 계속해서 Typescript에서 자신이 무엇을 하고 있는지 알고 있다고 소리치고 ! 그것에. 문제가 해결되었나요?

이로 인해 컴파일러가 종료될 수 있지만 위에서 본 원하지 않는 런타임 오류가 발생할 수 있습니다. 로컬 시스템에서 시간의 99% 또는 시간의 100%로 정의될 수 있습니다. 특히 GraphQL 쿼리 및 변형과 같은 비동기 코드로 작업할 때 개체와 값이 종종 정의되지 않을 수 있다는 점을 아는 것이 중요합니다. 데이터가 아직 로드 중이거나 초기화될 때까지 시간이 걸릴 수 있습니다.

문제는 코드 리뷰에서 이러한 느낌표를 놓치기 어렵다는 것입니다. 누군가가 그것들을 사용하기 시작했을 수도 있고, 그들은 결국 코드베이스에 남게 될 것입니다. 다음 페이지는 부분적으로 복사하여 붙여 넣거나 새로운 개발자가 이것을 보고 패턴 복사를 시작합니다. Typescript가 만족스러워서 갑자기 코드베이스 전체에 느낌표가 나타납니다.

더 나은 대안은 got introduced in Typescript 3.7 옵셔널 체이닝 ? 연산자를 사용하는 것입니다.

React 구성 요소의 경우 논리 AND&& 연산자를 사용할 수 있습니다.

// wrong
<VideoPresentation videoPresentation={videoPresentation!} />
// better
{videoPresentation && <VideoPresentation videoPresentation={videoPresentation} />}

eslint rule을 '@typescript-eslint/no-non-null-assertion': 'error'로 올바르게 설정하여 이제 해당 연산자의 사용을 허용하지 않습니다. 제 생각에는 더 큰 Javascript 프로젝트에 많은 온전함과 안전성을 제공하는 Typescript의 목적을 무효화합니다.

!에 대한 유효한 사용 사례가 있다고 생각하십니까, 아니면 동의하십니까? Typescript의 연산자. 에서 알려주세요.

사진: Cindy Tang on Unsplash .

이 게시물은 원래 My personal blog에 게시되었습니다.