npmのパッケージに含まれている型定義ファイルをプロジェクトに関連付ける方法は大きく分けて２つあります。 １. JavaScriptファイルと同じ階層に同じ名前で.d.ts拡張子の型定義ファイルを置く 例を挙げる『ky』というライブラリは、パッケージ内で同じ階層…

JavaScript モジュールを TypeScript から読み込む npmのリポジトリで提供されている多くのパッケージは、TypeScriptで書かれているものでも、TypeScriptのままで配布されているものはあまりありません。 (理由は以下) JavaScript環境との相互運用が簡単であ…

TypeScriptのimport/export JavaScriptとほぼ同じで異なる点は２つあります。 TypeScriptのimportは拡張子を書くとエラーになる 同名の型を扱った場合の挙動 importで拡張子を書くとエラーになる理由 モジュールを解決する際に独自のルールで探索するからで…

復習 in演算子は、指定したオブジェクト上に指定したプロパティがあるかを判定できます。 "プロパティ名" in オブジェクト; // true or false 型アサーション 型を断定するものです。as 断定する型とします。 コンパイラによる型の解釈を変えているだけで、…

型ガード if文の条件式などで型を判定して、スコープ内で型を保証することを型ガードと言います。 typeofやinstanceofを用いて型ガードを行う例を紹介します。 typeofによる型ガード const foo: unknown = '1,2,3,4'; if (typeof foo === 'string') { consol…

型アサーションとは 開発者が型を断定することを、型アサーションと言います。型を断定することによって、コンパイラによる型チェックを強引に通すことができます。しかし、断定した型でコードが実行されるので、メソッドが呼び出せない等、予期せぬエラーが…

続: 組み込みユーティリティ型 NonNullableは型引数に渡した型からnull undefinedを取り除いてくれます。 NonNullable<T> type T1 = NonNullable<string | number | undefined>; type T2 = NonNullable<number[] | null | undefined>; const str:T1 = undefined; //compileerror! const arr:T2 = null; // compile error! R</number[]></string></t>…

テンプレートリテラル型 TypeScriptでは、テンプレートリテラルを型定義として扱うことが出来ます。 type DateFormat = `${number}-${number}-${number}`; const date1: DateFormat = '2020-12-05'; const date2: DateFormat = 'Dec.5,2020'; // compile err…

extends クラスやインターフェースの拡張に使われるextendsキーワードは型引数の表現にも使うことが出来ます。 const override = <T, U extends T>(obj1: T, obj2: U): T & U => ({ ...obj1, ...obj2, }); override({a: 1}, {a: 2, b: 8}); // { a: 2, b: 8 } override({a: 2</t,>…

keyof演算子 通常の式では使えず、型コンテキストのみで用いられる演算子です。オブジェクトの各キーを列挙した共用体型になります。 const permissions = { r: 0b0100, w: 0b010, x: 0b001, }; // typeof permissionsで、オブジェクトの型が取得できます。 …

typeof演算子 console.log(typeof 100); //'number' const arr = [1, 2, 3]; console.log(typeof arr); //'object' type NumArr = typeof arr; const val: NumArr = [4, 5, 6]; const val2:NumArr=['foo','bar','baz']; 変数arrに[1, 2, 3]を代入(ここで型推…

型のNull安全性を保証する TypeSctriptはデフォルトの設定では全ての型にnullとundefinedを代入出来てしまいます。 これではnull安全性が保証されず、静的型付け言語を使っているのに実行エラーが頻発しかねません。 厳密にnullやundefindと他の型を厳密に区…

型エイリアス VS インターフェース 型エイリアスの場合 type Yuno = 'Yui'; type Yuno = 'Yano'; // エラーになります。 インターフェースの場合 interface Yuno { Yui: string; } interface Yuno { Yano: string; } 型エイリアスとインターフェースの違いを…

クラスの２つの顔 TypeScriptには、クラスの型を抽象化して定義する方法が２つあります。 abstract修飾子を用いて抽象クラスを定義する方法 インターフェースを使用する方法 abstract修飾子 abstractは抽象クラスを定義する修飾子です。 抽象クラスとは、そ…

アクセス修飾子 アクセス修飾子をプロパティの宣言時につけるとそのプロパティがどこからどこまでアクセスできるのかを指定できます。 アクセス修飾子を何も指定しない場合は、暗黙的にpublicとなります。 アクセス修飾子 内容 public 自クラス、子クラス、…

関数の型宣言にジェネリクスを用いる記法 const toArray = <T>(arg: T, arg2: T): T[] => [arg1, arg2]; toArray(8, 3); 第一引数の実引数が型推論されてTがnumber型になります。 このTは型引数(Type Prameter)でありアルファベットは何を使用しても構いません</t>…

タプル型 タプル型とは タプル型とは、配列内の要素の型と、その順番や個数があらかじめ指定できる特殊な配列の型です。要素の型は、それぞれの要素ごとに決めることが出来ます。 レストパラメーターを使うと、いくつでも引数を受け取ることができるようにな…

4-1. TypeScript はイケイケの人気言語？ TypeScriptは、AltJS (JS) の代替言語。最終的にコンパイラによってJSのコードに変換されます)の１つです。Alternative JavaScriptの略で別のJavaScriptという意味になります。 GitHut というサイトでは、最新の2020…

