2022年4月16日
ハイライト

TypeScript4.7βリリース

Chrome101βリリース

TypeScript 4.7リリース
2022年5月8日
メモ
link
Node.jsのESModule対応

Node.jsでTypeScriptを使うときに、トランスパイル先としてCommonJSかESModuleを選べるようになりました。

package.json
1
{
2
"name": "app-name",
3
"type": "module" or "commonjs",
4
...
5
"dependencies": {
6
...
7
}
8
}

type: moduleを選択した場合はcompileOptionsとして、node12やnodenextを選べるようになります。

package.json
1
{
2
"compilerOptions": {
3
"module": "nodenext"
4
}
5
}
link
注意

ESModuleを使う場合は拡張子の省略ができなくなります。

foo.ts
1
// ./foo.ts
2
export function helper() {
3
// ...
4
}
bar.ts
1
// ./bar.ts
2
import { helper } from "./foo"; // only works in CJS
3
import { helper } from "./foo.js"; // works in ESM & CJS
4
5
helper();
link
新しい拡張子追加

mtsとctsが追加されました。 それぞれ、mjs, cjsに変換されます。

link
computed propertyを使っている場合もNarrowingが効くようになった

[]の中で計算した値をキーとした場合もNarrowingが効くようになった。

1
const key = Symbol();
2
3
const numberOrString = Math.random() < 0.5 ? 42 : "hello";
4
5
let obj = {
6
[key]: numberOrString,
7
};
8
9
if (typeof obj[key] === "string") {
10
// 以前のTypeScriptではstring|number型になっていた
11
let str = obj[key].toUpperCase();
12
}
link
Instantiation Expressions 追加

変数が自由な型を取れる関数から、変数を特定の型になる関数を作るのが簡単になった。

1
// TypeScript4.6以前
2
3
// 変数が任意の型の関数
4
function makeBox<T> (value: T) {
5
return { value };
6
}
7
8
// 変数がstring型の関数
9
const stringBox = (val: string) => makeBox<string>(val);
10
11
// 変数がnumber型の関数
12
const numberBox = (val: number) => makeBox<number>(val);
13
14
stringBox('aaa') // => { value: 'aaa' }
15
numberBox(123) // => { value: 123 }
16
17
// TypeScript4.7からは以下のように省略形で書ける
18
const stringBox2 = makeBox<string>;
19
const numberBox2 = makeBox<number>;
20
21
function makeBox<T> (value: T) {
22
return { value };
23
}
24
25
stringBox2('aaa') // => { value: 'aaa' }
26
numberBox2(123) // => { value: 123 }
Chrome101βリリース
2022年5月8日
メモ
link
ElementsのStylesでカスケードレイヤーが表示されるようになった

カスケードレイヤーはCSSをレイヤーでグルーピング化し、レイヤーごとに優先度を決め、スタイルを適用できる機能です。

1
<main>
2
<div id="color-box" class="box"></div>
3
</main>
4
5
<style>
6
.box{
7
width:300px;height:300px;border:2px solid #000
8
}
9
10
/* 下の書き方では、base, component, pageの順にCSSが上書きされ、緑色の箱になる */
11
@layer base, component, page;
12
13
@layer page {
14
.box {
15
background: palegreen;
16
}
17
}
18
@layer base {
19
.box {
20
background: rebeccapurple;
21
}
22
}
23
@layer component {
24
.box {
25
background: hotpink;
26
}
27
}
28
</style>
link
Recorderパネルのアップデート

操作記録をJSONとして保存し、エクスポート・インポートできるようになりました。

自己紹介
はじめまして Pilefortです。
東京でエソジニアをしてます。
興味のあるスタックは、JavaScript (React, Vue), TypeScript, Rust, WebAssembly, AWS, Pulumi, Serverless Frameworkです。
このブログでは、普段の業務や趣味で気になったことをまとめたり、フロントやAWS, GitHubやTwitterで見かけた面白い記事やニュースをまとめるためのものです。少しでも何かの役に立てば幸いです。
サイトマップ
Notes
業務や趣味での気づき・メモ
Snippets
記事にするまでもないけど、便利なコマンドや豆知識
Works
同人誌一覧