Next.jsのsearchParamsはas stringせずに必ずバリデーションしてくれ。またはvalibotのちょいテクニック

2024/11/18 21 users Valibot undefined String テクニック

Next.jsのsearchParamsの型問題 Next.jsのsearchParamsの型は少々厄介です。searchParamsのドキュメントでは次のように型定義が記載されています。 export default async function Page({ searchParams, }: { searchParams: Promise<{ [key: string]: string | string[] | undefined }>; }) { const filters = (await se... 続きを読む

TypeScriptの型を展開してホバー表示してくれるVSCode拡張「Prettify TypeScript」が便利

2024/11/02 241 users TypeScript ジェネリクス VSCode拡張 交差型

TypeScriptは強力な型システムが魅力です。 しかし、複雑な型定義は理解が難しいです。特にライブラリの型定義などはジェネリクスや交差型などがネストしていることも多く、すぐに把握するのが難しい場合があります。 Visual Studio Code（以下VSCode）でTypeScriptの開発をしている際、型にカーソルをホバーすると型情... 続きを読む

TypeScriptの標準ライブラリで使われているdeclaration mergingのテクニック

2024/07/28 5 users TypeScript API 標準ライブラリ テクニック

TypeScriptの標準ライブラリとは、TypeScriptに組み込みで備わっている型定義のことです。ECMAScript仕様で定義されているJavaScriptの言語機能に対する型定義が含まれています。また、ブラウザに組み込まれているWeb標準のAPIに対する型定義も含まれています。 TypeScriptの標準ライブラリでは、declaration mergingと... 続きを読む

TS 5.6のiterator helpersサポート――BuiltinIteratorsのwhat & whyを知る - Qiita

2024/07/27 10 users why リリースノート Qiita What サポート

先日、TypeScript 5.6 Betaが公開され、あわせてリリースノートも出ました。 この記事では、TS 5.6の新機能の中でもIterator helpersに注目します。特に、Iterator helpersのサポートに合わせて型定義に追加されたBuiltinIteratorsやBuiltinAsyncIteratorsについて解説します。 Iterator helpersとは Iterator helpersは... 続きを読む

デザインシステムの開発者体験向上の試み - enechain Tech Blog

2024/06/11 28 users enechain Tech Blog デザインシステム

はじめに 今回書く開発者体験について 具体的な試み eslint pluginによるコーディング規約の明文化 Notionへのリソース集約 デザイントークンと型定義 おわりに はじめに こんにちは。enechainで働いている takurinton です。 enechainではさまざまな開発者体験向上の取り組みが試行されていますが、今回は自分が主に見... 続きを読む

PHPerのための「PHPと型定義」を語り合う【PHP TechCafe イベントレポート】 - RAKUS Developers Blog | ラクス エンジニアブログ

2024/03/07 21 users phpエンジニア PHPer 好評 毎月 ラクス

弊社で毎月開催し、PHPエンジニアの間で好評いただいているPHP TechCafe。 2023年5月のイベントでは「型定義」について語り合いました。 弊社のメンバーが事前にまとめてきた情報にしたがって、他の参加者に意見を頂いて語り合いながら学びました。 今回はその内容についてレポートします。 rakus.connpass.com PHPと型 ... 続きを読む

多言語化対応における TypeScript の型定義を通して開発のしやすさについて考えた - SmartHR Tech Blog

2023/11/14 7 users TypeScript SmartHR Tech Blog

こんにちは、SmartHR でプロダクトエンジニアをしている @nabeliwo です。 今年の9月に SmartHR のログイン後のホーム画面がリニューアルされました。 【9/21更新】新しいホーム画面を公開しました | SmartHR｜シェアNo.1のクラウド人事労務ソフト この記事では、新しいホーム画面の実装の中で、開発者体験を損なうこと... 続きを読む

空でない配列を型で表現する正しい方法【TypeScript】

2023/08/01 118 users TypeScript 配列 結論 上記 正しい方法

TypeScriptでは配列が空でないことを型レベルで表現できます。 この記事ではその型をNonEmptyArray<T>と書くことにします。 結論だけ先に書くと、次のように定義するのが正しいです。 export type NonEmptyArray<T> = [T, ...T[]] | [...T[], T] 現在ネット上では上記とは異なる、少し不具合のある型定義が紹介されてい... 続きを読む

DefinitelyTyped がつらいので Prettier の型定義を本体のリポジトリに移すことにした

2023/02/23 6 users DefinitelyTyped Prettier pull

つい先程、https://github.com/prettier/prettier/pull/14212 という Pull Request を next ブランチにマージした。 これは DefinitelyTyped で管理されていた Prettier の TypeScript 用の型定義を Prettier 本体のリポジトリへと移す Pull Request だ。この Pull Request によって、v3 からは @types/prettier をイン... 続きを読む

OpenAPI + Zod で型安全な API クライアント出力

2022/09/28 50 users OpenApi Zod openapi-generator

バックエンドが OpenAPI（REST） で API 仕様を公開している場合、 フロントエンド側で OpenAPI の仕様から、 型安全、かつ API 仕様通りに型定義と API クライアントを生成したい場合があり、 現状　API クライアント生成系ライブラリとして、以下のいずれかが候補に上がるかと思います。 openapi-generator 様々な言語... 続きを読む

Vue.jsでWebページをつくる際の肝！「コンポーネント」をTypeScriptで活用しよう

2022/08/03 11 users TypeScript コンポーネント デフォルト 言語 前回

本連載では、JavaScriptフレームワーク「Vue.js」を、型定義が利用できるようJavaScriptを拡張した言語「TypeScript」で活用する方法を、順を追って説明していきます。前回はVue 3がデフォルトとなる時代のVue.js開発新常識を紹介しました。今回は、Vue.jsでWebページを作る際の構成要素となる「コンポーネント」につい... 続きを読む

外からやってくる値から TypeScript の型を守るライブラリ・ツールまとめ - Mobile Factory Tech Blog

2021/12/09 5 users TypeScript ライブラリ 新卒エンジニア 外部 ツール

こんにちは、新卒エンジニアの id:d-kimuson です 先日 type-predicates-generator という型定義からユーザー定義型ガード・アサーション関数を自動生成するツールをリリースして紹介記事を書いたのですが、感想とかを眺めていたら同じく外部から来た値に安全な型付けをするためのライブラリやツールの情報をいくつも観... 続きを読む

TypeScriptの型定義で麻雀の役判定をする 【dwango Advent Calendar 2日目】 - MANA-DOT

2021/12/03 119 users TypeScript MANA-DOT クッソ エントリ 麻雀

このエントリは ドワンゴ Advent Calendar 2021 2日目の記事です(夜が明けるまでは2日目！)。 はじめに TypeScriptには Conditional Types や Template Literal Types といったクッソ強力な型機能があります。 これらを用いて、今回は 2p3p4p2m3m4m2s3s4s4s5s6s8s8s のような天鳳牌譜形式の文字列を型引数に渡すと、麻雀... 続きを読む

【初心者】React × TypeScript 基本の型定義

2021/05/24 11 users React TypeScript Zenn React開発

はじめに ここ最近TypeScriptの学習をしていまして、その学習記録をZennに投稿し続けていました。 その中で、TypeScriptの基礎学習の最後として投稿した以下の記事では、TypeScriptを用いてReact開発をする際に最低限必要となるであろうTypeScriptの型について簡単にまとめました。 TypeScript 学習記録 #8（Reactに関わ... 続きを読む

TypeScriptの型定義からバリデーションコードを生成するツールを書いた | Web Scratch

2021/03/26 13 users TypeScript request response

create-validator-tsというTypeScriptの型定義からJSON Schemaを使ったバリデーションコードを生成するツールを書きました。 モチベーション expressなどでAPIを書くときに、Request/Responseが意図したものかどうかをバリデーションする必要があります。 特にreq.queryなどはStringが入ると予想しますが、オブジェクト... 続きを読む

GraphQL Code Generator で TypeScript の型を自動生成する - クックパッド開発者ブログ

2021/03/24 11 users hokaccha TypeScript GraphQL 外村

技術部の外村（@hokaccha）です。 レシピサービスのフロントエンドを Next.js と GraphQL のシステムに置き換えている話 - クックパッド開発者ブログ という記事を書きましたが、この中で詳しく説明しなかった GraphQL のスキーマやクエリから TypeScript の型定義を自動生成する仕組みについて紹介します。 なお、今回... 続きを読む

「TypeScript の型定義に凝りすぎじゃね？」の反応を眺める - Neo's World

2021/02/09 11 users Twitter TypeScript 雑文 はてぶコメ 勢い

昨日書いた「TypeScript の型定義に凝りすぎじゃね？」という記事に対して、はてブコメや Twitter でのコメントがいくつかあったので、勝手に取り上げて補足する。勢いで書いた雑文が思いの外見られていて驚いた。みんなどうやってこんな辺鄙なサイト見つけたの？まずは読んでくれてありがとね。 ahuさんはTwitterを使っ... 続きを読む

アンサー： なぜTypeScriptの型定義に凝るのか - Qiita

2021/02/09 140 users Qiita TypeScript アンサー

インターフェースに注目すると、引数のひとつがTで返り値がT[]です。これは、repeat関数は「T型の値をT[]型の値に変換する関数」であるという意味ですね。返り値に書かれているT[]というのは、非常に簡単ながら「Tという型からその配列の型T[]を作る」というロジックが書かれていると読めます。 この程度ではロジックと... 続きを読む

TypeScript の型定義に凝りすぎじゃね？ - Neo's World

2021/02/09 92 users Qiita TypeScript Zenn Java Tips

TypeScript の型定義に凝りすぎじゃね？ ここ数年で、Qiita や Zenn で TypeScript の話を見かける機会が多くなった。JavaScript には Java のような型定義がなく、初心者の混乱の元・ひいては障害の元になりうるのはよく分かる。 しかし、最近どうにもこうにも、TypeScript でむりくり型定義するような Tips を多く見か... 続きを読む

RBSからTypeScriptに変換するGem (rbs2ts) を作ってる - memo_md

2021/01/20 12 users gem TypeScript ＲＢＳ github.com

Ruby3.0 からは、型定義を処理するための rbs gem が同梱されていて、これは外部の *.rbs ファイルに記述した内容に従って、Rubyコードの型チェックを可能にしてくれる。 github.com 最近、この RBS の型定義を TypeScript の型定義に変換できないかな〜と思い、 rbs2ts という gem を実験的に作ってる。 結構荒削りなの... 続きを読む

TypeScriptの型を手に馴染ませるためにやっていること - $shibayu36->blog;

2020/10/15 341 users TypeScript TypeSc $shibayu36

最近TypeScriptが好きで勉強していっている。しかしなかなか型定義周りが手に馴染まず、少し複雑な型定義を読んだり、自分でユーティリティ型を定義したりすることが難しかった。 そこで型を手に馴染ませるために色々学習をしてみたので、やっていることをメモしておく。 まずざっとTypeScriptの型概要を学ぶ まずTypeSc... 続きを読む

Closure LibraryからTypeScriptの型定義を生成する - Cybozu Inside Out | サイボウズエンジニアのブログ

2020/05/01 6 users TypeScript kintone pirosikick

こんにちは、フロントエンドチームエキスパートチームの穴井(@pirosikick)です。 弊社の製品である kintone は Closure Tools (Closure Library と Closure Compiler の総称) を使って開発していますが、TypeScript を使ったモダンなスタックへの移行を検討しています。 その移行の過程で Closure Tools 側のコードを Ty... 続きを読む

TypeScriptの便利な型コレクションtype-festと型パズル解説~前編~ - 別にしんどくないブログ

2019/12/22 10 users TypeScript Utilities npmパッケージ

TypeScript Advent Calendar 2019 - Qiita 14日目の記事です。 type-festというTypeScriptの便利な型を集めたnpmパッケージがあります。 今回はtype-festの中から特に複雑なUtilitiesの型の紹介とそれらの型パズルのような型定義について解説したいと思います。 この記事がMapped TypesやConditional Typesを使った複雑... 続きを読む

hyper-ts で type-safe & stateless なExpressアプリケーションを構築する - DEV Community ?‍??‍?

2019/08/02 22 users Stateless Type-safe ステートフル 課題

tl; dr TypeScriptとExpressを使ってアプリケーションを開発するにあたって、以下の課題がある。 現状、 @types/express における型定義は厳密でない リクエストハンドラの中でごちゃごちゃとやってしまい、ステートフルになりがち こうした課題に対して、gcanti/hyper-ts が有効である。 1. @types/express における型... 続きを読む

【書評】「実践TypeScript」のレビューに携わって - potato4d log

2019/06/26 42 users 実践TypeScript 書評 potato4d log

本日、6/26 に発売開始された吉井 健文さんの「実践TypeScript ~ BFFとNext.js&Nuxt.jsの型定義~」の執筆に、レビュアーという形で協力させていただきました。 書籍内に Vue / Nuxt.js における TypeScript の項が存在したためそこからスタートし、それ以外の部分についても一通り読んだ形です。 献本もいただいたので折... 続きを読む