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
意外と難しいGraphQLのスカラー型
uhyo
5
720
RSCの時代にReactとフレームワークの境界を探る
uhyo
13
3.9k
知られざるprops命名の慣習 アクション編
uhyo
12
3.1k
libsyncrpcってなに?
uhyo
0
690
Next.jsと状態管理のプラクティス
uhyo
7
14k
10ヶ月かけてstyled-components v4からv5にアップデートした話
uhyo
5
650
更新系と状態
uhyo
9
3.8k
React 19アップデートのために必要なこと
uhyo
8
2.7k
color-scheme: light dark; を完全に理解する
uhyo
8
730
Other Decks in Technology
See All in Technology
『OCI で学ぶクラウドネイティブ 実践 × 理論ガイド』 書籍概要
oracle4engineer
PRO
2
150
生成AIで「お客様の声」を ストーリーに変える 新潮流「Generative ETL」
ishikawa_satoru
1
370
[Keynote] What do you need to know about DevEx in 2025
salaboy
0
140
From Prompt to Product @ How to Web 2025, Bucharest, Romania
janwerner
0
120
フルカイテン株式会社 エンジニア向け採用資料
fullkaiten
0
9.1k
これがLambdaレス時代のChatOpsだ!実例で学ぶAmazon Q Developerカスタムアクション活用法
iwamot
PRO
5
180
小学4年生夏休みの自由研究「ぼくと Copilot エージェント」
taichinakamura
0
550
AWS Top Engineer、浮いてませんか? / As an AWS Top Engineer, Are You Out of Place?
yuj1osm
2
180
空間を設計する力を考える / 20251004 Naoki Takahashi
shift_evolve
PRO
4
440
OCI Network Firewall 概要
oracle4engineer
PRO
1
7.8k
Optuna DashboardにおけるPLaMo2連携機能の紹介 / PFN LLM セミナー
pfn
PRO
2
930
関係性が駆動するアジャイル──GPTに人格を与えたら、対話を通してふりかえりを習慣化できた話
mhlyc
0
140
Featured
See All Featured
Java REST API Framework Comparison - PWX 2021
mraible
33
8.9k
The Invisible Side of Design
smashingmag
301
51k
The Web Performance Landscape in 2024 [PerfNow 2024]
tammyeverts
9
860
Improving Core Web Vitals using Speculation Rules API
sergeychernyshev
19
1.2k
How To Stay Up To Date on Web Technology
chriscoyier
791
250k
Imperfection Machines: The Place of Print at Facebook
scottboms
269
13k
Exploring the Power of Turbo Streams & Action Cable | RailsConf2023
kevinliebholz
34
6.1k
GraphQLとの向き合い方2022年版
quramy
49
14k
Fight the Zombie Pattern Library - RWD Summit 2016
marcelosomers
234
17k
Side Projects
sachag
455
43k
Responsive Adventures: Dirty Tricks From The Dark Corners of Front-End
smashingmag
252
21k
The Language of Interfaces
destraynor
162
25k
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でそこが解消され るのはとても嬉しい。 デコレータも正式版が実装されたら設計に取り入れたい。 おわり