🥺

TypeScriptでCSSの単位を型安全に相互変換する_2

2021/07/22に公開

https://www.npmjs.com/package/@karibash/pixel-units

設計の大幅な見直し

以前作成したライブラリとある記事を参考に、クラスに依存しない設計へと大幅に改修を加え作り直しました。
インスタンス化が不要になったのでパフォーマンスもたぶん上がってると思います。しらんけど。

// old
const pixel = new Pixel(16);
console.log(`${pixel}`}
// -> 16px

// new
const pixel: Unit<'px'> = '16px';
console.log(pixel);
// -> 16px

変換処理の単純化

convertUnits関数で全ての単位を相互に変換出来るようにしました。

// old
const centimeter = (new Pixel(16)).toCentimeter();
// -> "0.4233333333333334cm"

// new
const centimeter = convertUnits('16px', 'cm');
// -> "0.4233333333333334cm"

数値と単位を抽出

splitUnitValue関数を用いる事で数値と単位を抽出出来ます。

const { value, unitSuffix } = splitUnitValue('16px');
console.log({ value, unitSuffix });
// -> { value: 16, unitSuffix: "px" }

Discussion