ts-reset - TypeScript の 'CSS リセット'、一般的な JavaScript API の型の改善
(A 'CSS reset' for TypeScript, improving types for common JavaScript API's)
ts-reset
TypeScriptの組み込みのタイピングは完璧ではありません。 それらをより良くします。
ts-reset
tsリセットなし:
🚨 (in ) と両方が戻ります.json
fetch
JSON.parse
any
🤦 期待どおりに動作しない.filter(Boolean)
😡 読み取り専用配列で頻繁に中断するarray.includes
ts-resetブラウザでCSSリセットを行うのと同じように、これらのハードエッジを滑らかにします。
tsリセットの場合:
👍 (in ) と両方が戻ります.json
fetch
JSON.parse
unknown
✅ 期待どおりに動作します.filter(Boolean)
- 🥹 より人間工学的になるように広げられています
array.includes
🚀 そして、さらにいくつかの変更があります!
例
// Import in a single file, then across your whole project...
import "@total-typescript/ts-reset";
// .filter just got smarter!
const filteredArray = [1, 2, undefined].filter(Boolean); // number[]
// Get rid of the any's in JSON.parse and fetch
const result = JSON.parse("{}"); // unknown
fetch("/")
.then((res) => res.json())
.then((json) => {
console.log(json); // unknown
});今すぐ始める
-
取り付ける：
npm i -D @total-typescript/ts-reset
-
次の内容のファイルをプロジェクトに作成します。
reset.d.ts
import "@total-typescript/ts-reset";- プロジェクト全体で改善されたタイピングをお楽しみください。
特定のルールのみをインストールする
からインポートすると、すべての推奨ルールがバンドルされます。
@total-typescript/ts-reset
必要なルールのみをインポートするには、次のようにインポートできます。
// Makes JSON.parse return unknown
import "@total-typescript/ts-reset/json-parse";
// Makes await fetch().then(res => res.json()) return unknown
import "@total-typescript/ts-reset/fetch";これらのインポートを機能させるには、 で が または に設定されていることを確認する必要があります。
tsconfig.json
module
NodeNext
Node16
以下は、利用可能なすべてのルールの完全なリストです。
注意 事項
ライブラリではなくアプリケーションでの使用ts-reset
ts-resetは、ライブラリコードではなくアプリケーションコードで使用するように設計されています。含める各ルールは、グローバル スコープに変更を加えます。つまり、ライブラリをインポートするだけで、ユーザーは無意識のうちに にオプトインすることになります。
ts-reset
準則
返品するJSON.parse
unknown
import "@total-typescript/ts-reset/json-parse";JSON.parse戻ると、厄介で微妙なバグが発生する可能性があります。率直に言って、 は記述する値の型チェックを無効にするため、バグを引き起こす可能性があります。
any
any
// BEFORE
const result = JSON.parse("{}"); // anyの結果をに変更することで、 を検証して正しい型であることを確認するか (おそらく zod を使用)、 でキャストする必要があります。
JSON.parse
unknown
unknown
as
// AFTER
import "@total-typescript/ts-reset/json-parse";
const result = JSON.parse("{}"); // unknown返品する.json()
unknown
import "@total-typescript/ts-reset/fetch";と同様に、return はアプリケーション コードに不要な ' を導入します。
JSON.parse
.json()
any
any
// BEFORE
fetch("/")
.then((res) => res.json())
.then((json) => {
console.log(json); // any
});強制的に戻ることで、その結果を信用しないように促され、の結果を検証する可能性が高くなります。
res.json
unknown
fetch
// AFTER
import "@total-typescript/ts-reset/fetch";
fetch("/")
.then((res) => res.json())
.then((json) => {
console.log(json); // unknown
});偽の値を除外する.filter(Boolean)
import "@total-typescript/ts-reset/filter-boolean";のデフォルトの動作はかなりイライラすることがあります。以下のコードがあるとします。
.filter
// BEFORE
const filteredArray = [1, 2, undefined].filter(Boolean); // (number | undefined)[]TypeScriptがあなたがからフィルターで除外したことを理解する必要があるのは自然なことです。この作業を行うことはできますが、型述語としてマークする必要があります。
undefined
filteredArray
const filteredArray = [1, 2, undefined].filter((item): item is number => {
return !!item;
}); // number[]使用はこれのための本当に一般的な省略形です。したがって、このルールは、渡された配列の型述語のように機能し、配列メンバーから偽の値を削除します。
.filter(Boolean)
.filter(Boolean)
// AFTER
import "@total-typescript/ts-reset/filter-boolean";
const filteredArray = [1, 2, undefined].filter(Boolean); // number[]配列の厳密さを緩和する.includes
as const
import "@total-typescript/ts-reset/array-includes";このルールは、TypeScript のデフォルトの動作を改善します。このルールが有効になっていない場合、渡される引数は、テスト対象の配列のメンバーである必要があります。
.includes
.includes
// BEFORE
const users = ["matt", "sofia", "waqas"] as const;
// Argument of type '"bryan"' is not assignable to
// parameter of type '"matt" | "sofia" | "waqas"'.
users.includes("bryan");これはしばしば非常に厄介に感じることがあります。ただし、ルールを有効にすると、配列内のリテラルの拡大バージョンが取得されるようになりました。
.includes
const
// AFTER
import "@total-typescript/ts-reset/array-includes";
const users = ["matt", "sofia", "waqas"] as const;
// .includes now takes a string as the first parameter
users.includes("bryan");これは、アレイの非メンバーを安全にテストできることを意味します。
また、型述語を作成するため、より広い型を集合列挙型に絞り込むために使用できます。
.includes
import "@total-typescript/ts-reset/array-includes";
const users = ["matt", "sofia", "waqas"] as const;
const isUser = (input: string) => {
if (users.includes(input)) {
// input is narrowed to "matt" | "sofia" | "waqas"
console.log(input);
}
};厳格さを緩和するSet.has()
import "@total-typescript/ts-reset/set-has";と同様に、セットに存在しないメンバーを渡すことはできません。
.includes
Set.has()
// BEFORE
const userSet = new Set(["matt", "sofia", "waqas"] as const);
// Argument of type '"bryan"' is not assignable to
// parameter of type '"matt" | "sofia" | "waqas"'.
userSet.has("bryan");ルールを有効にすると、はるかにスマートになります。
Set
// AFTER
import "@total-typescript/ts-reset/set-has";
const userSet = new Set(["matt", "sofia", "waqas"] as const);
// .has now takes a string as the argument!
userSet.has("bryan");から削除するany[]
Array.isArray()
import "@total-typescript/ts-reset/is-array";を使用すると、アプリのコードに微妙な を導入できます。
Array.isArray
any
// BEFORE
const validate = (input: unknown) => {
if (Array.isArray(input)) {
console.log(input); // any[]
}
};有効にすると、このチェックは値を次のようにマークします。
is-array
unknown[]
// AFTER
import "@total-typescript/ts-reset/is-array";
const validate = (input: unknown) => {
if (Array.isArray(input)) {
console.log(input); // unknown[]
}
};追加しないルール
Object.keys
/Object.entries
一般的な質問は、 の代わりに を返すように、 の「より良い」タイピングを提供することです。についても同じです。 これを変更するルールは含まれません。
Object.keys
Array<keyof T>
Array<string>
Object.entries
ts-reset
TypeScript は構造的な型付けシステムです。この影響の 1 つは、TypeScript がオブジェクト型に過剰なプロパティが含まれていないことを常に保証できるとは限らないことです。
type Func = () => {
id: string;
};
const func: Func = () => {
return {
id: "123",
// No error on an excess property!
name: "Hello!",
};
};したがって、返すための唯一の合理的な型は です。
Object.keys
Array<string>
などのジェネリックJSON.parse
Response.json
一般的な要求は、次のような関数に型引数を追加することです。
ts-reset
JSON.parse
const str = JSON.parse<string>('"hello"');
console.log(str); // stringこれは、から返されるものにオートコンプリートを与えることでDXを改善するようです。
JSON.parse
しかし、これはコンパイラにとって嘘であり、安全ではないと主張します。
JSON.parse検証境界 (不明なデータがアプリケーション コードに入る可能性がある場所) を表します。
fetch
からどのデータが返されるのかが本当にわかっている場合は、アサーションが正しい呼び出しのように感じます。
JSON.parse
as
const str = JSON.parse('"hello"') as string;
console.log(str); // stringこれにより、意図した型が提供され、これが少し安全ではないことを開発者に通知します。
