타입스크립트 4.4 버전에서는 무엇이 달라졌을까? 🤔
해당 글은 타입스크립트 공식 사이트의 What's New를 참고로 작성된 글입니다.
Alias된 조건문과 판별문의 제어 흐름 분석
다음은 타입스크립트 공식 사이트에 올라온 글에 있는 예시 코드이다.
타입체크문( typeof )을 사용해 타입이 string이라면 콘솔창에 arg를 대문자로 바꿔서 출력하도록 작성되어있다.
타입체크를 통해 arg가 string 타입일 경우 toUpperCase( )와 같은 메소드를 에러없이 사용할 수 있게 된다. 그리하여 대문자로 변경된 arg 값이 출력이 된다.
위와 달리 아래의 코드는 타입 체크를 argIsString이라는 변수에 할당해서 if 문에 넣게되면 위와는 달리 에러가 나오게 된다.
변수 argIsString에 타입 가드 값( typeof arg === "string" )을 할당했지만 타입스크립트는 그 정보를 인식하지 못한다. 그리하여 이 타입 가드 값이 할당된 변수를 다시 재사용하고 싶어도 하지 못하는 상황이 된다. 그리하여 사용자는 타입 가드문을 반복해서 작성하거나 타입 추론을 사용해야 했다.
하지만 4.4버전부터는 위와 같은 코드가 에러없이 잘 동작한다. typeof를 이용한 타입체크뿐만 아니라 discriminated union 타입도 위와 같이 변수에 할당하여 사용 가능하다.
위와 같이 LightsOn 함수 안에 있는 isLight라는 변수에 discriminated union 타입의 값을 할당하여도 if문에 에러가 나지 않고 정상적으로 동작하게 된다.
위의 코드는 Typescript 공식 페이지에 나와있는 예시코드이다. doSomeChecks라는 함수는 inputA, inputB 에 값이 존재하는지 체크한다. 타입스크립트는 mustDoWork라는 변수의 값이 true이면 inputA와 inputB에 값이 존재한다는 것을 인지할 수 있다. 이는 inputA! 처럼 '!'느낌표를 붙여서 inputA가 null이 아니라는 것을 타입스크립트에게 확신시켜줄 필요가 없다는 의미이다. 즉 non-null assertion이 필요가 없다는 뜻이다.
Index에 Symbol과 Template string pattern 사용
타입스크립트에서 우리는 []이 대괄호안에 문자를 넣어서 object의 값을 할당해 줄 수 있다.
아래 코드와 같이 key 는 string 타입으로 , 값은 boolean 타입으로 지정된 인터페이스가 있다. 이 인터페이스로 정의된 myDict라는 변수에 boolean 타입이 아닌 값을 할당할 경우 에러가 발생한다.
타입스크립트에서는 인덱스 서명(index signature)시 index로 string과 number 타입만 사용 가능하도록 한정되어 있었다. 그리고 symbol 타입의 key는 사용할 수 없었다.
하지만 4.4 버전에서는 이 제한이 없어졌다. 아래의 코드와 같이 index signature (인덱스 서명)에 symbol 타입을 사용하는 것이 가능해졌다.
또한 template string pattern도 인덱스 서명으로 사용 가능해졌다.
위와 같이 a 변수는 width와 height라는 number타입의 변수를 가진 Options라는 인터페이스를 가진다. 이때 a 변수에 "data-blah" : true라는 값을 넣을 경우 에러가 발생한다. Options 인터페이스에 'data-blah'는 존재하지 않기 때문이다.
이와 달리 변수 b 에는 `data-`로 시작하는 키를 가진 property가 존재하는 인터페이스가 정의되어져있다. 그리하여
"data-blah":true를 할당해도 에러가 발생하지 않는다. 그리고 `data-`로 시작하지 않는 "unknow-property"는 에러가 발생하는 것을 볼 수 있다.
4.4에서는 이처럼 template string pattern을 index signature로 사용할수 있게 된 것이다.
useUnKnownInCatchVariables 설정
4.4버전에서 useUnKnownInCatchVariables라는 새로운 설정이 도입되었다. 4.4버전 이전에는 catch 마다 unknown 타입을 설정해주는 귀찮은 작업을 해야했다. 하지만 이제 4.4의 useUnKnownInCatchVariables 설정 ( useUnKnownInCatchVariables = true )을 이용하면 catch의 기본 타입인 any를 unknown 타입으로 변경해준다.
위 코드의 catch 에서 인자 err의 타입은 unknown이다. 따라서 err.message에 에러가 발생한다. 그리하여 하단의 if문과 같이 err를 unknown이 아닌 Error로 한정지어주면 err.message에 에러가 발생하지 않는다. 이 기능은 strict 모드가 true일 경우에 사용 가능하다.
만약 catch문에서 unknown 타입을 사용하길 원하지 않는 경우 err: any라고 인자의 타입을 지정해주면 any 타입으로 오류없이 사용할 수 있다.
exactOptionalPropertyTypes 설정
타입스크립트에서 optional property의 타입엔 기본적으로 ' | undefined'가 포함되었다. 위의 코드의 경우 age는 optional property로 타입이 number로 지정되어져 있다. 커서를 올려보면
위와 같이 ' number | undefined '로 타입이 지정되어 있는것을 알 수 있다.
이제 exactOptionalPropertyTypes라는 설정을 true로 지정하면 optional property의 타입에 ' | undefined' 가 자동으로 추가되지 않는다. 그리하여 하단의 코드와 같은 경우에 age에 undefined 할당을 할 경우 에러가 발생하게 된다.
class에서의 static block 사용
class 안에서의 static block의 사용을 지원한다.
tsc --help 옵션 업데이트
tsc --help 가 업데이트 되었다. tsc --help 명령어의 옵션이 재정비되었다고 한다. 이 옵션에 대해서는 공식 사이트 문서를 참조하길 바란다.
Inlay HInts
parameter 이름이나 return 타입 같은 유용한 정보를 보여주는 inlay hints를 보여준다. 최신 버전 에디터를 사용해 inlay hints를 볼 수 있다.
자동 import에서 실제 경로가 보여진다. 예를 들어 moment라는 패키지의 경로가 node_modules/moment라는 경로로 보여지는 경우 같은 일이 해결된 것이다. 이제는 사용하려는 모듈의 실제 경로가 보여지게 된다.
더 자세한 업데이트 내용을 알고 싶다면 아래 링크의 타입스크립트 공식 사이트 문서를 읽어보길 바랍니다😉
https://www.typescriptlang.org/docs/handbook/release-notes/typescript-4-4.html
'프론트엔드 > TypeScript' 카테고리의 다른 글
| 타입스크립트 타입의 종류 - 원시 타입 ( Primitive Types ) (0) | 2021.10.06 |
|---|---|
| 타입스크립트란? (0) | 2021.10.05 |
