typeとinterfaceって結局どう使い分ければ良いの？
TypeScriptではtype alias syntax（型エイリアス構文）とinterface declaration（インターフェース宣言）を使って型を定義できます。 おおよそ両者同じことができるので、どちらを使うか迷います。 両者の使い分けに関する記事は沢山あります。 これらの記事を読んで基本的にはtypeを使えば良いと思っていました。 ですが最近以下のことがあり、typeとinterfaceの使い分けがわからなくなってしまいました。 typeよりもinterfaceの方がコンパイルのパフォーマンスが良いという話を耳にした。 interfaceしか使えない特定の機能を知った。 そこでtypeとinterfaceの違いを学んで、どう使い分ければよいかを整理しました。 type, interfaceそれぞれのメリット typeのメリット interfaceで表現できないことが表現できる
monorepo で開発時にパッケージの変更を build なしで他のパッケージに反映する方法
{ "name": "lib-a", "version": "0.0.0", "type": "module", "main": "dist/index.js", "scripts": { "build": "rm -rf dist && tsc" } } この場合、lib-a の src/index.ts を変更だけしても lib-b には反映されません。なぜなら lib-b は lib-a の dist/index.js を参照しているため、build を実行して dist ディレクトリの中を更新する必要があるからです。 またこのときに tsserver の機能を使って lib-b から lib-a の参照にジャンプしても src/index.ts に飛ばないという問題点もあります。 解決策 問題の原因は依存元の lib-a の main に build によって生成されるファイルへの
明日から使えるTypeScriptの応用テクニックその3 -Polymorphic Component編-
前回の記事の続きです。 前回までは、その1でMapped TypesとConditional Typesを、その2でDiscriminated Union TypeとUnion Distributionを見ていきました。 実をいうと本当に書きたかったのは、本稿の「Reactとそのデザインシステムの実装における型定義」という話でした。しかし、そのための前提がいっぱいあって、三部作という長編になってしまいました。 つまり、ここからが本題です。 前段のTypeScriptのテクニックを活かして、まずButtonのコンポーネントを作っていきます。また、Polymorphic Componentというコンポーネントの汎用性を上げるテクニックを取り上げます。最後に、デザインシステムの実装、共通コンポーネントのインターフェースの設計について簡単に触れて終わります。 TypeScriptで型安全にReac
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 の 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ではじめるChatGPT API：入門から一歩進んだテクニックまで - Uzabase for Engineers
NewsPicks エンジニアの中村です。普段はデータ基盤や機械学習システムの開発、運用をやっています。 さて皆さん、すでにChatGPTは使っていらっしゃるでしょうか。エンジニア、非エンジニアを問わず世の中を席巻している感のある ChatGPT ですが、今月初めにいよいよ API も公開されて、アプリケーションやサービスに組み込みたいと考えている方も多いのではないでしょうか1。 というわけで、弊社でもこの新しい技術をより多くのエンジニアに使いこなせるようになってもらいたいと考え、ChatGPT API に関する社内勉強会を先日開催しました。本記事ではこの勉強会の内容を再構成してお届けします。 とりあえず使うだけなら簡単な ChatGPT ですが、本記事では、長文を扱ったり、ChatGPT と外部のシステムを連携させたりするテクニックなど、知っている人はすでに知っているが、まだそれほど広く
TypeScriptでスネークケース🐍←→キャメルケース🐪に変換する型を定義する。理解する。
type SnakeToCamelCase<T extends string> = T extends `${infer R}_${infer U}` ? `${R}${Capitalize<SnakeToCamelCase<U>>}` : T type SnakeToCamel<T extends object> = { [K in keyof T as `${SnakeToCamelCase<string & K>}`]: T[K] extends object ? SnakeToCamel<T[K]> : T[K] } type SnakeUser = { user_name: string, is_married: boolean, } type CamelUser = SnakeToCamel<SnakeUser> // type CamelUser = { // userNam
Design Patterns in TypeScript
Lets you construct complex objects step by step. The pattern allows you to produce different types and representations of an object using the same construction code.
Build strongly typed polymorphic components with React and TypeScript - LogRocket Blog
In this detailed (and explanatory) guide, I’ll discuss how to build strongly typed polymorphic React components with TypeScript. We’ll cover the following sections: Real-world examples of polymorphic components Chakra UI’s as prop MUI’s component prop Building a simple polymorphic component Problems with this simple implementation The as prop can receive invalid HTML elements Wrong attributes can
TypeScript + styled-components で Theme に型をつける - Qiita
概要 styled-components では <ThemeProvider> を用いることで、プロジェクト全体で使用するカラーコードの Theme を取り扱うことができます。 https://www.styled-components.com/docs/advanced#theming この記事ではこの Theme に対して独自の型を定義する方法を紹介します。 環境 react@16.9.0 typescript@3.5.3 styled-components@4.3.2 @types/styled-components@4.1.18 リポジトリ 方法 styled-components モジュール内部の DefaultTheme という interface に対して型をつけることで目的を達成できます。 この方法は @types/styled-components のコメントで言及されて
`*.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 にしてしまうことには問題があります。代表的な問題として型エラ
ReactのComponentProps型を使って不要なPropsとお別れしよう！！ | Reactおじさんブログ
ReactのComponentProps型を使って不要なPropsとお別れしよう！！2022-10-202022-10-21 どうもReactおじさんです。 ブログをリリースして満足していましたが、記事を執筆しないと価値が無くなってしまうので、だらけずにアプトプットしていこうと思います。 今回は汎用コンポーネントの作り方です。 一般的な汎用コンポーネントの作り方フロントエンドエンジニアであればコンポーネント作成は避けて通れない道ですよね、、 今回のメインに行く前に一般的に作られているコンポーネントの作り方をおさらいしましょう。 ボタンコンポーネントの場合import type { FC, ReactNode } from "react"; type Props = { children: ReactNode; onClick: () => void; }; export const But
OpenAPI + Zod で型安全な API クライアント出力
import { asApi, Zodios } from '@zodios/core' import { z } from 'zod' const vR1x0k5qaLk = z.object({ id: z.number(), name: z.string() }).partial() const v8JbFEq2fUl = z.object({ id: z.number().optional(), name: z.string(), category: vR1x0k5qaLk.optional(), photoUrls: z.array(z.string()), tags: z.array(vR1x0k5qaLk).optional(), status: z.enum(['available', 'pending', 'sold']).optional(), }) const vlh
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
ライブラリにTypeScriptコードを同梱するときはディレクトリを分けよう - Qiita
Typescriptでkeyof CSSStyleDeclarationをケバブケースも合わせて対応する
Social Network for Programmers and Developers
React styled-components の theme に TypeScript 型定義を追加する
逆引き 型ファースト Zod
Making a UI Library with React & TypeScript
JavaScript / TypeScript の豆知識 10 選 - Qiita
