サクサク読めて、アプリ限定の機能も多数!
トップへ戻る
Appleイベント
typescriptbook.jp
Promiseを利用した非同期処理をより簡単に書ける構文としてasync/awaitが存在します。 この構文を利用することで、非同期処理をより同期処理と同じような文脈で書くことができるようになります。 async/awaitは基本セットで使いますが、本ページではawaitを主に取り上げます。 awaitawaitはPromiseの値が解決されるまで実行を待機して、解決された値を返します。 awaitの注意点として基本的にawaitはasync関数の中でしか使えません。
TypeScriptで戻り値がない関数の戻り値を型注釈するにはvoid型を用います。void型は関数の戻り値を型注釈するためにある特別な型です。
Conditional Typesは日本語では条件付き型、型の条件分岐、条件型などと呼ばれ、ちょうど三項演算子のように?と:を使ってT extends U ? X : Yのように書きます。これはTがUに割り当て可能である場合、Xになり、そうでない場合はYになります。 このような場合だと型はtrueになります。
型システムの背景理論プログラミング言語の型システムにはそれぞれ固有の世界観があり、言語ごとに型の機能が異なります。 その一方で複数の言語で共通している機能もあり、それらのさまざまな型の機能は唐突にどこからともなく出現してきたわけではありません。背景として大きくは型理論(type theory)と呼ばれる数学的な研究分野があり、各言語の型システムは型理論に基づいて実装されています。 たとえば、TypeScriptのunknown型やnever型のような一見何のためにあるか分からないような型であっても、型理論においてはその役割や機能を一般的に説明することができます。これらの型はトップ型やボトム型と呼ばれる型の種類に分類され、部分型関係が作る階層構造の両端点に位置する型として振る舞います。 部分型階層の両端点に位置する型型理論的な観点からの知識を持つことで似たような型システムを持つ他の言語にお
keyofはオブジェクトの型からプロパティ名を型として返す型演算子です。たとえば、nameプロパティを持つ型に対して、keyofを使うと文字列リテラル型の"name"が得られます。
コピーnumber型はIEEE 754という規格に準拠していて、その制約によって生じる現象です。10進数の0.2は有限小数ですが、それを2進数で表すと0.0011...のような循環小数になります。循環小数は小数点以下が無限に続きますが、IEEE 754が扱う小数点以下は有限であるため、循環小数は桁の途中で切り捨てられます。その結果、小数の計算に誤差が生じてしまうわけです。これはちょうど、私達が円周率の計算を筆算するときの制約に似ています。円周率は3.141592...と無限に小数点以下が続きますが、時間も紙面も有限なため、ある程度の誤差は妥協して3.14に丸めて計算するかと思います。ちなみに、2進数で有限小数になる0.5や0.25などの数値だけを扱う計算は誤差なく計算できます。
instanceof演算子は、オブジェクトがクラスのインスタンスかを判定するJavaScriptの演算子です。ここでは、instanceof演算子がTypeScriptのインターフェースとどのような関係にあるのかを解説します。 他言語のinstanceofとの違いJavaやPHPなど他の言語のinstanceof演算子は、インターフェースに用いることができる言語もありますので、他言語の次にTypeScriptに学ぶ場合は注意してください。次はPHPでinstanceof演算子をインターフェースに使っている例です。
JavaScriptやTypeScriptの関数には、Pythonにあるキーワード引数のような機能はありません。その代わり、分割代入引数を応用することで、キーワード引数と同じようなことができます。 キーワード引数とはキーワード引数(keyword argument)は、Pythonの機能です。関数呼び出し時に、値だけを指定するのではなく、引数名を使って「名前=値」の形式で引数を指定する方法です。
メインコンテンツまでスキップ国内最大級のTypeScriptカンファレンス! TSKaigi・2024/5/11(土)📄️ 変数宣言: letとconstJavaScriptの変数宣言(variable declaration)には、letとconstがあります。 📄️ 変数宣言の型注釈TypeScriptでは変数宣言するときに、その変数にどんな値が代入可能かを指定できます。その指定のことを型注釈(type annotation; 型アノテーション)と言います。変数宣言の型注釈は、次のように変数名の右に型を書きます。 📄️ varはもう使わないvarは古い変数宣言の方法です。varにはいくつかの問題点がありました。それを解決するために、ES2015でletとconstが導入されました。ここでは、varとその問題点を説明します。新たにコードを書く場合にはvarは使わずにletとcons
TypeScriptでは、extendsキーワードを利用して定義済みのインターフェースを継承して、新たにインターフェースを定義することができます。インターフェースを継承した場合、継承元のプロパティの型情報はすべて引き継がれます。新しくプロパティを追加することもできますし、すでに宣言されているプロパティの型を部分型に指定しなおすこともできます。 プロパティを追加する
ウェブアプリケーションのフロントエンドを開発するのに、最低限の必要となる言語はHTMLやCSSを除けばJavaScriptだけです。JavaScriptさえ使えれば、かなり自由にフロントエンドを実装できます。それなのに、なぜJavaScriptではなくTypeScriptを使ったほうがいいのでしょうか?ここでは、TypeScriptを使うべき理由を大きく分けて4つ見ていきます。 TypeScriptは大規模開発に最適な言語TypeScriptが発明されるに至った歴史的背景を「TypeScript誕生の背景」で見ましたが、JavaScriptではまかないきれなくなった大規模アプリケーション開発を克服するために生まれたのがTypeScriptです。 📄️ TypeScript誕生の背景TypeScriptは、JavaScriptでも大規模なアプリケーションを開発しやすくすることを目的に開発
JavaScriptには、オブジェクトの分割代入(destructuring assignment)という便利な構文があります。分割代入は、オブジェクトからプロパティを取り出す機能です。 通常、オブジェクトからプロパティを取り出す場合は、プロパティアクセサーを用います。プロパティアクセサーは、ドットを使ってプロパティを参照する記法です。
TypeScriptを覚えるとさまざまなものを作れるようになります。TypeScriptはJavaScriptにコンパイルして使う言語です。そのため、JavaScriptで作れるものは何でも作れます。ここでは、TypeScriptを学んだらどのようなソフトウェアを作れるのか、「TypeScriptの射程」について説明します。 フロントエンドTypeScriptがもっとも人気な分野は、フロントエンドアプリケーション開発です。ブラウザで動くアプリです。ブラウザではJavaScriptが圧倒的な地位を確立しています。TypeScriptはJavaScriptのエコシステムに乗っかっているため、フロントエンドアプリケーション開発で大きな力を発揮します。 バックエンドバックエンドアプリケーションもTypeScriptを使って開発ができます。技術的にはNode.jsというサーバーサイドJavaSc
アロー関数(arrow function)はJavaScriptの関数を作る方法のひとつです。 アロー関数の構文JavaScriptのアロー関数は短く書けるのが特徴的です。カッコに引数のリスト、アロー記号=>、中カッコに処理内容を書きます。
TypeScriptには本書や開発元のMicrosoftが提供しているものを含め、学習や調査に役立つ数多くのリソースが存在しています。 このページでは本書の解説を読んだ後や、読んでいる途中でも利用できるTypeScriptについての情報源を紹介します。さらにこのページの後半では学習や開発において非常に重要となる公式ドキュメントについて構造と読み方などを含めた攻略方法を解説します。
このチュートリアルでは、コードフォーマッターの「Prettier」を使いTypeScriptのコードフォーマットを自動化することを学びます。 本章で学べること本章ではPrettierを導入してコード整形を自動化することを目標に次のことを学びます。 Prettierの導入方法Prettierの実行方法整形ルールの設定方法PrettierとはPrettierはコードのフォーマットを自動整形するツールです。Prettierがサポートしている形式は幅広く次の形式をサポートしています。 また、プラグインを利用することでPHPなどの他の言語のフォーマットを行うこともできます。 JavaScriptTypeScriptJSXFlowJSONHTMLVueAngularEmberCssLessSCSSstyled-componentsstyled-jsxGraphQLMarkdownMDXYAMLSv
プロパティへのインターセプター(参照・代入・監視などの意味)としGetter/Setterがあります。 記述方法のサンプルは次のようになります。
PDRはPublisher's Decision Recordの略で、これまでコミュニティがどんな意思決定をしたかを記録したものです。 プロジェクトに後から参加した人にとって、本プロジェクトの方針や執筆に使うツール、文体、技術スタックなどが「どうしてそれが選ばれたのか?」「どのような経緯でそうなったのか?」といったことがわかりにくくなります。 PDRはそのような「なぜ」への答えになるよう、決定したことだけでなく、背景と理由、そして検討した代替手段などについて書きます。 採用📄️ 0000-なぜ私たちは技術書を書くのか?- ステータス: 採用 📄️ 0002-イテレーティブな執筆プロセス- ステータス: 採用 📄️ 0003-読者層本書はどのような読者層を想定するか? 📄️ 0004-各ページのステータス管理方法各ページのステータス管理方法について 📄️ 0005-本書利用者への
Next.jsの概要Next.jsは、オープンソースのUIライブラリReactをベースにしたフロントエンドフレームワークです。 Reactで開発する場合、webpackのようなバンドラーを用いるのが普通です。webpackの設定ファイルを記述するには、一定の知識が必要です。特に、チャンク分割やCSSモジュールの設定は複雑だったりと、設定ファイルのメンテナンスが大変です。Next.jsは、webpackの設定があらかじめなされた状態で開発が始められるようになっています。 Next.jsはルーティング時のプリフェッチや画像の最適化などのパフォーマンス最適化をフレームワーク内で内包しており、ゼロコンフィグで簡単にパフォーマンスの高いアプリケーションを構築することができます。ページ単位のサーバーサイドレンダリング(SSR)や静的サイト生成(SSG)の機能も提供しており、用途に合わせて柔軟にアーキ
多くの開発者がTypeScriptを高く評価しています。そのような中、誤解の上にTypeScriptを過度に高評価する人もいます。TypeScriptも魔法の杖ではありません。本稿では、TypeScriptが何を解決してくれないのかを見ていきます。TypeScriptでできないことを無理にやらせようとしても、その努力は無駄になりますから、これを理解することは重要です。 実行時の高速化・省メモリ化に影響しないしばしば、TypeScriptとJavaScriptを比較する話の中で、次のような言説が見られます。 TypeScriptはJavaScriptより高速に実行できるTypeScriptはJavaScriptよりメモリ消費量が少ないまた逆に次のように心配されることもあります。 TypeScriptはJavaScriptで書くより低速になるのでは?TypeScriptはJavaScript
このチュートリアルでは、Reactコンポーネントのテストを書くことを学びます。 本章で学べること本章では、簡単なコンポーネントのテストを書くことを目標に、具体的には次のことをやっていきます。 UIテストのためのライブラリ群testing-libraryを使ったテストの作成Jestを使ったスナップショットテストの作成本章の目的はコンポーネントのテストを完全に理解することではありません。むしろ、それがどういったものなのか、その雰囲気を実際に体験することに主眼を置いています。そのため、内容はかなり最低限のものとなりますが、逆に言えば少しの時間でコンポーネントテストを試してみれるシンプルな内容にまとまってますから、ぜひ手を動かしてみてください。 このチュートリアルで作成するテストコードの完成形はGitHubで確認することができます。 このチュートリアルに必要なものこのチュートリアルをやるに当た
JavaScriptのboolean型は、trueとfalseの論理値からなる型です。 boolean型リテラルJavaScriptのboolean型リテラルはtrueまたはfalseを用いて次のように書きます。
配列の分割代入JavaScriptでは、配列から要素を取り出す方法のひとつに、array[1]のようにインデックスでアクセスする方法があります。この方法とは別に、分割代入(destructuring assignment)という方法を使っても、配列要素にアクセスできます。 たとえば、[1, 2, 3, 4, 5]のような配列から、最初の3要素を取り出して変数に代入するには次のように書きます。
TypeScriptでは、関数の型を宣言できます。関数の型の宣言とは、関数の実装を示さずに、関数のインターフェースを定義することです。 関数の型宣言構文関数の型宣言は、型エイリアスを用います。構文は次のようになります。
Cannot assign to 'foo' because it is a read-only property.2540Cannot assign to 'foo' because it is a read-only property. コピーreadonlyは再帰的ではないreadonlyは指定したそのプロパティだけが読み取り専用になります。readonlyはそのオブジェクトが入れ子になっている場合、その中のオブジェクトのプロパティまでをreadonlyにはしません。つまり、再帰的なものではありません。 たとえば、fooプロパティがreadonlyで、foo.barプロパティがreadonlyでない場合、fooへの代入はコンパイルエラーになるものの、foo.barへ直接代入するのはコンパイルエラーになりません。
Readonly<T>は、オブジェクト型Tのプロパティをすべて読み取り専用にするユーティリティ型です。 Readonly<T>の型引数T型引数Tにはオブジェクト型を代入します。 Readonlyの使用例
パッケージを使う人にもTypeScriptによる型の享受を目指すパッケージを公開するときは、動作する形で公開するのが前提なのでjsにする必要があります。つまりコンパイルは必須です。ですがせっかくTypeScriptで作ったのだからパッケージの型情報も提供しましょう。 型定義ファイルも出力する型定義ファイルを一緒に出力しましょう。そのためにはtsconfig.jsonにあるdeclarationの項目をtrueに変更します。
メソッドの引数にはアクセス修飾子を設定することはできませんがコンストラクタは特別です。 引数に対してアクセス修飾子を宣言した場合はこのような意味になります。 アクセス修飾子説明
コピー内容は確認を促す変哲もないシステムのメッセージです。このオブジェクトを使ってシステムがサポートしている言語の一覧を作ります。次のようなユニオン型が今回の目的です。
次のページ
このページを最初にブックマークしてみませんか?
『TypeScript入門『サバイバルTypeScript』〜実務で使うなら最低限ここだけはおさえ...』の新着エントリーを見る
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く