TypeScript4.7βリリース
Chrome101βリリース
Node.jsでTypeScriptを使うときに、トランスパイル先としてCommonJSかESModuleを選べるようになりました。
package.json1{2"name": "app-name",3"type": "module" or "commonjs",4...5"dependencies": {6...7}8}
type: module
を選択した場合はcompileOptionsとして、node12やnodenextを選べるようになります。
package.json1{2"compilerOptions": {3"module": "nodenext"4}5}
ESModuleを使う場合は拡張子の省略ができなくなります。
foo.ts1// ./foo.ts2export function helper() {3// ...4}
bar.ts1// ./bar.ts2import { helper } from "./foo"; // only works in CJS3import { helper } from "./foo.js"; // works in ESM & CJS45helper();
mtsとctsが追加されました。 それぞれ、mjs, cjsに変換されます。
[]
の中で計算した値をキーとした場合もNarrowingが効くようになった。
1const key = Symbol();23const numberOrString = Math.random() < 0.5 ? 42 : "hello";45let obj = {6[key]: numberOrString,7};89if (typeof obj[key] === "string") {10// 以前のTypeScriptではstring|number型になっていた11let str = obj[key].toUpperCase();12}
変数が自由な型を取れる関数から、変数を特定の型になる関数を作るのが簡単になった。
1// TypeScript4.6以前23// 変数が任意の型の関数4function makeBox<T> (value: T) {5return { value };6}78// 変数がstring型の関数9const stringBox = (val: string) => makeBox<string>(val);1011// 変数がnumber型の関数12const numberBox = (val: number) => makeBox<number>(val);1314stringBox('aaa') // => { value: 'aaa' }15numberBox(123) // => { value: 123 }1617// TypeScript4.7からは以下のように省略形で書ける18const stringBox2 = makeBox<string>;19const numberBox2 = makeBox<number>;2021function makeBox<T> (value: T) {22return { value };23}2425stringBox2('aaa') // => { value: 'aaa' }26numberBox2(123) // => { value: 123 }
カスケードレイヤーはCSSをレイヤーでグルーピング化し、レイヤーごとに優先度を決め、スタイルを適用できる機能です。
1<main>2<div id="color-box" class="box"></div>3</main>45<style>6.box{7width:300px;height:300px;border:2px solid #0008}910/* 下の書き方では、base, component, pageの順にCSSが上書きされ、緑色の箱になる */11@layer base, component, page;1213@layer page {14.box {15background: palegreen;16}17}18@layer base {19.box {20background: rebeccapurple;21}22}23@layer component {24.box {25background: hotpink;26}27}28</style>
操作記録をJSONとして保存し、エクスポート・インポートできるようになりました。