サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
デスク環境を整える
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は、フロント
TypeScriptのunknown型は、型が何かわからないときに使う型です。 unknown型にはどのような値も代入できます。
コピーこの章では、インターフェースと型エイリアスの違いについて詳しく説明していきます。 インターフェースと型エイリアスの違い内容インターフェース型エイリアス
JavaScriptにはJavaに似た例外処理の構文があります。例外にはErrorオブジェクトを使い、throw構文で例外を投げます。try-catch構文で例外を捕捉できます。
never型は「値を持たない」を意味するTypeScriptの特別な型です。 neverの特性何も代入できないnever型には何も代入できません。
Pick<T, Keys>は、型TからKeysに指定したキーだけを含むオブジェクトの型を返すユーティリティ型です。 Pick<T, Keys>の型引数T型引数Tにはオブジェクトの型を代入します。 KeysKeysにはオブジェクトの型Tのプロパティキーを指定します。object型Tに存在しないプロパティーキーを指定するとコンパイルエラーになります。 Pickの使用例
本章では、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で統一的な決まりはありません。言語によって異なるのです。言語によりオブジェクト生成の細部は異なりますが、生成方法は大きく分けて「クラ
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をコピペする解読したいコード部分をクリックする右エリアにコードの意味などが表示されるサンプルコード入力するコードがない場合はサンプルコードでお試しください。 サンプルコード機密情報コードはすべてオフラインで処理され、サーバ
ECMAScriptはJavaScriptの仕様です。TypeScriptもECMAScriptに準拠しています。ECMAScriptとは何なのか、仕様改定のプロセス、ECMAScriptとブラウザの関係がどのようになっているかについて解説します。 JavaScriptとECMAScriptの関係ECMAScriptはJavaScriptの仕様を定義したものです。仕様とは決まりごとのことで、ブラウザなどがJavaScriptを読み込んだときに、どのような文法を解釈しなければならないか、処理がどのように動くべきかといったことを決めたものです。ECMAScriptという異なる名前がついていますが、JavaScriptと別の言語があるわけではありません。 歴史的には、JavaScriptを標準化するべく、ECMAScriptが策定されました。JavaScriptはNetscape社が開発した言
前ページではオブジェクトの浅いコピーについて語りました。 そこでは以前出てきたスプレッド構文 (...) のおかげで簡単に浅いコピーができることがわかりました。 今回はふたつ以上のオブジェクトをマージすることを考えます。なお、前ページのオブジェクトの浅いコピーで得た知識を活用するため、まだお読みでない方については改めてお読みいただき、その後こちらをご覧ください。 📄️ オブジェクトを浅くコピーするオブジェクトとは色々なキーとプロパティの組み合わせをひとつのモノとして扱うことができます。 今回行うマージについてマージという言葉をよく聞くのは Git などに代表される VCS (Version Control System) でしょう。一般的にマージはする側とされる側が存在し、する側にされる側のすべて (時に選択できる) が移動ないしコピーされることを指すことが多いでしょう。 JavaSc
この章では、TypeScriptを使った実践的な開発の流れを学びます。次のチュートリアルを用意しています。 開発環境の準備簡単な関数を作ってみようReactでいいねボタンを作ろうNext.jsで猫画像ジェネレーターを作ろうVercelにデプロイしてみようJestでテストを書こうReactコンポーネントのテストを書こうPrettierでコード整形を自動化しようESLintでコーディング規約を自動化しようこの章の目的は、「もし実務でTypeScriptを使ったらどんな開発になるのか?」について体験することです。この章を進めるにあたって、TypeScriptの知識はまだ無くても構いません。解説の手順どおりに進めることで、開発を追体験できるようになっています。 この章でのTypeScriptについての解説は最小限です。チュートリアルを進めるにあたり、必要なものは解説します。しかし、言語の詳しい仕様
このチュートリアルでは、TypeScriptとReactの両方を用いて、SNSでよく見かける「いいねボタン」のUIを実装します。 本チュートリアルは、TypeScriptとReactによるコーディングの体験をすることを主眼に置いています。そのため、TSとReactの理論的な説明は省きます。「TypeScriptとReactでUIを開発するにはどのような流れになるのか」を感じ取って頂くことを目的としています。 Reactの専門書と比べて、本書の解説は詳しさや正確さは劣ります。それでも、初めてReactに触れる方でも読み進められるよう、Reactについて随時ワンポイント解説をしていくので、安心してお読みください。 このチュートリアルで作成するいいねボタンの最終的な成果物はデモサイトで確認できます。チュートリアルを開始する前に事前に触ってみることで、各ステップでどんな実装をしているかのイメージが
JavaScriptのオブジェクトは、プロパティの集合体です。プロパティはキーと値の対です。プロパティの値には、1や"string"のようなプリミティブ型や関数、そして、オブジェクトも入れることができます。
次のページ
このページを最初にブックマークしてみませんか?
『TypeScript入門『サバイバルTypeScript』〜実務で使うなら最低限ここだけはおさえ...』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く