第一章の最後の章では、ECMAScriptの仕様についてまとめられていました。 この章ではリテラシーの向上と、それを高める手段を知れたという印象です。 ECMAScriptはEcma Internationalという団体によって標準化されている仕様です。 Microsoft、Mozilla、Goog…

[ES2015] ECMAScriptモジュール ECMAScriptモジュールはTodoアプリのユースケースで実際に動かしながら学ぶため、ここでは構文の説明とモジュールのイメージをつかむのが目的です。 モジュールは、保守性・名前空間・再利用性で使われます。 保守性: 依存性…

Mathオブジェクト JavaScriptで数学的な定数と関数を提供するビルトインオブジェクトです。 インスタンスは作成しないです。 new Math(); 結果: TypeError: Math is not a constructor const rad90 = Math.PI * 90 / 180; const sin90 = Math.sin(rad90); co…

復習 オプショナルチェーン演算子とは 以下の二つのコードが同義です。 obj?.value obj != null ? obj.value : undefined レシーバがnull undefined のときにエラーではなくundefined を返します。 三項演算子で書くよりもリファクタリングができます。 Date…

JSONにシリアライズできないオブジェクト JSON.stringifyメソッドはJSONで表現可能な値だけをシリアライズします。 (※シリアライズとは、複数の要素を一列に並べる操作や処理のこと。) JSONに変換可能な値として紹介されている、文字列、数値、真偽値、配列…

JSON JavaScript Object Notationの略です。 JSONは、データ送信に用いる文字列フォーマットです。 JavaScriptのオブジェクトリテラルをベースに作られた軽量なデータフォーマットです。 Notation(ノーテーション)は表記という意味です。 オブジェクトリテラ…

API・ソフトウェアについて Application Programming Interfaceの略です。 ソフトウェアの機能を共有できる仕組みのこと。 ソフトウェアとは１・・・コンピュータのうち蹴っ飛ばせない部分 ソフトウェアとは２・・・ソフトやファイルなど人間様の手では触れ…

値の追加と取り出し 作成したセットに値を追加するにはaddメソッドを使います。 重複する値は持たないので、既存の値にaddメソッドを使っても無視されます。 セットが特定の値を持っているかの真偽値を得るのにhasメソッドがあります。 const set = new Set(…

復習 WeakMapの認識が甘かった箇所 Mapと違いキーには参照型のオブジェクトのみ使用できるためプリミティブ型だとエラーになります。 ラッパーオブジェクト プリミティブ型に対してプロパティを呼び出すタイミングで働きます。 Set Setはセット型のコレクシ…

WeakMap WeakMapは、Mapと同じくマップを扱うためのビルトインオブジェクトです。 Mapと違う点は、キーを弱い参照（Weak Reference）で持つことです。 弱い参照とは ガベージコレクションによるオブジェクトの解放を妨げない特殊な性質です。 メモリ管理の仕…

マップとしてのObjectの利点 Objectをマップとして使うときに起きる多くの問題は、Mapオブジェクトを使うことで解決しますが、 常にMapがObjectの代わりになるわけではありません。 マップとしてのObjectには次のような利点があります。 多くの場合はMapオブ…

ES2015でMapが導入されるまで、JavaScriptにおいてマップ型を実現するためにObjectが利用されてきました。 ただし、"マップとしてのObject"にはいくつかの問題があります。 Objectのprototypeオブジェクトから継承されたプロパティによって、意図しないマッ…