TypeScript 4.9 から、satisfies operator が使えるようになりました。従来のas constと組み合わせ、型チェックと widening 防止を同時に行えます。筆者的には、"顧客が本当に必要だったもの"です。 本記事では satisfies とは何か？ as const とは何か？ 2つを組合わせるとどのようなメリットがあるのか？ について、実際のコードと共に解説します。 結論 TypeScriptで 定数を export する場合は、as const satisfies を設定しておくと便利です。 export const myName = "田中" as const satisfies string; export const foodList = { ramen: "ラーメン", udon: "うどん", soba: "そば" } as const sa

ES2015で登場したPromiseとES2017で追加されたasync/awaitによってJavaScriptのコーディングスタイルは大きく変わりました。Promiseの基本的な使い方を理解していることは「脱初心者」のひとつの指標にもなっているようで、網羅的で優れた解説も数多く存在します。 では、基本をおさえた後の活用方法はどうでしょうか？　実際のところ実務ではライブラリやフレームワークから返却されたPromiseをそのままawaitするだけ…という使い方がほとんどかもしれません。しかし、これらのライブラリやフレームワークの中で利用されているような高度なPromiseの活用法をマスターすれば、もっと自由なプログラミングができるようになります。 この記事ではPromiseを活用した実践的な例を3つ紹介します。いずれもライブラリやフレームワークに類似の機能を持つものはありますが、仕組みを理解

社内用の啓発記事ですが、閉じる理由がないのでここに投げます。 ブラウザにべったりなコードを書いてると、ブラウザや node.js 固有の環境をインラインで記述してしまうことが多々あると思います。 あえてダメダメなブラウザ向けのエントリポイントの例を書きます。 // main.ts let id = localStorage.get('id'); if (!id) { id = `${navigator.userAgent}-${Math.random()}`; localStorage.set('id', id); fetch('/auth', { method: 'POST', credentials: 'include', body: JSON.stringify({ id, at: Date.now(), }), headers: {'Content-Type': 'applicat

はじめに TypeScript で型エラーを出さずに満足に実装はできるけど、 「never 型とかよくわかってない😇 」 みたいな人向けの記事です。これを読んだら TypeScript 中級者くらいにはなれるかも？？（無責任） 今回取り扱うのは以下の5つのトピックです void 型の危うい挙動 条件型 (conditional type)を使いこなす Object, {} 型を使うべからず never 型 Tuple の実態 本記事は CyberAgent22 Advent Calender 14日目の投稿です。 void 型の危うい挙動 そもそも `void` 型とは...？ void 型に馴染みがあまりない人向けに undefined 型との違いを説明しておきます。ご存じの方は次の節までスキップをおすすめします。 関数の返り値が無いことを示す void 型ですが、 JavaScrip

infer 難しい 使う機会が少ないけど、個人的には React Query のキー管理とかでこういう使い方をすることが多い。 あまり積極的に infer を使わないのは理解しきれていないからだと思うから、一個づつ分解して理解を深めたい export const QUERY_KEYS = ["users", "post", "comments"] as const; export type Unpacked<T> = T extends { [K in keyof T]: infer U } ? U : never; export type QueryKeysTypes = Unpacked<typeof QUERY_KEYS>;

インクリメンタルに新しい技術を取り入れる方法 [/karte-blocks-incremental-development/]では、VueからReactへ段階的に移行していったという話を紹介していました。 このReactの採用を決定してから大きな論点となったのは、ReactでCSS(スタイル)をどのように書くかについてです。 Reactのスタイリング方法には、デファクトと言えるものはありません。

No Bundle ツールの流行: vite / snowpack モダンブラウザは Native ESM を備えているので、開発時は高速な localhost アクセスを頼って直接 import する、外部ライブラリだけ事前にコンパイルしておく、という手法が流行ってきている。プロダクション用は今まで通りビルドする。 webpack はすべてを一つにバンドルするためにメモリ上にファイルの実体と依存グラフを持っているが、これによりメモリと CPU を圧迫する問題があった。特に巨大なリポジトリではそれが顕著になる。 No bundle ツールの実装として vite と snowpack がある。 https://github.com/vitejs/vite https://www.snowpack.dev/ vite は使ってみた限り、更新時の差分ビルドが爆速で、明らかに体感が良い。 Vue

本書『サバイバルTypeScript』は実務でTypeScriptを使う開発者のための入門書です。そして、このページはTypeScriptの特徴を最速で把握できるよう、数百ページからなる本書のコンテンツをつまみ食いした要約です。 » 本書ついて詳しく知る » とにかく今すぐTypeScriptを書いてみたい TypeScriptとは​JavaScriptのスーパーセットとなるプログラミング言語。静的型付け言語であり、プログラムの正しさが静的に検査できる。ライブラリやIDEなどの開発環境が充実しており、大きなエコシステムを持っている。Microsoftが2012年に開発し、オープンソースで公開した。» TypeScriptの特徴について詳しく知る » TypeScript誕生の背景について詳しく知る TypeScriptはJavaScriptのスーパーセット​スーパーセットとは、元の言語との

