Product
Introducing Socket Optimize
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.
@total-typescript/ts-reset
Advanced tools
A CSS reset for TypeScript, improving types for common JavaScript API's
ts-reset
ts-reset
acts like a CSS reset for TypeScript. It improves typings for JavaScript API's like fetch
, JSON.parse
and .filter()
, making them safer and smarter.
// 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
});
Install: npm i @total-typescript/ts-reset
Import once into any .ts
or .tsx
file:
import "@total-typescript/ts-reset";
By importing from @total-typescript/ts-reset
, you're bundling all the recommended rules.
To only import the rules you want, you can import like so:
// 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";
Below is a full list of all the rules available.
ts-reset
in applications, not librariests-reset
is designed to be used in application code, not library code. Each rule you include will make changes to the global scope. That means that, simply by importing your library, your user will be unknowingly opting in to ts-reset
.
JSON.parse
return unknown
import "@total-typescript/ts-reset/json-parse";
JSON.parse
returning any
can cause nasty, subtle bugs. Frankly, any any
's can cause bugs because they disable typechecking on the values they describe.
// BEFORE
const result = JSON.parse("{}"); // any
By changing the result of JSON.parse
to unknown
, we're now forced to either validate the unknown
to ensure it's the correct type (perhaps using zod
), or cast it with as
.
// AFTER
import "@total-typescript/ts-reset/json-parse";
const result = JSON.parse("{}"); // unknown
.json()
return unknown
import "@total-typescript/ts-reset/fetch";
Just like JSON.parse
, .json()
returning any
introduces unwanted any
's into your application code.
// BEFORE
fetch("/")
.then((res) => res.json())
.then((json) => {
console.log(json); // any
});
By forcing res.json
to return unknown
, we're encouraged to distrust its results, making us more likely to validate the results of fetch
.
// AFTER
import "@total-typescript/ts-reset/fetch";
fetch("/")
.then((res) => res.json())
.then((json) => {
console.log(json); // unknown
});
.filter(Boolean)
filter out falsy valuesimport "@total-typescript/ts-reset/filter-boolean";
The default behaviour of .filter
can feel pretty frustrating. Given the code below:
// BEFORE
const filteredArray = [1, 2, undefined].filter(Boolean); // (number | undefined)[]
It feels natural that TypeScript should understand that you've filtered out the undefined
from filteredArray
. You can make this work, but you need to mark it as a type predicate:
const filteredArray = [1, 2, undefined].filter((item): item is number => {
return !!item;
}); // number[]
Using .filter(Boolean)
is a really common shorthand for this. So, this rule makes it so .filter(Boolean)
acts like a type predicate on the array passed in, removing any falsy values from the array member.
// AFTER
import "@total-typescript/ts-reset/filter-boolean";
const filteredArray = [1, 2, undefined].filter(Boolean); // number[]
.includes
on as const
arrays less strictimport "@total-typescript/ts-reset/array-includes";
This rule improves on TypeScript's default .includes
behaviour. Without this rule enabled, the argument passed to .includes
MUST be a member of the array it's being tested against.
// 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");
This can often feel extremely awkward. But with the rule enabled, .includes
now takes a widened version of the literals in the const
array.
// 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");
This means you can test non-members of the array safely.
It also makes .includes
a type predicate, meaning you can use it to narrow wider types to a set enum:
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);
}
};
any[]
from Array.isArray()
import "@total-typescript/ts-reset/is-array";
When you're using Array.isArray
, you can introduce subtle any
's into your app's code.
// BEFORE
const validate = (input: unknown) => {
if (Array.isArray(input)) {
console.log(input); // any[]
}
};
With is-array
enabled, this check will now mark the value as unknown[]
:
// AFTER
import "@total-typescript/ts-reset/is-array";
const validate = (input: unknown) => {
if (Array.isArray(input)) {
console.log(input); // unknown[]
}
};
0.2.0
FAQs
A CSS reset for TypeScript, improving types for common JavaScript API's
The npm package @total-typescript/ts-reset receives a total of 353,084 weekly downloads. As such, @total-typescript/ts-reset popularity was classified as popular.
We found that @total-typescript/ts-reset demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
We're excited to introduce Socket Optimize, a powerful CLI command to secure open source dependencies with tested, optimized package overrides.
Product
We're excited to announce that Socket now supports the Java programming language.
Security News
Socket detected a malicious Python package impersonating a popular browser cookie library to steal passwords, screenshots, webcam images, and Discord tokens.