🔖

【RN Update 2023年8月】TypeScript v5.2がリリース他

2023/08/31に公開

React Native

React

TypeScript

tech

はじめに

こんにちは！
犬専用の音楽アプリオトとりっぷでエンジニアしています、足立です。

https://www.oto-trip.com/

この記事では、今月のReact Nativeに関連するニュースを紹介します。

ライブラリ情報

【TypeScript】 v5.2がリリース

TypeScript v5.2がリリースされました！

実はTypeScriptのバージョンはsemantic versioningではないので、v5.0だから劇的な変化みたいなことがありません。
逆に言うと、v5.2だから穏やかな変化でない可能性もあるので、要チェックです。

個人的に気なる変更点は、以下の2つです。

using宣言の追加
名前付きタプルの追加

using宣言の追加

using宣言とは、ECMAScript（JavaScript標準規格）に今後追加される予定の明示的リソース管理を使用するための機能です。
Pythonで言うところのwithでファイル開いたら自動で閉じてくれるよね的な機能を提供してくれるものらしいです。

例えば、ファイルを開いて、何かしらの処理して、その後確実にファイルを閉じるという操作の場合、従来であれば以下の通り書く必要がありました。

~v5.1

export function doSomeWork() {
    const path = ".some_temp_file";
    const file = fs.openSync(path, "w+");

    try {
        // use file...

        if (someCondition()) {
            // do some more work...
            return;
        }
    }
    finally {
        // Close the file and delete it.
        fs.closeSync(file);
        fs.unlinkSync(path);
    }
}

それがv5.2からは、次の通りtry-finally構文が不要になります。

~v5.2

class TempFile implements Disposable {
    #path: string;
    #handle: number;

    constructor(path: string) {
        this.#path = path;
        this.#handle = fs.openSync(path, "w+");
    }

    // other methods

    [Symbol.dispose]() {
        // Close the file and delete it.
        fs.closeSync(this.#handle);
        fs.unlinkSync(this.#path);
    }
}

export function doSomeWork() {
    using file = new TempFile(".some_temp_file");

    // use file...

    if (someCondition()) {
        // do some more work...
        return;
    }
}

ポイントは、using file = new TempFile(".some_temp_file");とusingで宣言しているところです。
これによりdoSomeWorkから抜ける直前にTempFile内のSymbol.dispose部分が発火してくれます。

これを利用すると、例えば以下のようなことが可能になります。

function loggy(id: string): Disposable {
    console.log(`Creating ${id}`);

    return {
        [Symbol.dispose]() {
            console.log(`Disposing ${id}`);
        }
    }
}

function func() {
    using a = loggy("a");
    using b = loggy("b");
    {
        using c = loggy("c");
        using d = loggy("d");
    }
    using e = loggy("e");
    return;

    // Unreachable.
    // Never created, never disposed.
    using f = loggy("f");
}

func();
// Creating a
// Creating b
// Creating c
// Creating d
// Disposing d
// Disposing c
// Creating e
// Disposing e
// Disposing b
// Disposing a

スコープを抜ける直前や、早期リターンの直前に特定の動作を実行することができました。
React Nativeでリソース管理を厳密に必要とするケースは少ないかもしれませんが、JavaScript新機能なので今後の発展に期待ですね。

using宣言の細かな使い方については、以下の記事で詳細に説明されておられるので、そちらをご覧ください。

名前付きタプルの追加

タプル型の定義を複雑にしたい場合の選択肢が広がりました。

~v5.1 この書き方だけ

type TwoOrMore = [string, number, string[]];
const two: TwoOrMore = ['first', 2];
const more: TwoOrMore = ['first', 2, 'third', 'fourth'];

~v5.2 これも使える

type TwoOrMore = [first: string, second: number, ...rest: string[]];
const two: TwoOrMore = ['first', 2];
const more: TwoOrMore = ['first', 2, 'third', 'fourth'];

ただし型をマージしてしまうと、名前付きの情報が消されてしまうので、注意が必要です。

type HasLabels = [a: string, b: string];
type HasNoLabels = [number, number];
type Merged = [...HasNoLabels, ...HasLabels];

// type Merged = [number, number, string, string]

【react-native-bootsplash】 v5がリリース

react-native-bootsplash v5がリリースされました！

主な変更点は以下の通りです。
待望の？ブランドロゴを入れらるようになりました！

ダークモードを追加
ブランドロゴを追加
Webのサポート

v4からのマイグレーション対応はAndroidのみ必要で、ガイドがこちらに記載されております。
また、v5からReact Native v0.70以下のサポートが終了しておりますので、もしまだの方はそちらも早めの対応が必要です。

React Native関連情報

Google Play アプリの対象 API レベル要件

React Native v0.70を利用しているAndroidアプリに対して、以下のメッセージがいきなり届きました。

React Native v0.70まではAndroid APIレベルが31で、v0.71から33に変更されました。
ですので、9月以降にAndroidアプリを更新する場合は、v0.71以降のバージョンを使用する必要があります。

皆様もお気をつけください。
いちおう11月までは期限延長リクエストが可能なようですので、対応が難しい場合はリクエストを忘れずに。私たちは急遽対応しました。

最後に

ここまで読んでいただきありがとうございました。

もし犬専用の音楽アプリに興味を持っていただけたら、ぜひダウンロードしてみてください！