私がTypeScriptで `interface` よりも `type` を好む理由 - kosui
はじめに TypeScriptで型を定義する際、interface と type のどちらを使うべきか。これは、多くの開発現場で一度は議論になるテーマではないかと思います。 世の中の多くのドキュメントや記事では、クラスへの implements のしやすさや、interface が持つ「宣言のマージ（Declaration Merging）」の利便性が紹介されることもあり、interface の利用が推奨されるケースもよく見かけます。 しかし、特にサーバサイドアプリケーションや、ある程度規模のあるシステムを開発する上で、私はこの「宣言のマージ」機能が、時として予期せぬ挙動や、場合によってはセキュリティ上のリスクを静かにもたらす要因になると感じています。 今回は、なぜ私がプロダクトコードにおいて interface の積極的な使用を避け、type エイリアスを好んで使うのか、具体的なシナリオ
【結論】TypeScriptの型定義はtypeよりinterfaceを使うべき理由
はじめに TypeScriptでコンポーネントのPropsやオブジェクトの型を定義するとき、typeとinterfaceのどちらを使うべきか、一度は悩んだことがあるのではないでしょうか。 巷では「どちらでも良い」「チームで統一されていればOK」といった意見もよく見かけます。 しかし、私は 明確な理由をもって「基本的にはinterfaceを使うべき」 だと主張します。 この記事では私の実体験で遭遇したReactのPropsの深刻なパフォーマンス問題を例に交えながら、なぜinterfaceが優れているのか、そしてtypeはどのような場面で使うべきなのかを解説します。 type aliasを使いたくなる魅力と、その裏に潜む罠 まず、なぜ多くの開発者がtypeを選びがちなのでしょうか。 それは、開発体験の良さにあります。 typeで定義した型は、VSCodeなどのエディタでホバーすると、最終的に解
querySelector に型引数を指定しない - Object.create(null)
必要もないのに querySelector や querySelectorAll の型引数を指定しないようにしましょう. (この記事は AI レビュワーに「型引数を指定した方が型安全だ」と提案されたのに対する反論として作成しています.) querySelector の型安全性 querySelector や querySelectorAll の型定義は, 後述する要素型セレクターに関連する部分を除くと, 基本的には以下のようになっています. querySelector<E extends Element = Element>(selectors: string): E | null; querySelectorAll<E extends Element = Element>(selectors: string): NodeListOf<E>; これはつまり型引数が Element を継承し
最高の TypeScript 開発環境を最速で作っていくよ 2025 秋
この記事では、TypeScript の開発環境を最速で整えます。単に動く環境ではなく、最低限必要なツールも一通りそろえていきます。(2025 年秋時点の情報です) この記事で作る開発環境について この記事のゴール bun run コマンドで TypeScript ファイルを実行できる bun repl コマンドで REPL を起動して TypeScript を実行できる bun tsc --noEmit コマンドで（厳しい）型チェックができる TypeScript Language Server でコード補完と型チェックができる bun biome コマンドでフォーマットとリントができる Biome の拡張機能でリントが開発中にも実行される Biome の拡張機能でフォーマットと自動修正が保存時に自動で実行される bun test コマンドでテストコードを実行できる Bun の拡張機能でテ
Moving off of TypeScript
We Love You, TypeScriptFor nearly five years now, Motion has operated in a large TypeScript monorepo. At its peak, it was roughly ~2.5 million lines of code after excluding comments, node_modules, etc. To manage this, we used Vercel’s rather excellent Turborepo build system. This is not a blog post hating on TypeScript — quite the opposite! Motion would likely not even have survived until today wi
【TypeScript】enumを使ったっていいじゃないか
TypeScriptで定数をどのように表現するか、というのは意外に意見が分かれるテーマです。本稿では、enumの特徴とその代替手段を整理し、何を採用すべきかを考えてみます。 enumを推奨しないという意見が多いのは知っていても、何故そう言われているのか、を理解していますか？ 「使ってはダメ」と思考停止するのではなく、この記事を読むことでメリット・デメリットを理解して自分で選択できるようになる、かもしれません！ 列挙型（enum）とは enumはJavaScriptにはないTypeScript独自の構文で、定数を集合としてまとめて扱うことができます。 enum Mode { Auto = 'Auto', UDP = 'UDP', TCP = 'TCP', } const mode: Mode = Mode.Auto
TypeScript では T[] ではなく ReadonlyArray<T> を使おう
TL;DR 公開 API では T[] を避け, ReadonlyArray<T> を使いましょう. 内部実装でのみArray<T>を使うのはOK Array<T> ではなく ReadonlyArray<T> を使おう 以下のコードには受け取った配列をソートして表示する sortLog 関数と, 0番目の要素を 999 にした配列を表示する setLog 関数を定義して使用しています const sortLog = (array: Array<number>): void => { console.log(array.sort((a, b) => a - b)); }; const setLog = (array: Array<number>): void => { array[0] = 999; console.log(array); }; const array = [2, 1, 3]
![TypeScript では T[] ではなく ReadonlyArray<T> を使おう](https://cdn-ak-scissors.b.st-hatena.com/image/square/07a728cc2044d2dc3b401f51267ea8c84b3f2031/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--vm0KzhIi--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3ATypeScript%252520%2525E3%252581%2525A7%2525E3%252581%2525AF%252520T%25255B%25255D%252520%2525E3%252581%2525A7%2525E3%252581%2525AF%2525E3%252581%2525AA%2525E3%252581%25258F%252520ReadonlyArray%25253CT%25253E%252520%2525E3%252582%252592%2525E4%2525BD%2525BF%2525E3%252581%25258A%2525E3%252581%252586%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3A%2525E3%252583%25258A%2525E3%252583%2525AB%2525E3%252583%25259F%2525E3%252583%2525B3%2525E3%252583%252581%2525E3%252583%2525A7%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyLzAwZjkwMDRhZGIuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
Effective TypeScript 読んだ / 郷に入っては郷に従う - Object.create(null)
Effective TypeScript (第2版) を読んだ なんらか他の人に読んでおくと良いよと紹介できる本があると良いなと思って読みました. 2020 年以降に TypeScript を書く上での常識が概ね網羅されていると思うので, そういった前提知識に自信をつけたいならおすすめです. www.oreilly.co.jp ただ「項目18 推論可能な型でコードを乱雑にしない」で, 関数の戻り値の型アノテーションをデフォルトで省略するよう推奨していることについては明確に反対したい. より正確には, コールバックなど再利用を想定しない関数についてはデフォルトで省略してもよいが, 通常関数は再利用を目的として定義されがちなことを考えると, デフォルトで省略するというのはあまり実態に則していないと思う. 実際にこの本の後の章には戻り値の型アノテーションを書いておけばよかったのにという状況がしば
TypeScript以外が嫌いです
TypeScript以外が嫌いです こんにちは、TypeScript原理主義者のTakoです。今日は私がなぜTypeScript以外の言語が心の底から嫌いなのかをお話しします。 はじめに みなさん、世の中にはプログラミング言語がたくさんありますよね。Java、Python、JavaScript、Ruby、Go...。でも、私にとってそれらは全て「TypeScriptではない言語」というカテゴリに分類されます。つまり、使う価値のない言語です。 型がないなんて、人生がないようなもの JavaScript？あんなの型がなくて何が楽しいんですか？undefined is not a functionとかcannot read property of nullとかいうエラーと戯れるのが好きですか？私は嫌いです。 // TypeScriptの美しさ interface User { id: numbe
TypeScript の Go 移植に備えて知っておくべきこと
はじめに こんにちは、ダイニーの ogino です。 TypeScript のコンパイラは今まで TypeScript で実装（セルフホスト）されていました。 それが TypeScript 7.0 から、Go による実装に移植され、10 倍高速になります。 本記事は、移植に関して筆者が疑問に感じた点を、GitHub discussion や TypeScript lead architect のインタビュー動画などから調べてまとめたものです。 移行の背景 今回 Go に移植される背景は、大規模な TypeScript コードベースをコンパイルする際のスピードの遅さにあります。 例えば VSCode のコードベース (150 万行) に対して tsc を実行すると、約 80 秒もかかります。 TypeScript のコンパイルは大きく以下の段階に分けられ、その内の check が特に複雑で重
Honoの捉え方、またはNext.jsとの組み合わせ方 | stin's Blog
HonoというWebフレームワークがあります。Express.jsのような書き方でWebアプリケーションを作れるものです。 import { Hono } from "hono"; const app = new Hono(); app.get("/", (c) => c.json({ message: "Hello, Hono!" })); export default app; HonoはWeb標準準拠を謳っているフレームワークです。それを聞くとなんだか小難しく感じます。 Web標準とは Request と Response のインスタンスを扱うということです。これらは主にブラウザ上のJavaScriptのfetch関数が取り扱うオブジェクトですね。 RequestはfetchでHTTPリクエストを送信するときに、データをまとめておくオブジェクトです。例えば送信先のURLやHTTPメソ
typescript-eslintとFlat Config - Mitsuyuki.Shiiba
typescript-eslintのFlat Configについて、自分に今必要そうな部分だけをひととおり確認したので忘れる前にメモを残しておく。 前提 素のJavaScriptプロジェクトをやることは自分はあまりなさそうなのでTypeScript前提 ES Modules前提でいいやと思っているので設定ファイルの拡張子はシンプルに .js にする フォーマッターにはESLintのStylisticじゃなくてESLint外のフォーマッター（PrettierやBiome）を使う前提 基本の設定 https://typescript-eslint.io/getting-started/ の最初に書いてある設定。 // @ts-check import eslint from '@eslint/js'; import tseslint from 'typescript-eslint'; expo
Full-Stack TypeScriptの最終到達点、T3-Turboで新規開発した話
はじめに この記事はTSKaigi Advent Calendar 2024の記事です。(TSKaigiの運営メンバーとして最初の記事になりそうです。) みなさん、TypeScript書いてますか？最近、フロントエンドもバックエンドも（加えてインフラも）TypeScriptで統一する、Full-Stack TypeScriptを採用する事例が増えてきました。 Full-Stack TypeScriptの由来やメリットはこちらの記事から フロントもバックもTypeScriptだし、どうせならMonorepoで管理しようということで、TypeScript専用のMonorepo管理ツールであるTurborepoを導入し、T3-Turboというアーキテクチャを導入することになりました。 T3-Turboというアーキテクチャは、以前導入を考えた際に記事にしているので、こちらをご参照ください。 またT
Re: type-challengesから始めるTypeScript実践演習 初級〜中級編
本書執筆時点での初級〜中級編の全問に実際に取り組み、解説と解答例を収録しました。本書では各章の最初にそのPartの問題を解くために必要なTypeScriptの知識を解説します。その後、実際にtype-challengesの問題を実践します。各問には問題を解くためのヒントも掲載しているので困ったら読んでみてください。以上のように、座学→実践という形式でTypeScriptの型システムを学ぶことを目指します。
【最強】Honoフル活用事例2024年
Hono アドベントカレンダー 2024 初日担当の おりばー です。 本記事では、11 月にリリースした漫画プラットフォーム「comilio」の開発事例をもとに、とにかく Hono が最強だということをつらつらと書いていく記事となります。 個人的 2024 年ベストオブ優勝フレームワークは Hono 一択です。Hono が無ければ、おそらくプロダクトを今もリリースできていなかったと言っても過言ではありません。 ぜひこの記事を参考にして、0 -> 1 を立ち上げる際は Hono を積極的に採用してもらえればと思います。 また、Hono という最高のプロダクトを生み出してくれた @yusukebe さんには全身全霊を持って感謝します。 「comilio」のインフラ構成 まず、今回の実例である漫画プラットフォーム「comilio」の構成を紹介します。 「comilio」では TypeScrip
TypeScript でバックもやるって実際どう？ 実運用で困ったこと3選
ROSCA株式会社さん主催のイベント フロントからバックエンドまで、TypeScriptでシームレスな開発エクスペリエンスを で発表させていただいた際に使用したスライドです。
新しいチームでTypeScriptに素早くキャッチアップするためにやったこと - KAKEHASHI Tech Blog
カケハシのプラットフォームチームでソフトウェアエンジニアをしているすてにゃん (id:stefafafan) です。今回は、私が TypeScript をメイン言語として採用しているチームに参加した際、言語や周辺技術のキャッチアップを行った方法について紹介します。 この記事は秋の技術特集 2024の 3 記事目です。 この記事の想定読者 私が元々持っていたスキルセット 認知負荷の増加 TypeScript 学習のためにやったこと 学習の進め方 テックリードとの 1on1 の中で壁打ちや相談 ペアプログラミング 輪読会 もくもく会 学習コンテンツ O'Reilly Online Learning を使った学習 TypeScript Deep Dive プロを目指す人のための TypeScript 入門 安全なコードの書き方から高度な型の使い方まで type-challenges 公式ドキュメ
生SQLに型を手書きする時代は終わり？Prismaの新機能「TypedSQL」
生SQLを扱う $queryRaw TypeScript向けのORMライブラリとしてPrismaがあります。Prismaは直感的で型安全なAPIを提供し、TypeScript向けのORMとしては第一に名前が上がることが多いライブラリです。 しかしそんな人気なPrismaでも、裏側では少しクセのあるSQLが発行されていたり、欲しいSQLがPrismaのAPIでは実現できない場合があります。 そういった場合のために $queryRaw というメソッドが用意されており、これを使うことで生SQLを書いてその結果を受け取ることができました。他のORMにもよくある機能です。 例えば以下のように実装することができます。 const users = await prisma.$queryRaw` SELECT id, name FROM "Users" WHERE id = ${userID} `; co
TSKaigi 2024 スライドまとめ【非公式】
TSKaigi 2024 のトークと、登壇者がスライドを公開していればその URL を記載しています。 トラックごとのトーク、および登壇者情報は公式サイトに詳しく掲載されているので、そちらをご確認ください。
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
TypeScript、上達の瞬間
