🏄
Matsuri-tech Frontend Weekly 2023-11-24

hrdtbs

hrdtbs

2023年11月24日
MFWTypeScriptGit

社内向けに、フロントエンド関連のニュースや業務で発生したQ&A、利用しているライブラリなどの情報を定期的に書いています。

社内の開発部メンバーに向けて直近でリリースされたライブラリなどの情報をMatsuri-tech Frontend Weeklyとしてまとめています。内容は実務や趣味で使えそうなものを中心に扱っており、網羅的ではなく偏りがあります。

# TypeScript 5.3

2023年11月20日にTypeScript 5.3がリリースされました。

Announcing TypeScript 5.3 - TypeScriptToday we’re excited to announce the release of TypeScript 5.3! If you’re not familiar with TypeScript, it’s a language that adds type syntax to JavaScript to bring type-checking. Type-checking can catch all sorts of issues like typos and forgetting to check for null and undefined.Announcing TypeScript 5.3 - TypeScript

新たな構文のサポートに加えて、JSDoc解析をスキップすることによる最適化やパッケージの重複を避けることによるパッケージサイズの削減なども行われました。

# Import Attributes

Stage 3のImport Attributesがサポートされました。

GitHub - tc39/proposal-import-attributes: Proposal for syntax to import ES modules with assertionsProposal for syntax to import ES modules with assertions - tc39/proposal-import-attributesGitHub - tc39/proposal-import-attributes: Proposal for syntax to import ES modules with assertions

これによりモジュールの形式をランタイムに提供できるようになります。

import obj from "./something.json" with { type: "json" };

import * as foo from "./foo.js" with { type: "fluffy bunny" };

const obj = await import("./something.json", {
	with: { type: "json" }
});

# switch(true) Narrowing

switch (true)内の各case句に基づいて型の絞り込みをできるようになりました。

function f(x: unknown) {
    switch (true) {
        case typeof x === "string":
            // 'x' is a 'string' here
            console.log(x.toUpperCase());
            // falls through...

        case Array.isArray(x):
            // 'x' is a 'string | any[]' here.
            console.log(x.length);
            // falls through...

        default:
          // 'x' is 'unknown' here.
          // ...
    }
}

# Narrowing On Comparisons to Booleans

true または false と直接比較した場合でも、絞り込みが出来るようになりました。

interface A {
    a: string;
}

interface B {
    b: string;
}

type MyType = A | B;

function isA(x: MyType): x is A {
    return "a" in x;
}

// <=5.2
function someFn(x: MyType) {
    if (isA(x)) {
        console.log(x.a); // works!
    }
}
// <=5.2 
function someFn(x: MyType) {
    if (isA(x) === true) {
        console.log(x.a); // not works
    }
}
// 5.3 
function someFn(x: MyType) {
    if (isA(x) === true) {
        console.log(x.a); // works!
    }
}

# Git 2.43

2023年11月20日にGit 2.43がリリースされました。

Highlights from Git 2.43The last Git release of 2023 is here! Take a look at some of our highlights on what's new in Git 2.43.Highlights from Git 2.43

リバートコミットをリバートした際のコミットメッセージのRevert RevertからReapplyになりました。

$ git revert --no-edit HEAD >/dev/null
$ git revert --no-edit HEAD >/dev/null
$ git log --oneline
- a300922 (HEAD -> main) Revert: "Revert: "fix bug""
+ a300922 (HEAD -> main) Reapply "fix bug"
  0050730 Revert "fix bug"
  b290810 fix bug

巨大なリポジトリを扱う際に、Blobを必要に応じて取得するBlobless cloneを実行したい場合があります。

git clone --filter=blob:none git@github.com:git/git.git

これを通常のローカルリポジトリに後から適用できるようになりました。

% git repack -ad --filter=blob:none --filter-to=pack --no-write-bitmap-index
% git config remote.origin.promisor true
% git config remote.origin.partialclonefilter blob:none

他にも1MiB 未満の Blob のみフィルタリングして取得するといったことも出来ます。

git repack -ad --filter='blob:limit=1m' --filter-to=pack

# Firefox 120.0

2023年11月21日にFirefox 120.0がリリースされました。

Firefox 120.0, See All New Features, Updates and FixesFirefox  120.0, See All New Features, Updates and Fixes

トラッキングコードを削除したリンクをコピーする機能が追加されました。またWebAssembly GCが有効になりました。