TypeScript
4개의 글
4개의 글
지난 8월 24일 TypeScript 5.2가 출시했습니다. 주요 변경사항은 using 키워드 지원, 데코레이터에 메타데이터 추가, 배열 복사 메서드 추가 등이 있습니다. using 키워드 추가 지난 게시글에서 소개한 자원 관리를 위한 키워드 using 이 추가되었습니다. let, const 대신 사용하는 변수 선언 키워드로, Symbol.dispose, Symbol.asyncDispose 로 된 속성 값이 있는 객체를 대상으로 사용할 수 있습니다. tc39에 제안된 내용이며, 다음 ECMAScript에서 볼 수도 있는 Stage 3 후보 상태입니다. 물론 후보 상태이므로, tsconfig.json 에서 compilerOptions.lib 배열에 esnext 혹은 esnext.disposable 을 추가해야지만 사용가능합니다. 데코레이터에 메타데이터 추가 지난 5.0에서 tc39 제안 내용에 맞춰 데코레이터가 새롭게 만들어 졌습니다. 이에 대한 후속 제안으로 메타데이터가 추가되었습니다. 데코레이터의 두번째 파라미터인 context 에서 metadata 라는 빈 객체가 할당되어 있으며, 이는 자유롭게 속성에 할당이 가능하고, 외부에서의 접근은 Symbol.metadata 를 통해 하실 수 있습니다. 데코레이터 메타데이터 예제 익명, 이름을 가진 튜플 혼합 지원
2023-08-28#개발#JavaScript#TypeScript
타입스크립트는 현재 5.1 입니다. 그리고 준비중인 다음 버전인 5.2에서 using 이라는 새로운 키워드가 지원될 예정입니다. 이 키워드는 tc39에 제안된 내용이고, 현재 Stage 3 단계로 다음 ECMAScript에서도 볼 수 있는 후보 상태입니다. 새로운 키워드는 기존 let, const 변수 선언 키워드에 기능이 추가된 형태이며, 이 키워드를 이용해 선언한 변수는 블록 스코프를 벗어날 때 자동으로 자원을 해제해 주는 새로운 기능입니다. 일반적인 자원 해제 코드 패턴 위 예제처럼 스트림, 버퍼 등 다양한 자원의 수명관리와 관련된 소프트웨어 개발 패턴이 존재하고, 다음과 같이 각 상황에 맞게 자원을 해제하는 메서드 호출이 필요합니다. ECMAScript의 Iterator: iterator.return() WHATWG의 Stream Reader: reader.releaseLock() NodeJS의 파일 핸들러: handle.close() Emscripten C++의 객체 핸들: Module.\_free(ptr), obj.delete(), Module.destroy(obj) 또한 throw 를 대응하기 위해 try { ... } finally { ...release }로 오류를 검사하는 것이 일반적입니다. 이는 코드가 길어지고, 반복적인 패턴이고, 개발자가 자원을 해제하지 못할 경우 메모리 누수로도 이어지는 좋지 않은 패턴이기도 합니다. 여러개의 자원을 다루는 코드
2023-06-30#개발#JavaScript#TypeScript#ECMAScript
지난 5월 30일 TypeScript 5.1이 출시했습니다. 주요 변경사항은 Node.js 최소 지원 버전, JSX 타입 작동 변경, Getter, Setter 타입 불일치 허용, undefined 를 함수 리턴 타입으로 허용 등이 있습니다. 최소 지원 버전 변경 ES2020 스펙으로 업데이트됨에 따라, Node.js의 최소 지원 버전 또한 14.17로 올라가게 되었습니다. 구 버전에서 TypeScript 5.1을 사용할 시 npm, yarn에서는 엔진 버전 경고, tsserver에서는 nullish 키워드(??) 미지원 오류 등이 발생하게 됩니다. npm 설치시 미지원 엔진 경고 함수 리턴 타입에 undefined 지원 사실 이 말만 봤을 때는 무슨 말이냐 하겠지만, 사실 지금까지의 TypeScript의 함수는 undefined만 리턴하게 될 때 void 혹은 any 라는 타입만 가능했습니다. 이제 함수의 리턴타입이 undefined 로 지정이 가능합니다. 함수 리턴타입 undefined 지원 Getter와 Setter의 타입이 달라도 됩니다 Getter와 Setter는 속성 접근에 매우 유용한 기능중 하나입니다. 5.1 이전 까지의 Getter와 Setter는 같은 타입을 강제로 했으나, 이제부터는 다른 타입이 허용됩니다. 이는 지금까지 문제되었던 DOM의 style 이라는 속성의 쓰기 타입을 해결하게 되었습니다.
2023-06-02#개발#JavaScript#TypeScript
TypeScript가 5.0으로 큰 변화를 맞이 했습니다. 이번 주요 변경사항은 Decorator, 파라미터 const 타입, Enum을 Union 타입과 호환 등 여러가지 큰 변화를 맞이 했는데 주요 변경점을 살펴보겠습니다. Decorator Nest.js를 사용하신 분이라면 아주 익숙한 문법이 보일겁니다. 바로 Decorator 기능인데요, 해당 기능은 지금까지 실험적(experimental) 기능이었습니다. 이번 5.0으로 올라오면서 실험적 기능이 해제되었고, 구현 방법 자체가 변경되었습니다. 이에 따라 기존 실험적 기능으로 구현된 Decorator는 호환이 불가능해졌습니다. 다행히도 기존 실험적 기능은 여전히 사용가능하도록 조치를 취해줬다고합니다. (Nest.js 팀은 현재 모든 Decorator를 재작성중이며, 당분간은 실험적 기능 옵션 —experimentalDecorators 를 켜서 사용할 것을 권고한 상태입니다.) 이번 변경된 구현법은 TC39에서 제안된 내용으로 변경되었고, 해당 제안은 스테이지 3에 해당하고 있어 추가적으로 큰 변경 사항 없이 적용될 가능성이 큽니다. 이 때문에 Microsoft는 TypeScript 5.0으로 올리면서 해당 내용을 공식 기능으로 변경된것으로 보입니다. 공식 지원으로 확인된 Decorator의 사용처는 class method getter setter field accessor 으로 총 6개입니다. 이 외의 실험적 기능에서 지원했던 사용처인 parameter 에 대한 지원이 삭제되었으며, 실험적 기능으로 지원되던 Decorator와는 완전히 다른 호환성을 지니게됩니다. 새로운 Decorator 기능을 보여주는 예제 Decorator 타입 지원 위에서 설명했다 싶이 실험적 기능이었던 Decorator 기능은 타입이 제대로 지원되지 않았습니다. 이로 인해 Decorator를 작성할 때는 항상 any 혹은 unknown 으로 만들어진 구현체를 사용해야 했고, TypeScript가 아닌 JavaScript에서 사용하던 방식처럼 직접 변수에 대해 validation을 맞춰서 사용해야하는 불편함이 있었습니다. 이번 5.0에서는 관련 타입 추가, decorator 사용시 타입 확인이 추가되어 보다 안전한 타입 사용이 가능해졌습니다. 새로운 Decorator를 타입까지 써서 확인하는 예제 const 파라미터
2023-05-08#개발#JavaScript#TypeScript