TypeScript3.7에서 주목해야 할 3가지 새로운 기능

앞말

typescript 3.7이 정식으로 발표된 지 한참이 지났습니다. 그동안 상대방의 프로젝트에서 typescript의 이전 작업을 진행하고 있기 때문에 매번release에 각별히 유의하겠습니다.
3.7에 포함된 새로운 특성은 사실 이전 몇 번의release와 비교하면 비교적 작은 발표 버전이라고 할 수 있지만 그 안에 포함된 몇 가지 특성은 코드의 품질 자체에 현저한 향상을 가져올 수 있다.

Optional Chaining

우선 첫 번째 특성은optional chaining 조작부호에 대한 지원입니다. 번역해 보면 체인 조작부호를 선택할 수 있을 것 같습니다. 물론 저는 이렇게 번역하는 것이 좀 이상하다고 생각합니다. 당분간 영어로 하는 것이 좋습니다.
이 특성은 우선es2019에 포함된 새로운 특성입니다. 특성 자체에 관심이 있으시면 참고하시기 바랍니다.
typescript는 JavaScript의 초집합이기 때문에 이 특성을 미리 실현하는 것도 예상한 일이다. 대략적인 사용 방식은 다음과 같다.

a?.b();

등가:

if(a) a.b();
//  
a && a.b()

만약 다중 플러그인이라면, 예를 들어 b도 하나의 대상이고, c()를 계속 호출하려면 다음과 같이 할 수 있다.

a?.b?.c()

그러나 사실 이렇게 써도 안전하지 않다. 왜냐하면 b()의 b도 빈 값일 수 있기 때문에 직접 호출하면 이상을 던질 수 있기 때문이다.절대적인 안전을 위해 이렇게 쓸 수 있다.

a?.b?.();

주의해야 할 것은 여기에서 반드시 선택할 수 있는 의미에 대해 정확한 이해를 해야 한다는 것이다. 선택할 수 있는 의미는 유형의 성명에서?손질은 빈 값으로 사용할 수 있는 속성을 포함하는 유형을 나타냅니다.언외의 뜻은,?형식 성명 자체에 부합되지 않는 속성은 호출되지 않습니다. 예를 들어 다음과 같습니다.

interface A {}

const a: A = {};

a?.b?.(); // Property 'b' does not exist on type 'A'

A 인터페이스의 선언이 다음으로 변경되지 않는 한

interface A {
  b?: any
}

이 특성은 프로젝트의 실천적 의미가 매우 크다. 우리는if단언문이나 &&조작부호를 더 적게 쓸 수 있지만 같은 효과를 거두었다.

Nullish Coalescing

중국어를 번역하면 쌍물음표 조작부호라고 할 수 있는데 이것은 사실 매우 형상적이다. 왜냐하면 그의 문법은 확실히??이기 때문이다.
이 조작부호의 기능은 간단하게 말하면 빈 값에 기본값을 지정하는 것이다. 아래의 코드와 유사하다.

let a = b || 'foo'

b가 비어 있을 때, ||연산자의 특성으로 인해 a의 값은foo를 부여합니다.하면, 만약, 만약...다음과 같이 연산자를 수정합니다.

let a = b ?? 'foo'

표면적으로 보면 양자는 별 차이가 없는 것 같지만 사실 여기에는 |||공값에 대한 개념이 포함되어 있다. null과undefined를 가리키는 것이 아니라 false, 0 등 일련의 논리적으로false의 값은 모두 공값으로 계산된다. 이것은 분명히 문제가 있다. 예를 들어 다음과 같다.

const b = 0
let a = b || 'foo'
// a   'foo'

이 예시에서 우리는 a가 b가 진정한 의미의 빈 값 (null 또는undefined) 일 때만 기본값을 부여받기를 기대한다. a는 0과 같아야 한다. 실제 운행 결과는 확실하다. 왜냐하면 b=0이기 때문이다. | | 조작부호의 운행 과정에서false로 해석되기 때문이다.나는 실제 프로젝트에서 검증 코드 구성 요소를 작성한 적이 있다. 불행하게도 이 구덩이를 밟았다. 당시 debug 문제를 위해 시간이 오래 걸렸다.
하지만 사용??조작부호는 이 문제가 존재하지 않을 것이다.

Uncalled Function Checks

나는 많은 사람들이 일찍이 유사한 문제를 겪은 적이 있다고 믿는다. 왜냐하면 효과적인 명명 규범이 부족하기 때문에 단언 속성과 단언 방법은 실제 프로젝트에서 혼용될 것이다. 예를 들어

class A {
    isFoo(): boolean {
        return false;
    }
}

function test(a: A) {
    if (a.isFoo) { 
        ...
    } 
}

여기서 만약에 우리의 본뜻이 a.isFoo를 호출하여 단언 값을 얻으려는 것이라면, 우리는 분명히 오류를 범했다. 우리는 직접if(a.isFoo)가 아니라if(a.isFoo)를 사용해야 한다. 왜냐하면 후자는 문법 차원에서 오류가 없지만 논리적 의미에서true로 단언되기 때문이다.그러나 3.7이 발표된 후에 typescript는 우리가 이 문제를 발견하는 데 도움을 주려고 시도할 것이다.
그럼에도 불구하고 저는 단언 방법과 단언 속성에 대해 통일된 명명 규범을 제정할 것을 건의합니다. 예를 들어 isXX는 속성을 대표하고 assertXX는 방법을 대표합니다.

기타

다른 일부 변경은 모두 사용하기 쉬운 변경이다. 예를 들어 다음과 같다.

Flatter Error Reporting: 반복적인 오류 로그 유형을 최대한 한 줄, 더 정확한, 더 간소화된 오류 로그로 압축합니다

파일 레벨의 @ts-nocheck: 이전 버전에서 이 주석은 인라인 레벨만 지원합니다

귀속 유형 성명: 유형 성명에서 귀속 문법을 사용하여 더욱 복잡한 유형, 예를 들어 json 유형을 성명할 수 있다

js 파일에 declaration 지원을 제공하여 js 프로젝트에서 이전하는 이전 비용을 줄인다

다음은 TypeScript3.7에서 주의해야 할 세 가지 새로운 특성에 대한 상세한 내용입니다. TypeScript3.7의 새로운 특성에 대한 더 많은 자료는 저희 다른 관련 글을 참고하세요!