TypeScript 5.1 リリース、新機能アップデート

1: 戻り値の型が増加します。

type fun = () => undefined;

ここではエイリアス fun が設定されていますが、これを使用する場合は明示的にエイリアスを返す必要がありますundefined

const f: fun = () => {
    
    
  return undefined;
};
f();

これで、戻り値の型を直接設定できるようになりました。

const f: fun = ():undefined => {
    
    
};
f();

これに限定されませんvoid any

バージョン 4.3 : ❌
バージョン 5.1 : ✅

ここに画像の説明を挿入

2: ゲッターはセッターとは関係のない型を設定できる

const point = {
    
    
    get value(): number {
    
    
        return 0;
    },
    set value(value: string) {
    
    
    }
};
point.value = '888'; 
console.log(point.value); 

以前のバージョンでは、次のように get の戻り値の型は set のサブタイプである必要がありました。

const point = {
    
    
    get value(): number {
    
    
        ......
    },
    set value(value: string|number) {
    
    
    }
};

新しいバージョン 5.1 では、この制約が緩和されます。

バージョン 4.3 : ❌
バージョン 5.1 : ✅

ここに画像の説明を挿入
ただし、アノテーションを設定しないと、誤った解釈を他人に伝える可能性があります。

3: JSX 要素と JSX タグの非同期サポート

React の JSX 型の部分的な定義を見てみましょう。

namespace JSX {
    
    
        // 用于普通的HTML元素
        interface IntrinsicElements {
    
    
            // 为每一个HTML元素提供了对应的属性
            // ...
            // 其他HTML元素
        }

        // 用于React组件
        interface Element extends React.ReactElement<any, any> {
    
     }
        interface ElementClass extends React.Component<any> {
    
    
            render(): React.ReactNode;
        }
        interface ElementAttributesProperty {
    
     props: {
    
    }; }
        interface ElementChildrenAttribute {
    
     children?: {
    
    }; }
        // ...
}

Typescript は常に JSX.Element を使用して JSX のタイプを決定します。React の将来のバージョンでは、Promise を返すコンポーネントに対する限定的なサポートが提供される可能性があります。

この問題を解決するために、typescript 5.1 では、返される非同期コンポーネントの特定のタイプをユーザーが指定できるように、新しい属性ElementType ✅ を追加しました。

よく理解していない場合は、「あなたに適応するために、一緒に新しい契約を作りましょう」という一種の契約と考えるとよいでしょう。

「一人でいるのはいいことだ、抱きしめてもらったほうがいいかもしれない」

4: 名前空間属性名 JSX をサポート

JSX を使用する場合、ts は次の記述メソッドをサポートします。a:b

// ✅
<Foo a:b="hello" />

5: モジュール内の typeRoots が更新されます

typeRoots の主な目的は、TypeScript コンパイラに、どのディレクトリで型定義ファイル (.d.ts ファイル) を探すかを指示することです。

デフォルトでは、 node_modules/@typesディレクトリで .d.ts ファイルが検索されます。

好き:

{
    
    
  "compilerOptions": {
    
    
    "typeRoots": ["node_modules/@types"],
    ...
  }
}

バージョン 4.3 : ❌

  1. ディレクトリにのみ解決できます

バージョン 5.1 : ✅

  1. ディレクトリまたはファイルとして解析できます (ここでの説明が間違っている場合は、私に知らせて修正してください、ありがとう)

⇒詳しくはこちらをご覧ください<-

6: JSXタグのリンクカーソル

ここでのアップデート機能は主に、vscodeの。他のツールにもこの機能が含まれている必要があります。

ここに画像の説明を挿入

  1. ショートカット キー Ctrl+, (Ctrl とカンマ) を使用します。
  2. リンク編集の開始
  3. 「エディタ: リンク編集」オプションを見つけてチェックを入れます

7: @param JSDoc タグのコードセグメント補完

8: 最適化/主要な変更セクション

  1. 不必要な型のインスタンス化を避ける
  2. 共用体リテラルの否定的な大文字と小文字のチェック
  3. JSDoc 解析のためのスキャナへの呼び出しを減らす
  4. 最小ランタイム要件として ES2020 および Node.js 14.17
  5. 明示的な typeRoots により、node_modules/@types のウォークアップが無効になります

おすすめ

転載: blog.csdn.net/qq_41974199/article/details/131135004