Upgrade to Pro
— share decks privately, control downloads, hide ads and more …
Speaker Deck
Features
Speaker Deck
PRO
Sign in
Sign up for free
Search
Search
ついに来る!TypeScript5.0の新機能
Search
uhyo
January 18, 2023
Technology
21
16k
ついに来る!TypeScript5.0の新機能
TechFeed Experts Night#11 「ついに来る!TypeScript5.0の新機能」
uhyo
January 18, 2023
Tweet
Share
More Decks by uhyo
See All by uhyo
非同期処理を活用しながらRust製wasmとJSを連携する方法(wasm-bindgenを使いたくない人向け)
uhyo
4
3.1k
tsconfig.jsonの設定を見直そう!フロントエンド向け 2024夏
uhyo
22
7.4k
React 19を概念から理解する
uhyo
21
9k
require(ESM)とECMAScript仕様
uhyo
6
1.7k
TypeScript Quiz (Encraft #12 Frontend Quiz Night)
uhyo
8
1.6k
Shadow DOMとCSSの現状
uhyo
11
6.9k
TypeScriptってどんな言語? 言語そのものを知る面白さ
uhyo
16
8.7k
App Router時代のデータ取得アーキテクチャ
uhyo
48
15k
ステート管理を超えるRecoil運用の考え方
uhyo
15
12k
Other Decks in Technology
See All in Technology
分野に潜むツールの紹介
pojiro
1
350
タイミーのBraze活用 ~PUSH通知を活用したレコメンド~
ozeshun
2
150
Cloud Service Mesh への期待が止まらない!!
phaya72
2
230
#Zenoh 完全に理解した 〜組込み純情篇〜
takasehideki
1
470
Monitor GraalVM Native Apps with OpenTelemetry
logico_jp
0
110
自社開発した大規模言語モデルをどうプロダクションに乗せて運用していくか〜インフラ編〜
pfn
PRO
18
5.4k
標準ライブラリの奥深アップデートを掘り下げよう!
logica0419
2
440
Oracle Base Database Service:サービス概要のご紹介
oracle4engineer
PRO
0
13k
Evolving DevOps Teams and Flexible Organizational Culture
kakehashi
1
190
FastConnect の冗長性
ocise
0
7.2k
AWSを始めた頃に陥りがちなポイントをまとめてみた
oshanqq
1
3.3k
Dive Deep in Cloud Run: Automatic Base Image update
aoto
PRO
0
900
Featured
See All Featured
Writing Fast Ruby
sferik
623
60k
10 Git Anti Patterns You Should be Aware of
lemiorhan
653
58k
The Invisible Side of Design
smashingmag
295
50k
Cheating the UX When There Is Nothing More to Optimize - PixelPioneers
stephaniewalter
278
13k
What the flash - Photography Introduction
edds
67
11k
Visualization
eitanlees
142
15k
Build your cross-platform service in a week with App Engine
jlugia
228
18k
Easily Structure & Communicate Ideas using Wireframe
afnizarnur
190
16k
Art, The Web, and Tiny UX
lynnandtonic
294
20k
A Philosophy of Restraint
colly
202
16k
Designing for humans not robots
tammielis
248
25k
Designing with Data
zakiwarfel
98
5k
Transcript
ついに来る! TypeScript 5.0の新機能 TechFeed Experts Night#11 uhyo (株式会社バベル プリンシパルエンジニア)
おさらい: TypeScriptのリリースサイクル 3ヶ月に1回のリリースサイクル (4.9と5.0が4ヶ月空いているのは年末休みのため?) TypeScript 4.8 TypeScript 4.9 TypeScript 5.0
2022年8月公開 2022年11月公開 2023年3月公開(予定)
おさらい: TypeScriptのリリースサイクル TypeScriptはsemantics versioningを採用していないので、 5.0は他に比べて特別なリリースというわけではない。 TypeScript 4.8 TypeScript 4.9 TypeScript
5.0 2022年8月公開 2022年11月公開 2023年3月公開(予定)
TypeScript 5.0概観 • デコレータが実装! • あとはオプションの追加・変更が多く、バンドラ関連のサポー トが充実
①Stage 3 デコレータ実装 デコレータのプロポーザルがStage 3になり安定したため、 TypeScriptに実装される。 これまでの古い仕様に基づいた実装はLegacy Decoratorsとし てサポート継続 https://github.com/microsoft/TypeScript/pull/50820
experimentalDecorators: false experimentalDecorators: true ~TS 4.9 無 Legacy Decorators TS 5.0~ Stage3 Decorators Legacy Decorators ※発表時点でまだPRがマージされていないため、TS 5.1以降にずれる可能性もあります。
② 古いオプションの非推奨化が始まる TypeScriptには多くのコンパイラオプションがあるが、 エコシステムの変化や型システムの進化によりユースケースが 消滅したオプションもあるので廃止が始まる。 TypeScript 5.0: 廃止対象のオプションに対するwarningの表示 TypeScript 5.5:
オプションのnoop化 TypeScript 6.0: 廃止(指定するとエラーが発生) https://github.com/microsoft/TypeScript/issues/51000
廃止対象オプション 使われないオプションの中でもかなり古いものが選ばれた印象。 もう需要が無い系 • charset • noImplicitStrict • out 型システムの進化で必要が無くなった系
• keyofStringsOnly • noStrictGenericChecks 移行期間さすがに終わりだよ系 • suppressExcessPropertyErrors • suppressImplicitAnyIndexErrors TypeScriptの型チェックが厳しく なる際に後方互換性のために追加 されたが、 さすがにもう移行終わってそうな やつ
③ .tsによるimportが解禁 新オプションallowImportingTsExtensions: true を設定するこ とで、import { … } from
“./foo.ts” が可能になる。 制約: noEmit: true または emitDeclarationOnly: true と併用が必要。 (JavaScriptにトランスパイルしない設定の場合のみ許可される)
.tsによるimport解禁の背景 これまでTypeScriptは import “./foo.ts” の実装を拒んでいた。 理由: トランスパイル後は “foo.js” に直す必要があるが、ランタイムの 挙動を変えることになるのでTypeScriptとしてはやりたくない。
バンドラなら.jsに直さなくてもバンドルができるので解禁された。 (モジュール解決のホストであるバンドラが.tsの解決をサポートしている ので、.tsでimportするコードを妥当なTypeScriptコードとして扱うこと が正当化される)
④ モジュール解決に関する設定の追加 TypeScriptは独自にモジュール解決(import先の決定・読み込み) を行っているが、その挙動を調整するオプションが新たに追加され る。 TypeScript 5.0で追加される見込みのオプション: • moduleResolution: “bundler”
― バンドラと相性がいい設定 • 付随する新オプションたち: resolvePackageJsonExports, resolvePackageJsonImports, customConditions https://github.com/microsoft/TypeScript/pull/51669
バンドラ向けモジュール解決の概要 バンドラの特徴: • TypeScriptファイル間で直接import/exportできる。 (中間表現としてのJavaScriptを出力する必要がない) • package.jsonの imports/exportsを解釈できる。 (もともとnode.jsの機能だが、バンドラにもサポートされている) moduleResolution:
“bundler” の機能: • .tsでのimportや拡張子なしのimportも可能。 • package.jsonのimports/exportsを解釈する。
変更の背景 package.jsonのimports/exportsフィールドのサポート: 特にexportsフィールドは “my-package/foo”のようなサブパス のimportの挙動が制御できるのでとても便利だが、 従来はmoduleResolution: “node16” 下でのみのサポートだっ た。 理由:
そもそもpackage.jsonがNode.jsの機能なので、デフォルトでサポー トするのは妥当ではない。
変更の背景② 最近のバンドラはpackage.json関連の機能をサポートしている ので、それに合わせてmoduleResolution: “bundler” でも package.json関連の機能が有効化される。 嬉しい点: moduleResolution: “node16”はimportに拡張子が必須になるため バンドラ環境で使うのが難しかったが、今回の機能追加によりバンドラでも
package.jsonの機能が使えるようになった。 また、バンドラの多様性が反映され、細かい挙動が調整可能になった。 (オプション4つ新設)
⑤ 任意の拡張子をimportするオプション TypeScript 5.0で追加される allowArbitraryExtensions: true を使用すると、 import “./foo.css” など任意の拡張子をimportでき
るようになる。 https://github.com/microsoft/TypeScript/pull/51435
⑤ 任意の拡張子をimportするオプション TypeScript 5.0で追加される allowArbitraryExtensions: true を使用すると、 import “./foo.css” など任意の拡張子をimportでき
るようになる。 Q. 前からできたのでは? https://github.com/microsoft/TypeScript/pull/51435
⑤ 任意の拡張子をimportするオプション TypeScript 5.0で追加される allowArbitraryExtensions: true を使用すると、 import “./foo.css” など任意の拡張子をimportでき
るようになる。 Q. 前からできたのでは? A. moduleResolution: “node16” だとできなかった。 Node.jsではimport時に .js という拡張子が必要なので、それ以外の拡張子 は許可されていなかった。 https://github.com/microsoft/TypeScript/pull/51435
CommonJS時代の型定義ファイル解決 従来、require(“./foo.css”) に対する型定義ファイルは foo.css.d.ts として用意できた。 ただし、実はfoo.css.d.tsはfoo.css.js に対する定義ファイル。 require(“./foo.css”) ↓CommonJS的解釈 foo.css.js
←型定義 foo.css.d.ts
Node.jsのES Modulesだと…… Node.jsのESMだと拡張子を省略できない。 import “./foo.css” ←型定義 ??? ↓別物↑ import “./foo.css.js”
←型定義 foo.css.d.ts
Node.jsのES Modulesだと…… Node.jsのESMだと拡張子を省略できない。 import “./foo.css” ←型定義 foo.d.css.ts ↓別物 import “./foo.css.js”
←型定義 foo.css.d.ts TypeScript 5.0で .d.ext.ts が導入される。 CommonJS時代には真剣に考慮する必要がなかった拡張子に 関するサポートを拡張した結果生まれた。
総評 TypeScriptはこれまでモジュール解決をむやみに拡張可能にする のではなく、現実のユースケースに合致することを重視してきた。 今回もその流れは変わらず、Node.jsでの非JSファイル読み込み やバンドラという具体的なユースケースを念頭においた機能追加 だった。 昔の独自路線(enumとか)を反省してか、TypeScriptは独自の 仕様を作ったり普及させたりしないようにかなり気を付けている ように見える。
所感 フロントエンド開発でpackage.jsonのexportsを使いたい際に ネックになるのがTypeScriptだったので、5.0でそこが解消され るのはとても嬉しい。 デコレータも正式版が実装されたら設計に取り入れたい。 おわり