Typescript について知らないかもしれないこと

Typescript について知らないかもしれないこと

Typescript は素晴らしい言語です.私はそれを1年間使用しており、言語に対する私の愛は無限大です.一般に Javascript のスーパーセットとして知られていますが、それ以上の機能を備えています. Typescript は、日々の開発作業に大いに役立ちます.また、不必要な痛みを伴うバグを回避するのにも大いに役立ちます.

ここで、この記事では、Typescript でいくつかの機能を紹介しますが、これはあなたが知らないかもしれませんが、日常生活で役立つかもしれません.機能を試すことに興奮していますか?

@ts-expect-error

ts コンパイルが何か間違ったことをしていると怒鳴っている場合を想定しましょう.

const multiply = (a:number,b:number) => a+b;
multiply('12',13);

ここで、TS コンパイラは次のメッセージを表示します.Argument of type 'string' is not assignable to parameter of type
最初の引数の型を変更できず、一時的に TS コンパイラによって表示されるエラーを抑制したいとします.通常、エラーを抑制するために @ts-ignore を使用します.

const multiply = (a:number,b:number) => a*b;
// @ts-ignore
multiply('12',13);

ここで、しばらくしてエラーを修正し、multiply 関数の最初の引数を '12' から 12 に変更しました.

const multiply = (a:number,b:number) => a+b;
// @ts-ignore
multiply(12,13);

しかし、以前に使用した @ts-ignore ディレクティブを削除するのを忘れていたため、基本的には削除しない限り、次の行を永久に無視し続け、将来バグが発生する可能性があります.

したがって、この場合、@ts-expect-error ディレクティブを使用できます.このディレクティブは @ts-ignore ディレクティブと同じ働きをしますが、エラーが修正されるとすぐに、TS コンパイラが警告を発します.

const multiply = (a:number,b:number) => a+b;
// @ts-expect-error
multiply(12,13);

Unused '@ts-expect-error' directive.
これにより、エラーが修正されたらすぐにディレクティブを削除するように通知されます.

入力しない

エラーステータスコードを受け取り、ステータスに応じて常にエラーをスローする関数があります.never がエンドポイントに到達しないことがわかっている場合は、function タイプが便利です.
never と void の違いは、void は少なくとも undefined または null が返されることを意味しますが、never は関数のエンドポイントに到達しないことを意味します.

function throwError(error: string): never { 
        throw new Error(error); 
} 

テンプレート リテラル タイプ

テンプレート リテラル型は、JavaScript の文字列リテラル型に似ていますが、型に固有です.ポップオーバーを実装するライブラリがあり、ポップオーバーを配置するためのタイプがあるとしましょう

type popoverPositions = 'top'|'bottom'|'left'|'right'|'top-left'|'top-right'|'top-center'|'bottom-left'|'bottom-right'|'bottom-center';

すべてのタイプのすべての可能な順列と組み合わせを組み合わせるのは多忙な場合があります.

テンプレート リテラル型を使用すると、方向を分離して型を結合し、可能なすべての組み合わせで構成される新しい型を取得できます.

type positions = 'top'|'bottom'|'center';
type directions = 'left'|'right'|'center'
type popoverPositions = positions | directions | `${positions}-${directions}`

すべてのタイプを次のように生成します

type popoverPositions = positions | directions | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "center-left" | "center-right"

null アサーション

Null アサーションは基本的に、値が null でも undefined でもないことを TS コンパイラに伝えます.値を次のように初期化したとしましょうlet myNumber:null | number = null;ただし、後で myNumber の値を更新しますmyNumber = 69;
ここで、数値のみを受け入れる関数があるとします.

const add = (a:number,b:number) => {
    return a + b;
}
add(myNumber,1);

コンパイラはあなたに怒鳴りますArgument of type 'null' is not assignable to parameter of type 'number'.
したがって、ここでは、変数の末尾に bang ! を含む null アサーションを使用して、送信する値が null ではないことをコンパイラに伝えることができます.

const add = (a:number,b:number) => {
    return a + b;
}
add(myNumber!,1);

上記のコードは正常にコンパイルされます.

インターフェイスのマージ

Megring Interfaces は declaration merging のタイプです.同じ名前の 2 つのインターフェイスがある場合、マージして単一のインターフェイスを作成します.

interface Box {
  height: number;
  width: number;
}
interface Box {
  scale: number;
}
let box: Box = { height: 5, width: 6, scale: 10 };

したがって、ここでは、同じ名前の 2 つの別個のインターフェースを作成し、それらを 1 つのインターフェースにマージして、上記の例のように使用できます.

上記のリストから何か新しいことを学んだことを願っています.

あなたは私の、Githubで私に従うことができます