TypeScript 5.0 で追加された verbatimModuleSyntax とは何か？
// A: そのまま残る import { Foo } from "./foo"; // B: 識別子 `Foo` が削除される import {} from "./foo"; // C: import 文ごと完全に削除される どれになるかは、以下の状態の組み合わせ依存する（他にも条件あるかも）。 そのファイルでFooが値として参照されるか、型として参照されるか、参照されないか Fooがfoo.tsで値として定義されているか、型として定義されているか tsconfig のオプション設定 importsNotUsedAsValues: 値として参照されない import 文を残すかどうか preserveValueImports: 参照されない import 識別子が値なら残す isolatedModules: ファイル単位でトランスパイルする 上記は出力するモジュール形式が ESM の場合
TypeScript's Migration to Modules - TypeScript
One of the most impactful things we’ve worked on in TypeScript 5.0 isn’t a feature, a bug fix, or a data structure optimization. Instead, it’s an infrastructure change. In TypeScript 5.0, we restructured our entire codebase to use ECMAScript modules, and switched to a newer emit target. What to Know Now, before we dive in, we want to set expectations. It’s good to know what this does and doesn’t m
Typescript Runtime Validators and DX, a type-checking performance analysis of zod/superstruct/yup/typebox
Typescript Runtime Validators and DX, a type-checking performance analysis of zod/superstruct/yup/typebox Preface In 2023, Typescript is rarely questioned as an important tool for modern JavaScript developers, but one of its biggest limitations is the lack of added runtime type safety, particularly when dealing with IO at the boundaries of your application. To solve this problem a number of popula
TypeScript における型の集合性と階層性
宣伝 (本を作成しました) この記事についての発展的研究内容を以下の本としてまとめました。この記事を読んで興味が湧いたら、ぜひ読んでみてください。 はじめに 前回の記事 では TypeScript における型の拡大 (Widening) について解説しました。Narrowing の記事を書く前に (Widening を深く理解するためにも) 必要な知識や考え方がいくつかあると思ったので、今回は型の集合性と階層性について見ていきたいと思います (短いですが内容的に切り出してもかなり興味深いので)。 この記事の最後で別の型の変数同士で代入できるかどうかを示す「Assignability (代入可能性あるいは割当可能性)」について解説しますが、集合と階層の概念で考えることで見通しが非常によくなり、型一般についてもスッキリと理解できることが多くなります。また、never や unknown といっ
TypeScript blog
@captain-yossarian TypeScript blog, fully dedicated to static typings and type safety
eslint-cjs-to-esm: CJSをESMへとマイグレーションするツールを書いた
最近、色々なライブラリをCommonJS(CJS)からECMAScript Module(ESM)へとマイグレーションしています。 その際に、ESMでは__dirnameやrequireなどCommonJS特有の機能は使えなくなっています。 また、TypeScriptやBabelなど多くのツールはCJSではimport時に拡張子はなくても大丈夫ですが、ESMの場合はimport時に拡張子が必要になります。 import url from "node:url"; - import { mdEscape } from "./mdEscape"; + import { mdEscape } from "./mdEscape.js"; // ESMでは相対パスに拡張子は省略できない + const __filename = url.fileURLToPath(import.meta.url); /
`*.d.ts` ファイルをコミットする前に知ってほしい4つのこと
export type Bookmark = { id: number; url: string; comment: string; }; このファイルには型しか書いてありませんね。ということは、「型定義ファイル」として bookmark.d.ts という名前にするべきでしょうか。実はそうではなく、この場合は bookmark.ts とするべきです。 「型定義ファイル」とは、「どこか別の場所にある実装に型をつけるためのファイル」です。たとえば、以下のファイルは「どこか別の場所にある実装」に型をつけているから、 *.d.ts にするのは自然です。 いっぽう、 type Bookmark は別のどこかにある *.js の型を与えているわけではないので、 *.ts でよいです。 このように本来 *.ts であるべきものを *.d.ts にしてしまうことには問題があります。代表的な問題として型エラ
TypeScript 4.9のas const satisfiesが便利。型チェックとwidening防止を同時に行う
TypeScript 4.9 から、satisfies operator が使えるようになりました。従来のas constと組み合わせ、型チェックと widening 防止を同時に行えます。筆者的には、"顧客が本当に必要だったもの"です。 本記事では satisfies とは何か？ as const とは何か？ 2つを組合わせるとどのようなメリットがあるのか？ について、実際のコードと共に解説します。 結論 TypeScriptで 定数を export する場合は、as const satisfies を設定しておくと便利です。 export const myName = "田中" as const satisfies string; export const foodList = { ramen: "ラーメン", udon: "うどん", soba: "そば" } as const sa
Prisma Client Just Became a Lot More Flexible: Prisma Client Extensions (Preview)
Prisma Client extensions (in Preview) enable many new use cases. This article will explore various ways you can use extensions to add custom functionality to Prisma Client. Table Of Contents Introduction Using Prisma Client extensions The components of an extension Sharing an extension Sample use cases Example: Computed fields Example: Transformed fields Example: Obfuscated fields Example: Instanc
How TypeScript 4.9 `satisfies` Your Prisma Workflows
December 01, 2022 How TypeScript 4.9 `satisfies` Your Prisma Workflows TypeScript's new satisfies operator allows some new, type-safe patterns that previously required lengthy type annotations or tricky workarounds. This article covers several use cases where it helps you with common Prisma-related workflows. Table Of Contents A little background Constrained identity functions Introducing satisfie
コードジャンプ可能な CSS Modules を実現する happy-css-modules の紹介 - mizdra's blog
弊社では React で CSS を書くための手法として CSS Modules を全面的に採用しています。そこで CSS Modules を使った開発をより快適にするために、「happy-css-modules」というツールを作りました。 happy-css-modules のデモ。 この記事ではこのツールが必要になった背景、導入方法、そしてツールの技術的な仕組みについて紹介します。 CSS Modules の問題点と、typed-css-modules による解決 CSS Modules では、デフォルトでは存在しないクラス名を使用しても、(プロジェクトの設定次第ですが) TypeScript のコンパイルエラーが出ることはありません。 import styles from './Button.module.css'; function Button() { return ( <but
How to build, test, and publish a TypeScript npm package in 2022
How to build, test, and publish a TypeScript npm package in 2022 In this article, we will build and publish an NPM package from scratch using TypeScript and Jest for testing. We will initiate the project, set up TypeScript, write tests with Jest, and publish it to NPM. Our project Our simple library is called digx. It allows "digging" values from nested objects by path (it's similar to lodash get)
Ten Years of TypeScript - TypeScript
Today is TypeScript’s birthday! But this birthday is a special one – 10 years ago today, on October 1st, 2012, TypeScript was unveiled publicly for the first time. The Early Days When TypeScript first debuted, there was a lot of skepticism – and understandably so. To some JavaScript users, a team trying to bring static types to JavaScript might have sounded like an evil plot or a joke. But the fea
Introducing Ezno
Introducing EznoPublished on Thursday 22nd September 2022 Ezno is an experimental compiler I have been working on and off for a while. In short, it is a JavaScript compiler featuring checking, correctness and performance for building full-stack (rendering on the client and server) websites. This post is just an overview of some of the features I have been working on which I think are quite cool as
Typescript’s new ‘satisfies’ operator
The satisfies operator has arrived in Typescript 4.9. This article explains the purpose of the new keyword, illustrated by detailed, runnable code examples. satisfies : The basicsPutting satisfies T after an expression asks the compiler to check your work. You will get helpful compiler errors if the expression doesn’t fulfil the requirements of type T. However, its not the same as assigning to a t
TypeScriptの型と実態がズレるとき、型付けにどう向き合っていくか
はじめに こんにちは！株式会社マイベストでフロントエンドエンジニアを担当している おぎー と言います！ この記事ではTypeScriptの型と実行時の値が噛み合わなくなる話と、型付けへの向き合い方についてお話できたらと思います。 TypeScriptの型付けについて 型があるメリットとは TypeScriptは静的型付け言語です。プログラムを実行せずともコンパイルの段階で型の噛み合わないコードを発見することができます。このおかげで実行するコードは一定品質を担保されている状態を保ちやすい作りになっていると言えます。 またVS Codeをはじめとした開発用エディタではリアルタイムに型チェックしてくれるため、間違った記述にいち早く気づき修正することができます。 これらを踏まえると、素早く一定の品質を保たれたコードを作れることがポイントになるかなと思います。 型と実態がズレるとは TypeScri
Typescript is terrible for library developers
I love typescript as an end-developer. I feel like it dramatically reduces the need to manually write automated tests. It cannot be overstated how much work is involved with writing and maintaining good automated tests so anything that can reduce its utility is a huge boon to productivity. However, as a library developer, I hate typescript. There are a lot of reasons why typescript sucks for libra
TypeScriptのexhaustiveness checkをスマートに書く
TypeScriptではデザインパターンとしてtagged unionによる直和がよく使われます。このときパターンマッチに相当する処理はswitchで行われますが、そこで直和に対する分岐が網羅的であることの保証を実行時と型検査時の両方で賢く行う方法がこれまでも模索されてきました。 今回、ヘルパー関数を導入せずにいくつかの問題を同時に解決する賢い方法を思い付いたので共有します。 コード これだけです。 // switch (action.type) { ... default: throw new Error(`Unknown type: ${(action as { type: "__invalid__" }).type}`); // .. } 以下、より詳しく説明します。 問題 TypeScriptではオブジェクトに type プロパティーを用意し、決まった文字列を入れることで直和を実現
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Improved type safety in Storybook 7
Announcing the Official TypeScript Types Public Preview