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
15k
ついに来る!TypeScript5.0の新機能
TechFeed Experts Night#11 「ついに来る!TypeScript5.0の新機能」
uhyo
January 18, 2023
Tweet
Share
More Decks by uhyo
See All by uhyo
require(ESM)とECMAScript仕様
uhyo
2
380
TypeScript Quiz (Encraft #12 Frontend Quiz Night)
uhyo
7
1.3k
Shadow DOMとCSSの現状
uhyo
11
6.1k
TypeScriptってどんな言語? 言語そのものを知る面白さ
uhyo
16
8.2k
App Router時代のデータ取得アーキテクチャ
uhyo
45
14k
ステート管理を超えるRecoil運用の考え方
uhyo
15
11k
TypeScript 4.7と型レベルプログラミング
uhyo
6
5.3k
TypeScriptを振り回せ!
uhyo
28
8.9k
2020年代、使う技術はどう選ぶ?
uhyo
22
12k
Other Decks in Technology
See All in Technology
Google Cloud Next '24でブログを10本書いた方法と勉強会を沸かせた方法
yasumuusan
0
290
APIファーストなプロダクトマネジメントの実践 〜SaaSus Platformでの例〜 / "Practicing API-First Product Management - An Example with SaaSus Platform
oztick139
0
100
現代CSSフレームワークの内部実装とその仕組み
poteboy
8
3.6k
ゼロから始めるVue.jsコミュニティ貢献 / first-vuejs-community-contribution-link-and-motivation
lmi
1
120
継続的な改善 x ⾮連続的な進化
sansantech
PRO
3
150
Java EE/Jakarta EEの現状と将来―クラウドネイティブ時代にJava EEは対応できるのか?―
takakiyo
1
150
Azureの基本的な権限管理の勉強会
yhana
0
280
レガシーをぶっ壊せ。AEONで始めるDevRelの話 / Qiita Night 2024-2-22
aeonpeople
3
1.3k
Azure Container Apps + Bicep 〜 こんな感じで運用しています
kaz29
2
470
JSON攻略法.pdf
miyakemito
8
5k
私が trocco を推す理由
__allllllllez__
1
220
GrafanaMeetup_AmazonManagedGrafanaのアクセス制御機能とマルチテナント環境下でのアクセス制御について
daitak
0
140
Featured
See All Featured
Robots, Beer and Maslow
schacon
PRO
155
7.9k
VelocityConf: Rendering Performance Case Studies
addyosmani
320
23k
Web Components: a chance to create the future
zenorocha
305
41k
What's new in Ruby 2.0
geeforr
337
31k
WebSockets: Embracing the real-time Web
robhawkes
59
7k
Being A Developer After 40
akosma
57
580k
Dealing with People You Can't Stand - Big Design 2015
cassininazir
357
22k
Intergalactic Javascript Robots from Outer Space
tanoku
266
26k
Optimizing for Happiness
mojombo
370
69k
Designing Dashboards & Data Visualisations in Web Apps
destraynor
226
51k
Typedesign – Prime Four
hannesfritz
36
2.1k
In The Pink: A Labor of Love
frogandcode
138
21k
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でそこが解消され るのはとても嬉しい。 デコレータも正式版が実装されたら設計に取り入れたい。 おわり