ts-reset 入れてね

自己紹介

ts-reset 知ってる人

知ってた人は...

Twitter でもやっといて

TypeScript で開発していて

こんな経験ありませんか？

.filter(Boolean)で推論が効かない

const array = [1, 2, null, 4, undefined, 6, 7];

const filteredArray = array.filter(Boolean);
// filteredArray: (number | null | undefined)[]

TypeScript v5.5 以降では解消済み

.includes() が厳しすぎる

const array = [1, 2, 3] as const;

array.includes(4);
//            ^^^
// Argument of type 'number' is not assignable to
// parameter of type '1 | 2 | 3'.

.includes() が厳しすぎる

export const MyType = {
  Hoge: 1,
  Fuga: 2,
} as const;
export type MyType = typeof MyType[keyof typeof MyType];

export function isMyType(v: number): v is MyType {
  return Object.values(MyType).includes(v);
  //                                   ^^^
  // Argument of type 'number' is not assignable to
  // parameter of type '1 | 2'.
}

json が any になる

const obj = JSON.perse('{}');
// obj: any 

fetch('/')
  .then((res) => res.json())
  .then((json) => {
    console.log(json); // json: any 
  });

ts-reset とは

A 'CSS reset' for TypeScript, improving types for common JavaScript API's

TypeScript用の「CSSリセット」、一般的なJavaScript APIの型を改善するもの。

Get Started

$ npm i -D @total-typescript/ts-reset

import "@total-typescript/ts-reset";

.filter(Boolean)で推論が効いた！

import "@total-typescript/ts-reset";

const array = [1, 2, null, 4, undefined, 6, 7];

const filteredArray = array.filter(Boolean);
// filteredArray: number[]

.includes() が優しくなった！

import "@total-typescript/ts-reset";

const array = [1, 2, 3] as const;

array.includes(4);
// false 

.includes() が優しくなった！

import "@total-typescript/ts-reset";

export const MyType = {
  Hoge: 1,
  Fuga: 2,
} as const;
export type MyType = typeof MyType[keyof typeof MyType];

export function isMyType(v: number): v is MyType {
  return Object.values(MyType).includes(v);
  // エラーなし 
}

json が unknown になった！

import "@total-typescript/ts-reset";

const obj = JSON.perse('{}');
// obj: unknown 

fetch('/')
  .then((res) => res.json())
  .then((json) => {
    console.log(json); // json: unknown 
  });

個別のルール適応も可能

import '@total-typescript/ts-reset/array-includes';
import '@total-typescript/ts-reset/filter-boolean';

ADR 書こう

ts-reset 入れてね。