TypeScriptのexhaustiveness checkをスマートに書く
TypeScriptではデザインパターンとしてtagged unionによる直和がよく使われます。このときパターンマッチに相当する処理はswitchで行われますが、そこで直和に対する分岐が網羅的であることの保証を実行時と型検査時の両方で賢く行う方法がこれまでも模索されてきました。 今回、ヘルパー関数を導入せずにいくつかの問題を同時に解決する賢い方法を思い付いたので共有します。 コード これだけです。 // switch (action.type) { ... default: throw new Error(`Unknown type: ${(action as { type: "__invalid__" }).type}`); // .. } 以下、より詳しく説明します。 問題 TypeScriptではオブジェクトに type プロパティーを用意し、決まった文字列を入れることで直和を実現
Announcing TypeScript 4.8 Beta - TypeScript
Today we’re announcing our beta release of TypeScript 4.8! To get started using the beta, you can get it through NuGet, or- use npm with the following command: npm install -D typescript@beta You can also get editor support by Downloading for Visual Studio 2022/2019 Following directions for Visual Studio Code. Here’s a quick list of what’s new in TypeScript 4.8! Improved Intersection Reduction, Uni
TypeScript + Prisma + NestJSでGraphQLサーバを作ってみる
はじめに 本記事では、TypeScriptとPrismaとNestJSを使ってGraphQLサーバを作ってみます。 最終的には、以下のような記事の取得と作成ができるGraphQLサーバができあがります。 Prismaとは Prismaは、以下の3つのツールで構成されたNode.jsとTypeScriptのためのORMです。 Prisma Client: 自動生成される型安全なデータベースクライアント Prisma Migrate: 宣言的なデータモデリングとカスタマイズ可能なマイグレーション Prisma Studio: データを閲覧・編集するためのモダンなGUI 開発体験が良く、先日のJSConf JPの @qsonaさんの発表 でもあったように最近では新規サービスでの採用事例が増えてきました。 NestJSとは NestJSは、素早くスケーラブルなサーバーサイドアプリケーションを構築す
TypeScriptのJSDocサポートでできること、できないこと
TypeScriptの主要な入力ファイルは .ts, .tsx, .mts, .cts ですが、JavaScriptファイル (.js, .jsx, .mjs, .cjs) も読み込んで処理することができます。JSDocによる型アノテーションを認識するため、生のJavaScriptでもそれなりに型をつけることができます。 本稿ではタイトル通り、TypeScriptのJSDocサポートでできることとできないこと (.ts でしかできないこと) をまとめます。 おことわり 本記事はTypeScript 4.4時点での実装状況に基づいています。なるべくソースコード中の関係する箇所を参照するようにしたので、今後の変更はご自分で検証してください。 (TypeScript Playgroundで試すだけでも有用です JavaScriptモードで開始できるリンク) JSDocの機能一覧・TypeScri
TypeScriptコンパイラの読み方
TypeScriptコンパイラリーディングをする上で、目当てのコードに辿りつくまでの手間を短縮するためのメモ書きです。コードリーディングの一般論や、TypeScriptコンパイラから読み取れる個別事象については極力省略しています。 TypeScriptの主要な処理系 多くのJavaScriptパーサーが拡張としてTypeScriptを読めるようになっています。また抽象構文木のフォーマットに事実上の標準があり、各パーサーはそれに従っています。AST Explorerでこれらのパーサーの出力を調べることができます。特に重要なのが以下の2つの処理系です。 TypeScript TypeScriptの型推論・リント・トランスパイル・モジュールバンドリング等ができる。 Babel TypeScriptのトランスパイルができる。 TypeScriptコンパイラの構成 libに標準ライブラリ (型定義フ
[TypeScript]モノレポ管理ツール比較検討
モノレポ管理のツールを検討したときのメモ Background 自分が所属するチームで開発する JavaScript/TypeScript のプロダクトが増えてきて、同じような内容のリポジトリがいくつも存在している（n個とする）。 変更を加えていくにつれて、それぞれの差分が大きくなり、以下のような問題が発生する。 開発が止まっているプロジェクトの構成が古くなり、修正コストが発生する 開発が複数同時進行している場合、同じような実装を手動で同期する必要がある これらは共通の基盤等があれば効率的に（理想的にはn分の1の労力で）開発が可能であり、将来的なコストを考えると、いまのうちにその仕組みを考えておきたい。 Proposed Solutions 要件は以下 複数のパッケージをnpmとしてpublishできる アプリケーションも管理できる Nx, Rush, Lerna を主要な選択肢としている
![[TypeScript]モノレポ管理ツール比較検討](https://cdn-ak-scissors.b.st-hatena.com/image/square/e204665caf2bdc344987086461dd0424f7c8112d/height=288;version=1;width=512/https%3A%2F%2Fres.cloudinary.com%2Fzenn%2Fimage%2Fupload%2Fs--mp4vbqB0--%2Fc_fit%252Cg_north_west%252Cl_text%3Anotosansjp-medium.otf_55%3A%25255BTypeScript%25255D%2525E3%252583%2525A2%2525E3%252583%25258E%2525E3%252583%2525AC%2525E3%252583%25259D%2525E7%2525AE%2525A1%2525E7%252590%252586%2525E3%252583%252584%2525E3%252583%2525BC%2525E3%252583%2525AB%2525E6%2525AF%252594%2525E8%2525BC%252583%2525E6%2525A4%25259C%2525E8%2525A8%25258E%252Cw_1010%252Cx_90%252Cy_100%2Fg_south_west%252Cl_text%3Anotosansjp-medium.otf_37%3Aokmttdhr%252Cx_203%252Cy_121%2Fg_south_west%252Ch_90%252Cl_fetch%3AaHR0cHM6Ly9zdG9yYWdlLmdvb2dsZWFwaXMuY29tL3plbm4tdXNlci11cGxvYWQvYXZhdGFyL2I5NmZlMjc4YTYuanBlZw%3D%3D%252Cr_max%252Cw_90%252Cx_87%252Cy_95%2Fv1627283836%2Fdefault%2Fog-base-w1200-v2.png)
Announcing TypeScript 4.4 - TypeScript
Today we’re excited to announce the availability of TypeScript 4.4! If you haven’t heard of TypeScript yet, it’s a language that builds on JavaScript by adding syntax for static types. Tools like the TypeScript compiler just erase those types, leaving you with clean readable JavaScript that you can run anywhere; but those types are there to be type-checked! Types make your intentions explicit, and
実践！ Typescript で DDD - マイクロサービス設計のすすめ - Leverages Tech Blog
対象読者 マイクロサービス化を検討しており、実際に作る場合の構成を参考にしたい。 ドメイン駆動設計について、基本的な用語の知識がある。 TypeScript を多少触ったことがある。理解がある。 はじめに こんにちは。エンジニアの吉村です。 現在、弊社が運営する teratail というサービスに携わっており、CakePHP で動作しているモノリシックな既存サービスをマイクロサービスに移行するというプロジェクトを進行中です。 この記事では、実務を通して得た知見として、マイクロサービス化によりどんな恩恵があるのか、具体的にどのような構成で実装をしているのかについてご紹介します。 TL;DR マイクロサービスのバックエンドサービスの実装に焦点を絞って、ドメイン駆動設計 + オニオンアーキテクチャをベースに設計をしました。 本記事では、具体的に「ユーザ新規登録処理」の実装をする場合を例にとり、実
TypeScriptのProject Referencesを使ってソースコードを分割し、レイヤー間の依存関係を強制する
TypeScriptのProject Referencesを使ってソースコードを分割し、レイヤー間の依存関係を強制する サマリ Project Referencesを使うと、1つの巨大なtypescriptプロジェクトを、複数のプロジェクトに分割し、プロジェクト間の依存関係を整理することができる。これにより、例えば以下のようなことができる test/ ディレクトリで export しているテスト用の関数を、 src/ ディレクトリの本番用コードでは参照できなくする レイヤードアーキテクチャで設計しているとき、プレゼンテーション層で定義している関数を ドメイン層から参照できなくし、レイヤー間の依存関係を強制する また、プロジェクトの分割によりビルド時のパフォーマンスが大幅に改善する。 …と公式で書いているが、ビルド時の挙動を正確に把握しないとむしろ悪化するので、注意が必要 適切なプロジェクト
esbuild で Node.js を TypeScript 化する
TLDR バックエンドのコードを esbuild で TypeScript 化した ビルド時間は1秒ほど tsc に比べて10倍以上高速化できた 特に問題なくプロダクションで安定稼働している esbuild はいつ使えるのか みなさん webpack は使っていますか？まだまだ広く使われていると思いますが、最近では esbuild の事例もたまに見るようになってきました。 ABEMAにesbuildを導入してWebのバンドル処理を69倍高速化した話 | CyberAgent Developers Blog esbuild が爆速すぎて webpack / Rollup にはもう戻れない | Kabuku Developers Blog 現時点で esbuild をフロントエンドの Bundler として導入するには、以下のような問題があります。 ES5にトランスパイルできない Code S
TypeScript and native ESM on Node.js
In this blog post, I’ll explain everything you need to know in order to use and produce native ECMAScript modules on Node.js. The GitHub repository iterable is an example of a TypeScript ESM package that works on Node.js. It still uses the "typesVersions" workaround (which isn’t needed in TypeScript 4.7 and later). (Thanks to Guy Beford and Oleg Drapeza for their feedback on this post.) TypeScript
microCMSとDeno(Aleph.js)で少し未来のWEBサイト開発
今日は少しだけ未来のWEBサイト開発のお話をします。 ですが、ある程度形になりそうなので、それほど遠くはない未来かもしれません。 Aleph.jsとmicroCMSで簡単なWEBサイトを作成してみました。 開発したサイトは以下のシンプルなサイトになります。 Deno製フレームワークAleph.js 今回はDeno製のSSGフレームワークであるAleph.jsを使用してWEBページを作成してみました。Aleph.jsとはNext.jsにインスパイアを受けたフレームワークであり、ドキュメントの構成もとてもよく似ています(というかNext.jsのドキュメントを引用して作成されています)。 microCMS HeadlessCMSは国産のCMSであるmicroCMSを利用しました。最近ではJavaScriptSDKが開発され、さらに開発がしやすくなりました。 Deno(Aleph.js)の開発は何
eslint-plugin-import-accessではじめるディレクトリ単位カプセル化
こんにちは。この記事は筆者が製作した ESLint 向けプラグイン eslint-plugin-import-accessを紹介する記事です。 このプラグインにより TypeScript プログラムに擬似的なpackage-private exportの概念が生まれます。JSDoc で@packageとアノテートされたexport宣言は、そのファイルが属するディレクトリの外からインポートすることができなくなります。 従来、TypeScript で可能なカプセル化の最大の単位は「ファイル」であり、ファイルからエクスポートしない変数はそのファイル（モジュール）の中に閉じている一方で、一旦エクスポートしたものはプロジェクトのどこからでもインポート可能になります。これでは不都合な場合がありました。 最近の具体的な例としてはRecoilが挙げられます。筆者の以前の記事では、Atom や Select
移行のメリットはコストを上回るか？ JavaScriptのTypeScript化で気をつけるべき5つのポイント
技術とノウハウを武器に、膨大かつ複雑なデータの「検索」「分析」「可視化」といった課題を解決するフォルシア株式会社が「FORCIA Meetup #2」を開催しました。2回目の今回のテーマは「2020年度にエンジニアが取り組んだこと」。東川翔氏は、マイクロサービスをJavaScriptからTypeScriptに移行したときの気づきについて発表をしました。 JavaScriptからTypeScriptへの移行プロジェクトが始動 東川翔氏（以下、東川）：「JavaScriptからTypeScriptの移行のプロジェクトに関して気を付けた点」について話していきます。 まず自己紹介です。東川と申します。新卒の2年目で新規旅行アプリの開発をしています。興味のある言語はTypeScriptやPostgreSQLです。最近はクライアントアプリケーションの構築にも興味があって、Next.jsに関してアドベン
一見 TypeScript に見える JavaScript コード
const [resolvedHexVersionId, setResolvedHexVersionId] = useState< HexVersionId | undefined >(); たしかに読みにくいと思う。 しかし、代入(や変数)の右辺に関数呼び出しがあり、その型引数が Union Types もしくは Intersection Types の場合はこんな感じにするという処理が Prettier 2.3.1 から存在し、それには合理性があると思っている。Union Types や Intersection Types が一定以上長い場合は2.3.1のようなフォーマットになっている方が整ってみえる(と思う)。 この記事の本題ではないので、気になるひとは該当の Issue や https://github.com/prettier/prettier/pull/10949 や htt
成果物の Diff をまとめてとって TypeScript のアップグレードを円滑にした - potato4d
最近仕事でやっているプロジェクトの TypeScript のバージョンが 3.9。 そこそこ古くなっているのと、 TS は比較的気軽に上げて良くてバージョンアップの恩恵も高いパッケージなので、MTGが早く終わったスキマ時間で最新に上げてみることにした。 結果として tsc の設定を変えつつ $ diff -r ./before/ ./after/ を活用するとかなり楽に移行できたので、やりかたを残しておく。 手順 やり方を考える 一応社内に Renovate Bot が立っていて、かつそこから出ている Pull Request も存在したものの、流石にビルド成果物を比較しないままエイヤで上げるのは躊躇われる。 TypeScript のバージョンを上げて何かが壊れたことは経験としては一度もないが、一方でその経験則は根拠足り得ないので、一応アプリケーションへの影響を調査して、違いがないことを確
おそらく誰も使わない @babel/parser 7.14 新機能 TypeScript プラグイン の dts オプションについて
const { parser } = require("@babel/parser"); const code = `const foo: string = "foo"`; parse(code); // 構文エラー、型注釈の構文をパースできない parse(code, { plugins: ["typescript"] }); // typescript プラグインを有効にしているため型注釈の構文をパースできる 現在実装されているプラグインは https://babeljs.io/docs/en/babel-parser#plugins で確認できます。 プラグインという呼ばれ方をしていますが、サードパーティがプラグインを実装することはできません。これは、@babel/parserの方針として決まっており、今後もそのような対応をすることはないでしょう。 なので、実際はプラグインというより
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
Next.jsとRustのTypeScriptなWebAssembly生活 - Qiita
Web版「Excel」の新しいマクロ機能「Office スクリプト」が一般リリース／ユーザー操作をJavaScriptとして記録・編集・再生・共有
Effective Deno
