30歳からのプログラミング

30歳無職から独学でプログラミングを開始した人間の記録。

TypeScript

TypeScript における変性(variance)について

プログラミングの型システムに関する記事を読んでいると、共変や反変といった用語が出てくることがある。 TypeScript や Flow についての記事でも、見かけることがある。 それらは TypeScript を使う上で必須の知識ではないが、把握しておくに越したことはな…

TypeScript の共用体型(Union Types)は or ではない

この記事の内容は、TypeScript のv3.9.5で動作確認している。 TypeScript をよく理解している人にとっては常識なのかもしれないが、共用体型はorではない。つまり、A | Bは、A or Bではない。 当初これを理解していなかったため、なぜ以下のコードがエラーに…

TypeScript の条件型(Conditional Type)と infer キーワード

TypeScript には条件型(Conditional Type)という機能があり、これを使うと型定義に条件分岐を持ち込むことができる。 この記事の内容は TypeScript のv3.9.5で動作確認している。 条件型の基本 T extends U ? A : Bが、条件型の構文。 TがUに割り当て可能…

TypeScript の型ガードの注意点と解決法

TypeScript には型を推論する機能があり、条件分岐の際に自動的に型を絞り込んでくれる。この仕組みを型ガード(Type Guard)と呼ぶ。 ただし万能ではなく、自動的な絞り込みが機能しないケースもある。その場合、isを使って開発者が TypeScript に型を教える…

TypeScript のルックアップ型と keyof キーワード

TypeScript のルックアップ型を使うと、定義済みの型の一部分を取り出すことができる。 keyofキーワードと組み合わせることで、オブジェクトの各キーの型を取り出すこともできる。 この記事の内容は TypeScript のv3.9.5で動作確認している。 ルックアップ型…

TypeScript のジェネリック型の初歩

ジェネリック型は、型を定義したときには具体的な型を指定せず、型を利用する際に具体的な型が決まる仕組み。 後述するが、プレースホルダや関数のパラメータのようなものだと考えると、分かりやすい。 ジェネリック型はそれ自体が便利だし、TypeScript の他…

TypeScript の「オーバーロード」について

オーバーロードとは、関数に対して複数の型を定義すること。 複数の型を持つ関数を「オーバーロードされた関数」と呼んだりする。 オーバーロードによって、「渡された引数の数によって各パラメータの型が変わる関数」や「パラメータの型によって返り値の型…

React アプリのモーダルを dialog 要素で実装する

モーダルは、ウェブアプリケーションでよく使われる機能であり、実装する事が多い。 便利だし、利用者にとっても見慣れた UI なので導入しやすい。 だが、ブラウザや HTML には、モーダルという要素は用意されていない。 似て非なるものとしてalertがあるが…

TypeScript で抽象クラスと抽象メンバを使って変更に強いコードを設計する

TypeScript にはabstractキーワードという機能があり、これを使うことで抽象クラスや抽象メンバを宣言することができる。 この機能を上手く使ってクラスを作ることで、可読性が高く、変更にも強いコードを設計できる。 abstractキーワードを使ったクラスやメ…

TypeScript でクラスを書くための初歩

TypeScript は、まだ ECMAScript に追加されていない提案段階の機能を積極的に先取りしている。 それはクラスも例外ではなく、例えば先日リリースされたv3.8では、現時点ではまだ提案段階であるプライベートフィールドが使えるようになった。 この記事では、…

never 型を使った TypeScript のテクニック

「発生し得ない値」などのように説明されるnever型。 概念としては分かるのだが、実際にどのようなケースで使えばよいのかイメージできずにいた。 neverを使ったテクニックを調べていて多少のイメージは掴めてきたので、整理しておく。 動作確認は TypeScrip…

TypeScript の構造的部分型とプリミティブ型について

TypeScript の構造的部分型という概念は、直感的で分かりやすい。 だが一方で、Freshness やプリミティブ型の挙動など、よく理解しておかないと戸惑ってしまうような挙動も多い。 例えば、なぜ以下のコードがエラーにならないのか、最初は分からなかった。 c…

React Hooks + Redux Hooks + TypeScript で SPA を構築する(追記あり)

2020/05/31 追記 勉強や経験を重ねた結果、この記事を執筆した時より知識が増え、コードの書き方にも変化があります。 サンプルアプリも同様で、以下のプロダクトのコードのほうが、今の自分の考えが反映されていると思います。 github.com 追記終わり 2019/…

郵便番号で住所を検索できる npm パッケージ Ken All を公開した

パッケージ名はken-all。 github.com 郵便番号を渡すと、該当する住所を値として持つpromiseオブジェクトを返す。 import KenAll from 'ken-all'; // [['東京都', '千代田区', '大手町']]; KenAll('1000004').then(res => console.log(res)); 詳しい使い方は…

TypeScript で npm パッケージを作る

TypeScript で書いたプログラムを npm パッケージとして配布する手順を書いていく。 まだ npm パッケージの配布をしたことがない人を、想定読者としている。 よりよい書き方、詳細な設定、は措いておき、まずは最低限の要件を満たすものを作り上げる。 今回…

Jest + Enzyme のテストコードを TypeScript で書く

TypeScript で書いている React アプリで、ユニットテストも TypeScript で書くようにするための手順。 テスティングフレームワークはJestで、ReactコンポーネントのテストをしやすくするためにEnzymeも使う。 また、アサーションライブラリとしてPower Asse…

既存プロジェクトを TypeScript に移行する際の ESLint の対応

JavaScript で書いていたプロジェクトを TypeScript に移行する場合、アノテーションの追加やビルドの設定の他、ESLint の対応も必要になる。 この記事では、TypeScript に移行した後も引き続き ESLint を使えるようにするための手順を書いていく。 方針とし…

babel-loader で TypeScript をビルドする

最小構成のサンプルから始めて、React のビルドや Babel プラグインの利用も出来るようにしていく。 当初はts-loaderとbabel-loaderを組み合わせてビルドする予定だったのだが、Babel プラグインが動かなかったので断念した。この資料の内容に沿って設定して…