TypeScript v5로 타입서커스 - 2023 프론트엔드 트렌드 따라잡기

5월 31일 구글 스타트업 캠퍼스에서 열린 2023 프론트엔드 트렌드 따라잡기에서 TypeScript 5.0을 주제로 발표했던 자료를 공유드립니다.

Transcript

1. TypeScript 5.0 GDG Korea WebTech Organizer, Opensurvey Frontend Engineer, 강종연
2. Contents - What is TypeScript? - TypeScript 5.0 - Introduce - const Type Parameters (with as const) - Supporting Multiple Configuration (with Monorepo) - All enums Are Union enums (with more comfortable?), Enum Overhaul - --moduleResolution bundler - Support for export type * (with type all export Solutions) - Speed, Memory, and Package Size Optimizations (with Tools - How Optimizations) - Breaking Changes - Deprecations and Default Changes
3. What is TypeScript? (feat. Daniel Rosenwasser) - It’s a language that builds on JavaScript by adding syntax for types which can be used for type-checking. ( === Javascript + Type → TypeScript) - Type-checking can help catch lots of common mistakes, from typos to logic errors. Bringing types to JavaScript also allows us to build great tooling, since types can power features like code completions, go-to-definition, and refactorings in your favorite editor.
5. Introduce (feat. Daniel Rosenwasser) - “This release brings many new features, while aiming to make TypeScript smaller, simpler, and faster” - “We’ve implemented the new decorators standard, added functionality to better support ESM projects in Node and bundlers, provided new ways for library authors to control generic inference, expanded our JSDoc functionality, simplified configuration, and made many other improvements.”
6. const Type Parameters (with as const)
7. const Type Parameters (with as const) - 기존에는 as const라는 선언을 통해 구체적인 타입을 지원 - [“Alice”, “Bob”, “Eve”] - string[] - [“Alice”, “Bob”, “Eve”] as const - readonly [“Alice”, “Bob”, “Eve”] - 구체적인 타입을 원할 경우어떠한 함수에 props를 넣을 때도 as const를 선언해주어야했음. - const testFunc = (props: string[]) => void; - testFunc([“Alice”, “Bob”, “Eve”]) vs testFunc([“Alice”, “Bob”, “Eve”] as const) - 다른 값 - 5.0에서는 const modifier 도입 (as const로 수정할 수 없는 값은 const modifier도 불가) - const testFunc = <const T extends readonly string[]>(props: T) => void; - testFunc([“Alice”, “Bob”, “Eve”]) vs testFunc([“Alice”, “Bob”, “Eve”] as const) - 같은 값
8. Supporting Multiple Configuration (with Monorepo)
9. Supporting Multiple Configuration (with Monorepo) - TypeScript 2.1부터 extends를 지원 - 해당 경로의 tsconfig.json에서 compilerOptions를 복사해주는 기능 - 기존에는 단일 경로만 지원 → 5.0에서는 array를 지원 tsconfig.json @tsconfig/ strictest/ tsconfig.json tsconfig.base.json extends… extends…
10. Supporting Multiple Configuration (with Monorepo) - TypeScript 2.1부터 extends를 지원 - 해당 경로의 tsconfig.json에서 compilerOptions를 복사해주는 기능 - 기존에는 단일 경로만 지원 → 5.0에서는 array를 지원
11. Enums - All enums Are Union enums - Enum Overhaul
12. All enums Are Union enums - 가장 초기 enum: 동일한 타입을 가진 숫자 상수 집합 - 그냥 number집합 그 이상 그 이하도 아님 - 2.0 이후: enum literal types 도입 - 각 literal member에 고유한 Type 부여 + enum Type자체를 각 member Type의 합집합으로 만듦 - enum Type의 하위 집합만 참조하여 타입 범위 좁힘. - but, 각 Type들이 member의 실제 값과 일부 연관되어 있음. 해당 값을 계산 불가 (random -> number X, 7 O) - 해당 값을 정확히 계산할 수 없음. (7인지 8인지 9인지 등등 모르기에)
13. All enums Are Union enums - 5.0 이후: 계산된 각 member 값에 대해서 고유한 Type을 생성하여 합집합으로 만듬 - 기존 vs 5.0 이후: Type 먼저 생성 vs 계산 후 Type 생성 - 이제는 member를 타입으로 참조 가능
14. Enum Overhaul - enum이 기존에 가지고 있었던 문제 중 일부를 5.0에서 해결 - Github PR Link - enum Type에 out-of-domain literal 할당 시 이제는 Error를 띄움 (기존에는 X) - 숫자와 enum을 참조하고 있는 간접 문자열이 섞여져 있는 경우 각 member는 각 Type을 지킴 (기존에는 모든 member의 Type이 number로 잡힘)
15. --moduleResolution bundler
16. --moduleResolution bundler
17. --moduleResolution bundler - TypeScript 4.7에서 --module & --moduleResolution 설정에 node16, nodenext 옵션 추가 - 목적: Node.js에서 ECMAScript module에 대한 정확한 검색 방식을 더 잘 모델링하기 위함. - but, 실제로 사용하는 다른 tool들과 부조화가 일어나는 등 제한이 존재 - import … from “./utils”; vs import … from “./utils.mjs”; - Node.js의 ECMAScript module에서는 import 시 파일 확장명이 포함되어야함. - 하지만 bundler에는 이런 제한 사항이 없기에 해당 기능이 번거로웠음. - 5.0 이후: bundler option 도입 - bundler의 작동 방식을 모델링 - vite, esbuild, swc, Webpack, Parcel 등 최신 번들러 사용 중이라면 적합함 (하이브리드 검색 전략)
18. Support for “export type *”
19. Support for “export type *” - TypeScript 3.8에서 타입만 import, export 해오는 문법이 새로 생김. - 하지만 import 해온 것을 전체(*)를 type만 re-export 하는 기능은 제한 → 5.0에서 지원 해줌. Github PR Link
20. Speed, Memory, and Package Size Optimizations
21. Speed, Memory, and Package Size Optimizations
22. Speed, Memory, and Package Size Optimizations - Build Times Down - 컴파일러 내부의 객체 타입의 균일화 & 객체 무게 줄이기 - 메모리 사용량 감소 - 정보를 문자열로 바꿀 때 (에러나 유형 표시 등) 캐싱 수행 - 메모리 사용량 감소 - 클로저에서 let & const 대신 var를 사용하여 우회하여 개선 - 파싱 성능 증가 - Package Size Down - “namespaces” → “modules” migration (feat. typeformer) - Blog Link, Github PR - scope hoisting 같은 최적화할 수 있는 최신 빌드 툴들을 활용할 수 있게 됨. - 패키징 전략 재검토 & 사용하지 않는 코드 제거
23. Breaking Changes
24. Breaking Changes - Runtime Requirements - Target: ECMAScript 2018 - Typescript Package: 최소 Node.js version이 12.20이상부터 지원 - Forbidden Implicit Coercions in Relational Operators - 문자열을 숫자로 강제 변환 할 수 있는 코드들의 경고 확장 - 5.0부터는 >, <, <=, >= 도 지원 - +연산자로 number타입 확정 시 사용 가능
25. Deprecations and Default Changes
26. Deprecations and Default Changes • --target: ES3 • --out • --noImplicitUseStrict • --keyofStringsOnly • --suppressExcessPropertyErrors • --suppressImplicitAnyIndexErrors • --noStrictGenericChecks • --charset • --importsNotUsedAsValues • --preserveValueImports • prepend in project references TypeScript 5.5까지만 지원 Deprecations Default Changes • --newLine: LF • --forceConsistentCasingInFileNames: true
27. 감사합니다😆