はじめに 今回の記事は配列の便利メソッドであるsomeメソッド、everyメソッドについてTypeScriptのコードで以下記事を書いていきます。 someメソッド、everyメソッドの基本 someメソッド(everyメソッドも同様)の引数であるコールパック関数の引数は、mapメソ…
はじめに 今回の記事は配列の便利メソッドの一つfindメソッドについてTypeScriptのコードで以下記事を書いていきます。 findメソッドの基本 find内コールパック関数の引数は、mapメソッド同様最大３つの引数を設定できます。 第１引数は、配列の一つ一つの要…
はじめに 今回の記事は配列の便利メソッドfilterの記事になります。mapメソッドと絡めた問題も用意していますので、mapメソッドについて理解が浅い方はこちらの記事を参照して下さい。fiterメソッドの基本 fiter内コールパック関数の引数は、mapメソッド同様…
はじめに 今後しばらくの間、配列処理のメソッドについての記事を残します。(以降掲載予定のメソッドはfilter,find,every,some,reduce,includes) またこれらのメソッドはforEachで書き換え可能ですが、forEachは実行するだけで値を返さないというデメリット(…
はじめに オブジェクトの反復処理の一つにfor...in文がありますが、Airbnb のスタイルガイドでは推奨されていません。その代用手段として、オブジェクト自身が持つメソッドを使っていったん配列を形成する方法が推奨されています。 GitHub - airbnb/javascri…
はじめに 今回の記事はjavascript,typescriptどちらでも利用可能であるNull 合体演算子(Nullish Coalescing)とオプショナルチェイン(Optional Chaining)についての記事になります。以下、Typescriptのコードで理解を深めましょう。 Optional Chainingの基本 …
はじめに 今回の記事は型の三項演算子である条件型(Conditional Types)についての記事になります。因みに、Conditionalとは条件次第の、条件を含む、条件付きのと解釈されます。 条件型の基礎 はじめに述べたとおり条件型とはまさに型の三項演算子です。(大…
はじめに TypeScript における import と export の書き方は JavaScriptと概ね同じですが、拡張子の扱いやTypeScript 固有の挙動である型のコンテキストにおけるimport,exportなどいくつか違いがあるので、この記事に書き残します。(主に自分の備忘録として.…
はじめに 今回の記事はin演算子を用いたマップ型(mapped type)についての記事になります。 in演算子を用いた構文は複数あるため、ここでまとめておきます。 ①オブジェクトにプロパティが存在するかどうかをチェックするin const obj = { a: 1, b: 2, c: 3 };…
はじめに 今回の記事はT[K]という形の構文で表すルックアップ型(Lookup Types)についての記事になります。オブジェクト型に対してプロパティ名でアクセスするようなものを型レベルにしたようなものです。 前回記事のkeyofも利用した記事となっているのでそち…
はじめに 今回の記事は、オブジェクトの全てのプロパティを、文字列リテラル型のユニオン型(合併)で取得できるkeyof演算子についてです。 関連する記事として、以前書いた記事を参考にした上で読み進めてもらうと理解が深まると思います。 Typescript(リテラ…
はじめに 以前の記事でインデックスシグネチャについての記事を書きました。 Typescript(インデックスシグネチャ) - 駆け足エンジニアの記録 今回はその他のシグネチャについての記事になります。ちなみに、「シグネチャ」の意味ですが、関数の名前、引数の…
はじめに 今回は、前回記事と関連して特別な機能である判別可能なUnion型(Descriminated Unions)についての記事になります。この記事の理解が追いつかない方は、以下2つの記事が参考になると思うので是非見てください！ tsuboi99553758.hatenablog.com tsubo…
はじめに TypeScript には型を推論する機能があり、条件分岐の際に自動的に型を絞り込んでくれます。この仕組みを型ガード(Type Guard)と呼びます。ただし万能ではなく、自動的な絞り込みが機能しないケースもあり、その場合isを使って開発者が TypeScript …
はじめに Typescriptのオブジェクトを扱っているとなぜこれはエラーが出てこれはエラーが出ないのか？と思うことがあったのでこの記事に書き残そうと思います。またオブジェクト型については以前記事にしましたので是非御覧ください。 Typescript(オブジェク…
はじめに 今回は他の言語でも利用頻度が高いジェネリクス(ジェネリック)についてです。以前の記事でジェネリクスを使った例は配列(Array型)にありました。 let chara1: string[] = ["naruto", "sasuke", "sakura"]; let chara2: Array<string> = ["naruto", "sasuke"</string>…
はじめに 今回の記事はインデックスシグネチャ(インデックス型)についてです。前回記事のインターフェースなども利用した記事になっていますのでインターフェースについてよくわからないと感じる方は前回記事 Typescript(インターフェース) - 駆け足エンジニ…
はじめに 今回は、型エイリアスと同様にインターフェースという、型に名前をつけるための方法についてです。また今回の記事は合併型や交差型の理解も必要となるため、前に書いた記事Typescript(合併型と交差型) - 駆け足エンジニアの記録を参考にください。 …
はじめに 前回記事の継承と関係のある抽象クラス(abstractクラス)についての記事を書きます。コードは前回、前々回の記事のものを使っていますので、コードの内容がよくわからないと感じる方はそちらの記事から読んでいただけると幸いです。 抽象クラスの使…
はじめに この記事は前回記事 Typescript(クラス) - 駆け足エンジニアの記録の続きとなっています。 早速ですが、コードで確認しましょう。 Typescriptによるクラス継承 class Person { constructor(private readonly name: string, public age: number) {} …
はじめに javascriptでも馴染み深いクラスについてTypescriptでの記法を確認していきます。クラスについてよくわからないと言う方は以前の記事 ES6（クラス） - 駆け足エンジニアの記録 を参考にしてもらえると嬉しいです。 Typescriptでのクラスの定義 clas…
はじめに javascriptでは、出力される型が入力される引数の型によって変わることがあります。Typescriptではオーバーロード(引数や戻り値が異なるが名称が同一な複数のメソッドを複数定義する)された関数の宣言と、入力値によって変わる関数の出力型を静的な…
はじめに 今回は、プリミティブ型をさらに厳密に指定したリテラル型について記事を書きます。リテラル型には大きく3種類あり、stringのリテラル型、numberのリテラル型、Boorianのリテラル型です。 リテラル型の定義 以下、stringのリテラル型です。 const f…
はじめに 今回は型指定で度々登場する合併型(union型)と交差型(intersection型)について取り上げます。この2つは高校数学で習うベン図を使うことで、違いが分かります。2つの型が存在したとして、その2つの合わせた部分を型の集合とした合併型、2つの共通部…
はじめに 今回はオブジェクトの一つである配列についてです。javascript同様、TypescriptのArray型も要素の連結、追加、検索のような操作をサポートしています。 Array型の定義 ①型指定 let chara: string[] = ["naruto", "sasuke", "sakura"]; console.log(…
はじめに 今回は、javascriptでも馴染み深いObjectについてです。TypescriptはObjectがどのようのkeyを持っているべきか、それらの値の型はなにかなどきめ細かくObjectの型を定義することができます。では以下コードで確認しましょう。Object型の定義 ①型指…
はじめに Typescriptは型チェックをサポートするjavascriptの上位互換です。ブラウザで実行する前に、なにか問題があればコード上でエラーを投げかけてくれます。またTypescriptはブラウザで直接実行できません。javascriptにコンパイルすることによって、Ty…
はじめに ES6の記事のネタが尽きたため、Typescriptの記事をしばらく書いていきます。Typescript第一弾は環境構築です。あくまで自分への備忘録とこの記事を残しますが、この記事を読んでくださった方のためになれば幸いです。 ⚠エディタはvscodeです。他の…
はじめに Symbolという言葉の定義から確認しましょう。 Symbol・・・プロパティの重複を避けるために、必ず一意の値を返す関数 Symbol の使い方、注意点 ①Symbolの定義方法 const s = Symbol() console.log(s); //Symbol() ②言葉の定義の意味 const s = Symb…
はじめに データを管理するための入れ物としての役割を持つMap,Setについて、Map,Setの使い方やObjectやArrayとの違いを紹介していきます。 Map,Setの使い方 1.new演算子でMap,Set(入れ物)を生成 //Map const map = new Map(); //Set const s = new Set(); 2…