突然ですが、以下のJavaScriptプログラムに型をつけるとしたらどうするでしょうか。 function all(...callbacks) { return (x) => { for (const callback of callbacks) { callback(x); } } }最も自然な方法のひとつは、次のような型づけでしょう。 type Callback<T> = (value: T) => void; function all<T>(...callbacks: Callback<T>[]): Callback<T>;これ自体は最小限で最も正しい型をつけていて良いのですが、ユースケースによっては不便な場合があります。具体的には、以下のような「異なる型の汎用的なコールバックを組み合わせて特殊なコールバックを作る」という使い方です。 function cb1(value: { fo

TypeScriptは、型の合わないプログラムに対して型エラーを出すことを主な役目としています。 もちろんプログラムを正しく修正すれば型エラーは消えるのですが、TypeScriptを書いている方ならばそれ以外の方法で型エラーを消したことがある人がほとんどでしょう。すなわち、as、any、// @ts-ignoreその他諸々です。このような手段を使うことで、本来の問題を解決せずに型エラーを消すことができます。 もちろんこれらを濫用するのは勧められたことではありません。それは筆者の過去の記事『敗北者のTypeScript』で解説した通りです。プログラムの修正でasなどを使わずに型エラーが消せるのならばそうすべきで、そうしないのは敗北者です。 しかしながら、asなどをどうしても使わなければいけない場面はあります。それは、TypeScriptの型推論能力や型の表現力が足りないために型エラーが出てい

ReactのConcurrent Modeが最初に発表されたのはもう1年近くも前のことです（記事執筆時点1）。Concurrent Modeはたいへん奥深い機能で正式版がたいへん待ち遠しいですが、Concurrent Modeの代名詞として多くのReactユーザーに知られているのはPromiseをthrowするというAPIデザインです。Concurrent Modeでは、コンポーネントがレンダリング時にPromiseをthrowすることで、レンダリングをサスペンドした（Promiseが解決されるまでレンダリングできない）ことを表します。 Concurrent Modeに関しては筆者の既存記事Concurrent Mode時代のReact設計論 (1) Concurrent Modeにおける非同期処理などをご参照いただきたいのですが、ここではPromiseをthrowするということ自体に焦点

PySpa統合思念体です。あと、 @yosuke_furukawa にも協力いただきました。 基本的に、あまりエラーの種別を細かく判定してあげることはJavaScriptでは今までやってこなかったのですが、ちょっとしたメタデータを乗っけてあげるとか（例えばリトライ回数）、何か凝ったことをしたくなったらこういう方針でやればいいのでは、という試行錯誤録です。 エラーと例外の区別が必要か この手の話になると、エラーと例外の違いとか、こっちはハンドリングするもの、こっちはOSにそのまま流すものとかいろんな議論が出てきます。このエントリーではエラーも例外も差をつけずに、全部例外とひっくるめて説明します。 例外というのはすべて、何かしらのリカバリーを考える必要があります。 ちょっとしたネットワークのエラーなので、3回ぐらいはリトライしてみる 原因: ネットワークエラー リカバリー: リトライ サーバー

type Side = 'send' | 'receive' function sideCharObj(): { [key: Side]: string } { return { send: '発', receive: '受' } }, { [key: string]: string } のように書けそうだが、 これだと下記のエラーが出る An index signature parameter type cannot be a union type. Consider using a mapped object type instead. Mapped types で key の型を指定 type Side = 'send' | 'receive' function sideCharObj(): { [key in Side]: string } { return { send: '発'

原文 Intersection Types 交差型は Person & Serializable & Loggable のように複数の型をひとつにまとめたもので、これらの型の全メンバを持ちます。 交差型を使用した mixin の例を以下に示します。 function extend<T, U>(first: T, second: U): T & U { let result = <T & U>{}; for (let id in first) { (<any>result)[id] = (<any>first)[id]; } for (let id in second) { if (!result.hasOwnProperty(id)) { (<any>result)[id] = (<any>second)[id]; } } return result; } class Person { c

About me @Quramy フロントエンドエンジニア的なことをして生きています。 TypeScript + AngularでSPA作ってます。 2.1 RC is coming! 2016.11.08現在、2.1 RCがリリースされた。 TypeScript blogによると、 async/awaitのDown transpileがES5/ES3でも利用可能に(~2.0ではES2015以上をtargetにしないと使えなかった) 型推論がより賢くなった と書いてある。 2.1.1にどのような変更が入ったかは、 @vvakame先生の記事 に詳しく記載されてる 2.1.4 2.1のRoadmap を読むと、 Static types for dynamically named properties Mapped types というのが載っている。今日の本題はこいつら。 Static ty

はじめに @babel/preset-typescriptというBabelのプリセットが出て以来、tscコマンドではなくBabelによって、TypeScriptで書いたコードをJavaScriptに変換できるようになりました。既にtscコマンドを日常的に使いながらTypeScriptを書いている人には影響はないですが、これからTypeScriptで書いてみようという人（かつ、既にBabelに慣れている人）にとっては、TypeScriptとの付き合い方の選択肢が増えたことになります。 この記事では、Babelでできるようになった事の範疇や、今まで通りにtscコマンドに担ってもらう事について、設定例を交えながら整理していきます。 前提として、Babelのバージョンは7が対象です。 @babel/preset-typescriptが出る前は 大まかに示すと、TypeScriptでコードを書く際は

注: この記事は結構古いです Unknown にアクセスしたい。- TypeScript で外部データを型安全に読み込む。 - Qiita も見て下さい。 TypeScript にもだいぶ慣れてきた。慣れてくると間違えやすい部分もはっきりしてきた。それが Type assertions (キャスト)。Type assertions を使うと、実際のデータがどうであろうが強制的に型情報を書き換えてしまえるので、有り難い Typescript の型チェックをすり抜けてしまう。Typescript では Type assertion を使う代わりに実行時型チェックを強制する Type Guard という仕組みがあるので試してみた。 失敗例 まずは Type assertions を使ったよくある失敗例。JSON データの内容によって別の型として扱おうとしている。 interface Song {