明日から使えるTypeScriptの応用テクニックその3 -Polymorphic Component編-
前回の記事の続きです。 前回までは、その1でMapped TypesとConditional Typesを、その2でDiscriminated Union TypeとUnion Distributionを見ていきました。 実をいうと本当に書きたかったのは、本稿の「Reactとそのデザインシステムの実装における型定義」という話でした。しかし、そのための前提がいっぱいあって、三部作という長編になってしまいました。 つまり、ここからが本題です。 前段のTypeScriptのテクニックを活かして、まずButtonのコンポーネントを作っていきます。また、Polymorphic Componentというコンポーネントの汎用性を上げるテクニックを取り上げます。最後に、デザインシステムの実装、共通コンポーネントのインターフェースの設計について簡単に触れて終わります。 TypeScriptで型安全にReac
TypeScript プロジェクトのコンパイル時間を改善してみた話
TypeScript プロジェクトのコンパイルのボトルネックを調査・解消してみた話 はじめに こんにちは。エンジニアの辻󠄀です。 私は社内のとある TypeScript プロジェクトで開発業務を行っていました。 ある日、新たに関数の実装を追加しようとしたその時、tsserver（TypeScript の language server）による補完候補がなかなか表示されないことに気づいたのです。 どうやら、コンパイルの時間が非常に長くなっていたことが原因のようです。 この記事では、tsc のコンパイルにおけるボトルネックを調査する方法と、そこで適用した２つの改善方法について紹介します。 コンパイル時間が低下する原因はプロジェクトの性質によって大きく異なるため、ここで述べる改善方法が任意のプロジェクトに有効だとは言えませんが、少なくとも調査方法については役に立つのではないかと思います。 ボト
MantineのuseFormでzodを活用する場合のtips
MantineのuseFormでzodを活用して開発をする中で、注意点や便利な活用方法を記事にします。 transformValuesでparse（) useFormでzodを活用する場合は、基本的に毎回useFormで以下のコードを入れるようにしています。 parseを行うことで、不要な値が削除された結果が返却されます。 stripはschemaにstrictを付与していた場合でも、結果を返却するデフォルトの挙動に戻すオプションです。 strictだと不要な項目がある場合はエラーとして扱われます。 これの恩恵を受けるのは具体的に2点あります。 不要な項目をリクエストに設定しない trimなどが反映された状態になる １点目に関して、useFormのinitialValuesにはAPIで取得したデータ（それを画面用に変換したもの）を設定することが多いと思いますが、必ずしもその全てを更新リクエ
【日本語訳】nitrogql 1.1リリース: hello type-safe resolvers!
この記事は、昨日公開された次の記事の日本語訳です。nitrogql 1.1がリリースされresolver向けの型生成機能が使えるようになり、nitrogqlだけでサーバー側とクライアント側両方を型安全に書けるようになりました。元記事はこちらです。 本日、nitrogql 1.1をリリースしました！ nitrogqlはTypeScriptプロジェクトでGraphQLを使うためのツールチェインです。1.1では、resolver向けの型定義の生成機能を追加しました。これにより、nitrogqlを使うことでクライアント側とサーバー側の両方で型安全にGraphQLを使うことができるようになりました。 nitrogql 1.1の新機能 nitrogql 1.1では、1.0の機能に加えて新たに2つのTypeScriptファイルを生成できるようになりました。 Resolverの型定義ファイルは、実装すべき
GitHub - aerotoad/neboa: Type-safe NoSQL with Node & SQLite. 🌫️💽
Neboa (pronounced /ˈnɛβo̯a̝/, from Galician: «fog») is a simple, yet powerful, type-safe NoSQL database library for Node.js. It offers seamless data management with compile-time type-checking for enhanced reliability. Leveraging SQLite, Neboa ensures efficient and lightweight performance, making it perfect for Electron and other platforms. With its unique approach, Neboa empowers you to use a rela
TypeScriptプロジェクトにスキーマ駆動開発を持ち込み、より型安全な世界へ - Sansan Tech Blog
Bill One Entry*1グループの秋山です。 本題に入る前にお知らせです。9/12 (火) にTypeScriptを活用した型安全なチーム開発をテーマとしたイベントを開催します。 ぜひ、お気軽にご参加ください！ sansan.connpass.com 1. はじめに 1-1. スキーマ駆動開発とは 1-2. Testing Trophyとの関係性 2. 構成 2-1. 最初の構成と課題 2-2. 最終的な構成 3. バックエンド 3-1. スキーマから型ファイルを作る 3-2. APIハンドラに型を与える 3-3. バリデーターを追加する 3-4. huskyでスキーマ変更を検知する 4. フロントエンド 4-1. スキーマからAPIクライアントを作る 5. パターンマッチングを持ち込む 6. まとめ 1. はじめに 1-1. スキーマ駆動開発とは 詳しい解説は他の記事に譲り、一言
実演TypeScript + GitHub Copilot
TypeScript + GitHub Copilot 最高！っていうのを話しました（+デモ）
TypeScriptのmoduleオプションの話、あるいはTypeScript開発者の苦悩、あるいはCJSとESMの話
皆さんこんにちは。早速ですが、TypeScriptのmoduleオプションはご存じでしょうか。moduleオプションは、例えば次のような値をサポートしています。 commonjs umd es2015 esnext node16 nodenext 皆さんは、moduleオプションが何を設定するオプションなのか一言で説明できますか？ 実は、TypeScriptの熟練者であってもmoduleオプションを一言で説明することは難しいはずです。なぜなら、そもそもこのmoduleオプションが複数の異なる意味で使われており、もはや一言で説明できるようなものではなくなってしまったからです。 この記事では、TypeScriptのメンテナーが書いた次のGitHub issueをベースに、moduleオプションを取り巻く状況を説明します。 moduleオプションの意味とは 昔はmoduleオプションの意味は明確
空でない配列を型で表現する正しい方法【TypeScript】
{ 0: T }という型は「0番目の要素がT型であり、必ず存在する」ことを表します。 配列はオブジェクトでもあり、オブジェクトのプロパティ名に数値も使えるというTypeScriptの言語仕様を巧みに活かした型定義です。 しかしこの型定義ではスプレッド構文を使うと「空でない」という情報が型から消えてしまいます。 例えば次のように配列のシャローコピーを作ると型から{ 0: T }の部分が消えます。 type NonEmptyArray<T> = T[] & { 0: T } // ↓string[]型になる😥 NonEmptyArray<string>型にはならない type Spreaded = [...NonEmptyArray<string>] const array: NonEmptyArray<string> = ['a', 'b'] // ↓型エラーになってしまう😥 [...a
【NextAuth.js 入門】認証機能から認証情報によるページの表示制御を学ぶ（Next.js & Typescript）
【NextAuth.js 入門】認証機能から認証情報によるページの表示制御を学ぶ（Next.js & Typescript） アプリケーションを開発するにあたって、避けて通れないのが認証機能の実装です。 本書籍では、NextAuth.js を使って Next.js で作成したアプリケーションに認証機能を実装していきます。さらに、認証情報を使って、表示するページの制御も行います。 認証情報によるページの表示制御にはいくつか方法がありますが、本書籍では NextPage 型を拡張した CustomNextPage 型を作成することによって、ページの表示制御を実現します。 一緒に NextAuth.js による認証機能を学んでいきましょう。
TypeScript の DI 手法あれこれ - Object.create(null)
TypeScript で DI (依存性注入) するためのライブラリを作ったんですが, それを紹介する前に既存手法をまとめておいた方が説明が楽だなと思ったのでまとめておきます. そもそも DI の目的とは, みたいなところは詳しく説明しないのであしからず. 手法の比較 DI なし Service Locator エフェクト Constructor Injection Setter Injection デコレータ typed-inject 次回予告 手法の比較 DI なし まずは DI を使わない場合を見ていきましょう. ここでは例として, 以下のような時刻と乱数を必要とするコンポーネント MyService が, 時刻と乱数を扱う機能をそれぞれ提供するコンポーネント Clock と Random に依存するような場合を考えます. type Clock = { getTime: () =>
TypeScript 本体のコードを読んでみよう
みんなお世話になっている TypeScript のコードを読みたいと思ったことはないだろうか。読んだ。 一週間ぐらいかかった。完全に読み切ったとは言えないが、概要は掴んだ。 なかなかに複雑でドメイン知識を得るのが難しかったので、これから読む人向けに、登場人物や概念を整理して紹介したい。 読んだのは 2023/6/8 時点で git clone したコード。 最初に: 自分のゴール設定 複数ファイルにまたがった参照を、 TypeScript の Language Service が提供する findReferences() や findRenameLocations(), goToDefinitions() を使って、インクリメンタルに書き換えたかった。 Terser を使うと、今触ってるオブジェクトが何で、何のメンバを書き換えたかの情報が残らない。これを TypeScript のレイヤーで
Thinking in React Query
Thinking in React Query07.06.2023 — ReactJs, React Query, Talk, TypeScript, JavaScript — 1 min read #1: Practical React Query#2: React Query Data Transformations#3: React Query Render Optimizations#4: Status Checks in React Query#5: Testing React Query#6: React Query and TypeScript#7: Using WebSockets with React Query#8: Effective React Query Keys#8a: Leveraging the Query Function Context#9: Place
TypeScriptで"moduleResolution": "Node"は使わないほうがいい - blog.s2n.tech
はじめに タイトルは若干煽りですが、TS 5.0 でBundlerという設定値が追加されたため、Nodeを使う場面はほぼ無くなったと思います。今回は Node.js と TypeScript のモジュール解決の仕組みについて、moduleResolutionというオプションの観点から解説します。この記事を書くにあたって実際に動作確認は行っていますが、もしも間違っているところがあればご指摘いただけると幸いです。 なお、 Node.js LTS v18、TypeScript v5.0 時点での情報です。今後のバージョンアップにて変更がある可能性があります。 TL;DR "moduleResolution": "Node"は使わないほうがいい おそらく求めているものはBundler tsc をビルドツールとして使用している場合はNode16 / NodeNextがベスト Nodeを使う場合でもN
アプリケーションコードに変更を加えないNode.js Native ESMへの移行
LINE株式会社は、2023年10月1日にLINEヤフー株式会社になりました。LINEヤフー株式会社の新しいブログはこちらです。 LINEヤフー Tech Blog はじめに こんにちは。フロントエンド開発センター(UIT) Front-end Dev.9チームの鴻巣(@kazushikonosu)です。LINEスキマニおよびLINE Creators Marketのフロントエンド開発を担当しています。 LINEスキマニのフロントエンドチームでは、React/TypeScript製のWebアプリを開発しています。主にクライアントサイド向けのコードを扱っていますが、SSRのため同じリポジトリ内でNode.jsを使って実行されるTypeScriptコードも扱っています。クライアントサイドのモジュールバンドラとして長らくwebpackが使われていましたが、webpackを使い続けることでチームの
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
GitHub - oxc-project/oxc: ⚓ A collection of high-performance JavaScript tools.
GitHub - arktypeio/arktype: TypeScript's 1:1 validator, optimized from editor to runtime
はんずおんVitest
GitHub - gibbok/typescript-book: The Concise TypeScript Book: A Concise Guide to Effective Development in TypeScript. Free and Open Source.
GitHub - azat-io/eslint-plugin-perfectionist: ☂️ ESLint plugin for sorting various data such as objects, imports, types, enums, JSX props, etc.
