サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
猫
typescriptbook.jp
型システムの背景理論プログラミング言語の型システムにはそれぞれ固有の世界観があり、言語ごとに型の機能が異なります。 その一方で複数の言語で共通している機能もあり、それらのさまざまな型の機能は唐突にどこからともなく出現してきたわけではありません。背景として大きくは型理論(type theory)と呼ばれる数学的な研究分野があり、各言語の型システムは型理論に基づいて実装されています。 たとえば、TypeScriptのunknown型やnever型のような一見何のためにあるか分からないような型であっても、型理論においてはその役割や機能を一般的に説明することができます。これらの型はトップ型やボトム型と呼ばれる型の種類に分類され、部分型関係が作る階層構造の両端点に位置する型として振る舞います。 部分型階層の両端点に位置する型型理論的な観点からの知識を持つことで似たような型システムを持つ他の言語にお
TypeScriptには本書や開発元のMicrosoftが提供しているものを含め、学習や調査に役立つ数多くのリソースが存在しています。 このページでは本書の解説を読んだ後や、読んでいる途中でも利用できるTypeScriptについての情報源を紹介します。さらにこのページの後半では学習や開発において非常に重要となる公式ドキュメントについて構造と読み方などを含めた攻略方法を解説します。
プロパティへのインターセプター(参照・代入・監視などの意味)としGetter/Setterがあります。 記述方法のサンプルは次のようになります。
パッケージを使う人にもTypeScriptによる型の享受を目指すパッケージを公開するときは、動作する形で公開するのが前提なのでjsにする必要があります。つまりコンパイルは必須です。ですがせっかくTypeScriptで作ったのだからパッケージの型情報も提供しましょう。 型定義ファイルも出力する型定義ファイルを一緒に出力しましょう。そのためにはtsconfig.jsonにあるdeclarationの項目をtrueに変更します。
このチュートリアルでは、テストフレームワーク「Jest」を使い、ユニットテストをTypeScriptで書くことを学びます。 本章で学べること本章では、簡単な関数のテストをJestで書くことを目標に、次のことを学びます。 Jestを使ってTypeScriptの関数をテストする方法Jestの導入方法Jestでのテストの書き方テストの実行方法結果の見方本章の目的はJestを完全に理解することではありません。むしろ、Jestがどういったものなのか、その雰囲気を実際に体験することに主眼を置いています。そのため、内容はかなり最低限のものとなりますが、逆に言えば少しの時間でJestを試してみれるシンプルな内容にまとまってますから、ぜひ手を動かしてみてください。 JestとはJestはJavaScriptのテストフレームワークです。TypeScriptでテストを書くこともできます。Jestは、フロント
コピーこの章では、インターフェースと型エイリアスの違いについて詳しく説明していきます。 インターフェースと型エイリアスの違い内容インターフェース型エイリアス
never型は「値を持たない」を意味するTypeScriptの特別な型です。 neverの特性何も代入できないnever型には何も代入できません。
JavaScriptの関数は、関数宣言、関数式、アロー関数の3通りの方法で作れます。 アロー関数は後発JavaScriptの歴史を紐解くと、元々は関数宣言と関数式しかありませんでした。この2つの機能上の違いはほぼありません。この2つはまとめて「従来の関数」と呼びます。アロー関数は、従来の関数の問題点を解決するために、あとで導入されたものです。 構文の簡潔さ従来の関数は構文の長さが問題でした。JavaScriptではよくコールバック関数を書きます。コールバック関数とは、関数の引数として渡される関数を言います。従来の関数は、関数を書くたびにfunctionキーワードを書く必要があります。処理が1行だけでも、複数行要するコーディングスタイルもあります。書くのも読むのもわずらわしいコードになりがちです。一方で、アロー関数は短くシンプルな記述になります。
Pick<T, Keys>は、型TからKeysに指定したキーだけを含むオブジェクトの型を返すユーティリティ型です。 Pick<T, Keys>の型引数T型引数Tにはオブジェクトの型を代入します。 KeysKeysにはオブジェクトの型Tのプロパティキーを指定します。object型Tに存在しないプロパティーキーを指定するとコンパイルエラーになります。 Pickの使用例
TypeScriptの関数は1値のみ返却可能です。戻り値に複数の値を返したい時に、配列に返したいすべての値を入れて返すことがあります。なお次の関数の戻り値は定数になっていますが、実際は演算した結果だと解釈してください。
コピーこれらのクラスは、walkメソッドを持つ点で似ています。このようなとき、Person型とDog型は「互換性がある」とみなすことができるでしょうか。それとも、まったく異なる型として扱うべきでしょうか。 こうした問題を扱うために、プログラミング言語はさまざまな型システムを採用しています。どのように型を区別すべきか、また、どのように型同士の互換性を判断するべきか、このような観点から型システムの仕様を考える必要があります。TypeScriptでは、「構造的型付け」という型システムが採用されています。構造的型付けがどのように型を区別し、逆にどのように型同士に互換性があると判断するのか、こうした言語仕様を知ることは、よいコードを書くために役立ちます。 型の区別に関する2つのアプローチプログラミング言語における型の区別や互換性の判定には、主に次の2つのアプローチが存在します。 名前的型付け構造的
コピーobject型、Object型、{}型の違いobject型やObject型、{}型の3つは類似する部分がありますが、object型と他の2つは異なる点があります。 object型object型はオブジェクトだけが代入できる型です。JavaScriptの値はプリミティブ型かオブジェクトの2つに大分されるので、object型はプリミティブ型が代入できない型とも言えます。
本章では、ESLintイーエスリントを使って、TypeScriptをチェックするためのノウハウをチュートリアル形式で学びます。 本章で学べること本章では次のことを学んでいただきます。 コーディング規約の必要性とコーディング規約の問題点ESLintでJavaScriptやTypeScriptをチェックする方法ESLintのルールの設定のしかたAirbnbのコーディング規約をESLintで活用する術エラーを解消する方法チェックを部分的に無効化する方法VS CodeやJetBrains IDEとESLintを統合する方法チュートリアルをやり終えると、ご自身のプロジェクトにESLintを導入できるようになったりと、実務で役立つ基本的なスキルが身につくはずです。 本章の流れと読み進め方本章は次の3部構成です。 背景知識ESLintでJavaScriptをリントしようESLintでTypeScri
ここではJavaScriptのプロトタイプベースの概要を説明します。JavaやPHPなどでクラスを使ったことがある方や、オブジェクト指向プログラミングに触れたことがある方を念頭に書いています。また、ここでは主に次の疑問に答えていきます。 プロトタイプベースとはどのような考え方なのか?プロトタイプベースのJavaScriptは、クラスベースのPHPやJavaとどんなところが違う?なぜJavaScriptはプロトタイプベースを採用したのか?プロトタイプベースの利点は何か?オブジェクトの生成オブジェクト指向プログラミング(OOP)では、オブジェクトを扱います。オブジェクトを扱う以上は、オブジェクトを生成する必要があります。 しかし、オブジェクトの生成方式は、OOPで統一的な決まりはありません。言語によって異なるのです。言語によりオブジェクト生成の細部は異なりますが、生成方法は大きく分けて「クラ
TypeScriptの列挙型(enum)にはいくつか問題点が指摘されていてます。ここでは、その問題点と代替手段を説明します。 列挙型の問題点列挙型はTypeScript独自すぎるTypeScriptは、JavaScriptを拡張した言語です。拡張といっても、むやみに機能を足すのではなく、追加するのは型の世界に限ってです。こういった思想がTypeScriptにはあるため、型に関する部分を除けば、JavaScriptの文法から離れすぎない言語になっています。 JavaScriptの文法からドラスティックに離れたAltJSもあります。その中で、TypeScriptが多くの開発者に支持されているのは、JavaScriptから離れすぎないところに魅力があるからというのもひとつの要因です。 TypeScriptの列挙型に目を向けると、構文もJavaScriptに無いものであるだけでなく、コンパイル
Partial<T>は、オブジェクトの型Tのすべてのプロパティをオプションプロパティにするユーティリティ型です。 Partial<T>の型引数T型引数Tにはオブジェクトの型を渡します。 Partialの使用例
フロントエンドでもバックエンドでもTypeScriptこれ一本!Universal JSという考えがあります。確かにフロントエンドを動的にしたいのであればほぼ避けて通れないJavaScriptと、バックエンドでも使えるようになったJavaScriptで同じコードを使いまわせれば保守の観点でも異なる言語を触る必要がなくなり、統一言語としての価値が大いにあります。 しかしながらフロントエンドとバックエンドではJavaScriptのモジュール解決の方法が異なります。この差異のために同じTypeScriptのコードを別々に分けなければいけないかというとそうではありません。ひとつのモジュールをcommonjs, esmoduleの両方に対応した出力をするDual Packageという考えがあります。 Dual Packageことはじめ名前が仰々しいですが、やることはcommonjs用のJavaSc
Record<Keys, Type>はプロパティのキーがKeysであり、プロパティの値がTypeであるオブジェクトの型を作るユーティリティ型です。 Record<Keys, Type>の型引数Keysオブジェクトのプロパティーキーを指定します。Keysに代入できる型は、string、number、symbolとそれぞれのリテラル型です。 Typeオブジェクトのプロパティの値の型を指定します。任意の型が代入できます。 Recordの使用例キーがstringで値がnumberのインデックス型を定義する。
TypeScript解読アシスタントこれはTypeScriptのコードリーディングを支援するツールです。 既存TypeScript案件に参加した際に、既存コードを読むにあたって、次のような悩みを解決するためのものです。 TypeScriptの構文がよくわからない「??って何?」「#nameの#ってコメント?」「<></>って何?」言語機能の名前がわからず、調べようがない「string | undefinedの|ってなんて名前?」「value as anyってなんて機能?」「[K: string]: stringって何?」使い方左のエディターに解読したいTypeScriptをコピペする解読したいコード部分をクリックする右エリアにコードの意味などが表示されるサンプルコード入力するコードがない場合はサンプルコードでお試しください。 サンプルコード機密情報コードはすべてオフラインで処理され、サーバ
型の安全性とコードの共通化の両立は難しいものです。あらゆる型で同じコードを使おうとすると、型の安全性が犠牲になります。逆に、型の安全性を重視しようとすると、同じようなコードを量産する必要が出てコードの共通化が達成しづらくなります。こうした問題を解決するために導入された言語機能がジェネリクスです。ジェネリクスを用いると、型の安全性とコードの共通化を両立することができます。 ジェネリクスが解決する問題ジェネリクスが具体的にどのような問題を解決するのか見ていきましょう。ここに、chooseRandomlyString()という普通の関数があります。この関数は、2つの文字列を引数に受け取り、五分五分の確率で第1引数か第2引数の値を抽選して返します。
ECMAScriptはJavaScriptの仕様です。TypeScriptもECMAScriptに準拠しています。ECMAScriptとは何なのか、仕様改定のプロセス、ECMAScriptとブラウザの関係がどのようになっているかについて解説します。 JavaScriptとECMAScriptの関係ECMAScriptはJavaScriptの仕様を定義したものです。仕様とは決まりごとのことで、ブラウザなどがJavaScriptを読み込んだときに、どのような文法を解釈しなければならないか、処理がどのように動くべきかといったことを決めたものです。ECMAScriptという異なる名前がついていますが、JavaScriptと別の言語があるわけではありません。 歴史的には、JavaScriptを標準化するべく、ECMAScriptが策定されました。JavaScriptはNetscape社が開発した言
多くのプログラミング言語で「値がない」を表現する方法は、nullなど1通りです。しかし、JavaScriptでは「値がない」に相当する表現にnullとundefinedの2通りがあります。他の言語からJavaScriptに来た人が驚き、使い分けに悩む部分です。ここでは、nullとundefinedの仕様上の違い、実際のコーディングでどう使い分けるべきかについて説明します。 意味合いの違いundefinedとnullは大きなくくりで「値がない」ことを意味する点は共通しています。意味的な違いがあるとしたら、undefinedは「値が代入されていないため、値がない」、nullは「代入すべき値が存在しないため、値がない」という微妙な違いです。 この意味的な違いを厳密につきつめてコーディングするのは、入門者には難しいものです。使い分けに客観的な基準があるわけではないためです。もしどちらを使うべきか
前ページではオブジェクトの浅いコピーについて語りました。 そこでは以前出てきたスプレッド構文 (...) のおかげで簡単に浅いコピーができることがわかりました。 今回はふたつ以上のオブジェクトをマージすることを考えます。なお、前ページのオブジェクトの浅いコピーで得た知識を活用するため、まだお読みでない方については改めてお読みいただき、その後こちらをご覧ください。 📄️ オブジェクトを浅くコピーするオブジェクトとは色々なキーとプロパティの組み合わせをひとつのモノとして扱うことができます。 今回行うマージについてマージという言葉をよく聞くのは Git などに代表される VCS (Version Control System) でしょう。一般的にマージはする側とされる側が存在し、する側にされる側のすべて (時に選択できる) が移動ないしコピーされることを指すことが多いでしょう。 JavaSc
この章では、TypeScriptを使った実践的な開発の流れを学びます。次のチュートリアルを用意しています。 開発環境の準備簡単な関数を作ってみようReactでいいねボタンを作ろうNext.jsで猫画像ジェネレーターを作ろうVercelにデプロイしてみようJestでテストを書こうReactコンポーネントのテストを書こうPrettierでコード整形を自動化しようESLintでコーディング規約を自動化しようこの章の目的は、「もし実務でTypeScriptを使ったらどんな開発になるのか?」について体験することです。この章を進めるにあたって、TypeScriptの知識はまだ無くても構いません。解説の手順どおりに進めることで、開発を追体験できるようになっています。 この章でのTypeScriptについての解説は最小限です。チュートリアルを進めるにあたり、必要なものは解説します。しかし、言語の詳しい仕様
JavaScriptやTypeScriptのコードには?.のような記号やasのようなキーワードが使われます。こういった記号やキーワードはGoogleで検索しづらく、意味を調べるのは難しいものです。 この索引は、JavaScriptとTypeScriptの記号やキーワードから、その名前や意味を調べられるようにするためのものです。コードを読んでいて未知の記号やキーワードに出くわしたら、その意味や使い方を調べる手がかりにしてください。 ここで扱う記号とキーワードには、JavaScript由来のもの、つまり、JavaScriptとTypeScriptに共通して使えるものと、TypeScriptでのみ使えるものを併記しています。JavaScript由来のものにはのマークを、TypeScript固有のものにはマークを表示しています。 記号! 論理否定演算子 (logical not operator
このチュートリアルでは、TypeScriptとReactの両方を用いて、SNSでよく見かける「いいねボタン」のUIを実装します。 本チュートリアルは、TypeScriptとReactによるコーディングの体験をすることを主眼に置いています。そのため、TSとReactの理論的な説明は省きます。「TypeScriptとReactでUIを開発するにはどのような流れになるのか」を感じ取って頂くことを目的としています。 Reactの専門書と比べて、本書の解説は詳しさや正確さは劣ります。それでも、初めてReactに触れる方でも読み進められるよう、Reactについて随時ワンポイント解説をしていくので、安心してお読みください。 このチュートリアルで作成するいいねボタンの最終的な成果物はデモサイトで確認できます。チュートリアルを開始する前に事前に触ってみることで、各ステップでどんな実装をしているかのイメージが
JavaScriptのオブジェクトは、プロパティの集合体です。プロパティはキーと値の対です。プロパティの値には、1や"string"のようなプリミティブ型や関数、そして、オブジェクトも入れることができます。
自身のプロジェクトでTypeScriptでコーディングする場合は型を宣言することにより、IDEやエディターの補完機能やコードチェックを行えます。しかし外部のパッケージ(npm)を利用する場合は型定義ファイルが含まれているとは限りません。 型定義ファイルとは型定義ファイルとはアクセス可能な宣言を記述したファイルです。拡張子は.d.tsです。 型定義ファイルは主にパッケージを配布するために作成されます。TypeScriptはJavaScriptにコンパイルされるときに型情報は無くなってしまいます。そのままJavaScriptパッケージを利用すると型定義の恩恵を得ることができません。しかし型定義ファイルを同梱することにより補完やコードチェックとして利用することができます。 残念なことにnpmに公開されているすべてのパッケージに必ずしも定義ファイルが存在するとは限りません。こちらに関しては型定義
実務でアプリケーションを作る場合、複数のJavaScriptファイルを組み合わせて、ひとつのアプリケーションを成すことが多いです。いわゆるモジュール指向の開発です。ここではJavaScriptとTypeScriptでのモジュールと、モジュール同士を組み合わせるためのimport、export、requireについて説明します。 スクリプトとモジュールJavaScriptのファイルは大きく分けて、スクリプトとモジュールに分類されます。スクリプトは普通のJavaScriptファイルです。
次のページ
このページを最初にブックマークしてみませんか?
『TypeScript入門『サバイバルTypeScript』〜実務で使うなら最低限ここだけはおさえ...』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く