ものは、TypeScript 4.2以降で見ています


TypeScriptはまだこれを書いている時に4.1にありますが、ここではいくつかの機能が現在働いています.

静的インデックス署名
インデックス署名は通常、次のようになります.
class Foo {
  // All keys have numeric values
  [key: string]: number;
}

const obj = new Foo();
obj['a']; // number
obj['b']; // number
しかし、クラス自体にインデックスをつけたい場合はどうでしょうか?ライクFoo['a'] . これは「静的インデックス署名」が入るところです.
class Foo {
  // All static keys have numeric values
  static [key: string]: number;
}

Foo['a']; // number
Foo['b']; // number
querySelector 型推論
現在querySelector 単純なセレクタであれば、選択した要素の型を推論できます.
document.querySelector('div'); // HTMLDivElement
しかし、これは今では複雑ではありません.
document.querySelector('div p'); // Element
document.querySelector('div.foo'); // Element
このための組み込み型を改良して、文字列を解析し、正しい型を推論する議論があります.
document.querySelector('div p'); // HTMLParagraphElement
document.querySelector('div.foo'); // HTMLDivElement
これはものすごいです、しかし、私はパフォーマンスが打つものが何であるかについてわかりません.私たちは見ます.

リーディング/ミドルレストエレメント
現在、次のことができます.
function test(...args: string[]) {}

test('a', 'b'); // fine
test('a', 5); // error
しかし、周囲の要素を指定することはできません.新しい提案はこれを解決し、次のことを可能にします.
function test(...args: [...string[], number]): void;

function test2(...args: [number, ...string[], number]): void;

test('a', 'b'); // error
test('a', 'b', 5); // fine
test('a', 5, 'b'); // error

test2(5, 'a', 'b', 6); // fine
test2(5, 'a', 'b'); // error
これは、引数配列がどの要素を含めるべきかについてより具体的にするのに非常に役に立ちます.
override キーワード
お気に入りの新機能override キーワードと関連付けnoImplicitOverride コンパイラオプション.
これは、あなたが期待しているとおりに、継承されたメソッドをオーバーライドしていることを指定できます.
class Foo {
    x(): number {
        return 5;
    }
}

class Bar extends Foo {
    override x(): number {
        return 6;
    }
}
noImplicitOverrides オプションが有効になっているため、オーバーライドされたメソッドでキーワードを使用しない場合はコンパイラエラーが発生します.
これは、メソッドのオーバーライドは今弱すぎると思うように素晴らしいです.実現することなしにメソッドをオーバーライドしたり、親クラスが同じ名前付きメソッドを忘れたりするのは簡単です.いくつかの卑劣な問題をキャッチするだけでもう少し厳格.
noPropertyAccessFromIndexSignatureこのコンパイラオプションを有効にすると、角括弧を使用してインデックス署名のみをアクセスできます.
interface Foo {
  b: number;
  [key: string]: number;
}

declare const test: Foo;

test.b; // fine
test.a; // error
test['a']; // fine
個人的な好みになると思います.

テンプレートリテラル型
これはたくさんのものを壊すような気がします.
const foo = ['a', 'b'];
const bar = foo.map(n => `${n}-xyz`);

// bar is now Array<`${string}-xyz`>
bar.push('foo-xyz'); // works
bar.push('xyz'); // error!
配列をstring[] , これは現在、テンプレートリテラル型配列として推論されます.
非常にクールですが、また、何回も人々がこの方法で配列をマップして、パターンに従わない何かを押しましたか?壊れている変化の1つの地獄のようです:D

包む
これらは非常に興味深い変化です.
しかし、queryselectorの変更は、私は彼らがパフォーマンスのためにどれだけ悪いだろうか疑問に思います.同様に、テンプレートリテラルの推論は、それが多くのものを壊すように感じます.
しかし、私たちは、これらのいずれかの方法をいくつかの良い変更を再生し、試してみるが表示されます.