category / TypeScript

TypeScript

【TypeScript】TypeScriptの起動が遅い時に試すこと

React などで TypeScript でプロジェクトを起動するとき、以下のターミナルの画面で 5 分以上止まる時があります。 その場合、tsconfig.json 内に、 include と exclude を追加してみてください。 特に、 exclude で node…

続きを読む
2022年07月06日1 分
TypeScript

【TypeScrpt】JavaScriptからTypeScriptへ変換する際、any型を使わない一つの方法

Javascript のソースコードを TypeScript に変換しようとしています。 person が any 型ではないのかと言われています。 このまま any 型にしてもいいのですが、TypeScript ではなるべく any…

続きを読む
2022年05月25日1 分
TypeScript

【TypeScrpt】Record<Keys, Type>を使い、同じ型をまとめて指定する方法

会員とゲストのリストを作成しています。 このままでも型推論してくれているのですが、guestやmemberに数値が入ってもエラーになりません。 この場合、Recordを使い、キーがguest、memberで、valueがstring[]型にします。 配列内にはstring…

続きを読む
2022年05月24日1 分
TypeScript

【TypeScrpt】keyofを使いオブジェクトのキーを基に、型を指定する方法

特定のキーを基に、値を返す関数を作成しました。 無事、意図した内容が表示されているのですが、例えば key の一覧にないキーを使用する場合、コンパイルエラーが発生します。 この場合、keyof を使用し、key…

続きを読む
2022年05月23日1 分
TypeScript

【TypeScrpt】型推論したオブジェクトを、型として使用する方法

プロフィールを基に、テキストが作成されるコードを作成しました。 この場合、personに『Parameter 'person' implicitly has an 'any' type.』というコンパイルエラーが発生しています。 type や interface…

続きを読む
2022年05月22日1 分
TypeScript

【TypeScrpt】受け取ったオブジェクトと異なるオブジェクトを返す場合に、型を指定する方法

個人情報にフルネームを追加したいと思い、以下のコードを作成しました。 すると、tanaka.fullNameで、fullNameの型がないというコンパイルエラーが発生しました。 Person型にfullNameを追加すると、 tanaka内にfullName…

続きを読む
2022年05月21日1 分
TypeScript

【TypeScrpt】アロー関数でジェネリクスを使用する方法

ジェネリクスを使用してfluits関数を作成しました。 fluits関数をアロー関数に変えようとすると、 エラーが発生し、『JSX element 'T' has no corresponding closing tag.』と言われました。 JSX…

続きを読む
2022年05月20日1 分
TypeScript

【TypeScrpt】Types of property 〇〇 are incompatible.エラーに対応する方法

例えば、食料の価格を表示させたいとして、以下のコードを作成しました。 すると、 grocery(fluit) で『Argument of type '{ name: string; price: number; }' is not assignable to parameter…

続きを読む
2022年05月19日1 分
TypeScript

【TypeScrpt】readonly型で予期せぬ計算結果を修正する方法

例えば、通常 20 ポイントの商品が、今回特別にポイント 5 倍にして 100 ポイントであることを表示したいとします。 以下のコードを作成してみました。 ブラウザで確認すると、 通常 20 ポイントなのですが、ブラウザでは 10…

続きを読む
2022年05月17日1 分
TypeScript

【TypeScrpt】型推論を使用せず、関数の型を宣言する方法

例えば、以下のコードがあるとします。 このまま使用しても、pointDetail 関数に型推論が効きます。 型エイリアスを使って関数に型を明示します。 方法は、型推論の内容をコピーし、Point 型として使用します。 magnication…

続きを読む
2022年05月15日1 分
TypeScript

【TypeScrpt】定義した型ガード関数で絞り込む方法

以前、ユニオン型で型の内容を絞り込む方法を紹介しました。 どの場合に Walk や Car に切り替えるかを型ガード関数を使用することで、コードが読み取りやすくなります。 型ガード関数は、Walk の場合と Car の場合で、戻り値を boolean…

続きを読む
2022年05月14日1 分
TypeScript

【TypeScrpt】Expected an assignment or function call and instead saw an expression.エラーが発生した場合の対処方法

例えば、以下のコードを作成したとします。 ここで、『Expected an assignment or function call and instead saw an expression…

続きを読む
2022年05月12日1 分
TypeScript

【TypeScrpt】ユニオン型で型を絞り込む方法

以下のユニオン型があるとします。 内容によって表示内容を変えたい場合、 move.type で条件分けしようとすると、型推論が効いていることがわかります。 さらに、時速の内容を入力すると、Car の型は表示されず、Walk の型推論ができます。 transportation…

続きを読む
2022年05月11日1 分
TypeScript

【TypeScrpt】in演算子を使用し、型の内容によって型推論を狭める方法

例えば、以下のコードのように徒歩と車の型があり、プロパティの内容によって表示方法を変えたい場合があるとします。 in 演算子を使ってプロパティを指定した場合、TypeScript では、Walk か Car かの型を自動で判別してくれます。 if 分の中の ${move…

続きを読む
2022年05月10日1 分
TypeScript

【TypeScrpt】String型をどうしてもNumber型として扱いたい場合

例えば年齢が String 型の場合、String 型を計算すると意図しない値が返ってきます。 age を Number 型にしたい場合、 person.age の前に『+』を追加します。 型を変換することを、型キャストと言います。 無事、意図した計算結果になりました。

続きを読む
2022年05月09日1 分
TypeScript

【TypeScrpt】Reactでデータをコンポーネントに受け渡す

Reactで名前と年齢のデータをコンポーネントに受け渡したいとします。 App.tsx components/Person.tsx このコードでは、コンポーネントのpersonで『Binding element 'person' implicitly has an 'any…

続きを読む
2022年05月07日1 分
TypeScript

【TypeScript】デコレータをが実行される順番

次の Person クラスとデコレータがあったとします。 こちらに、新しいデコレータを追加してみます。 console.log() で確認すると、 @Template より@Create の方が上に設置していますが、まず@Template が実行され、次に@Create…

続きを読む
2021年08月24日2 分
TypeScript

【TypeScript】デコレータを使ってブラウザに文章を表示する

デコレータを使って、ブラウザに文章を表示してみます。 今回は、『田中』を表示するようにします。 HTML を作成する場所が必要なので、まずは index.html に div でレンダリングする場所を作成します。 Template…

続きを読む
2021年08月23日5 分
TypeScript

TypeScriptでデコレータを使う

デコレータとは、クラスまたはメソッドを、別のコードでラップすることです。 TypeScript でデコレータを使用するには、tsconfig.json の compilerOptions に "experimentalDecorators": true…

続きを読む
2021年08月22日3 分
TypeScript

TypeScriptでPromiseを使う

Promise を使って、ファイルをサーバーなどにアップロードするというイメージのコードを作ってみます。 まずは、 upload 関数を作ります。 upload 関数の引数は、 imageFile としました。 imageFile の型指定を string…

続きを読む
2021年08月21日2 分
TypeScript

TypeScriptでコールバック関数を使う

次の関数があるとします。 この関数をコールバック関数として使ってみます。 コールバック関数とは、別の関数で渡される関数のことを言います。 greet 関数を作ってみましょう。 greet 関数で hello 関数を呼び出します。 無事、呼び出すことができました。

続きを読む
2021年08月20日1 分
TypeScript

TypeScriptで反復処理をする

TypeScript で反復処理をやるにはどうすればいいでしょうか? 例えば、次の配列があったとします。 somethings にカーソルを当ててみると、 somethings の型は (string | number…

続きを読む
2021年08月19日1 分
TypeScript

【TypeScript】抽象クラスとは何ですか?

実装を含まないクラスを作成したい場合、抽象クラスを使います。 書き方は、クラスの前に、『abstract』を追加します。 試しに、Profile…

続きを読む
2021年08月18日1 分
TypeScript

【TypeScript】継承とは何ですか?

Profile クラスがあったとします。 Profile クラスを基に、新しいクラスを作成するには、 extends を使用して Profile クラスを継承します。 ProfileWithAddress クラスを作成したいとします。 クラス名の後に、『extends…

続きを読む
2021年08月17日1 分
TypeScript

【TypeScript】名前空間とは何ですか?

例えば、歩く速さと車の速さのためのSpeedクラスがあったとします。 Speed クラスが重複しているので、エラーになっております。 同じクラス名で使っている場合、名前空間を使えば、エラーが解消されます。 書き方は、クラスを『namespace…

続きを読む
2021年08月16日5 分
TypeScript

【TypeScript】静的メンバーとは何ですか?

クラスをインスタンス化するときは、new演算子を使用します。 クラスそのものに、変化しないメソッドやプロパティを持たせたい場合、静的メンバーを使用します。 書き方は、クラスの中のメソッドやプロパティの前に、『static』を追加します。 console.log…

続きを読む
2021年08月15日1 分
TypeScript

【TypeScript】Setterとは何ですか?

前回は、TypeScript の Getter を紹介しました。 今回は、TypeScript の Getter を紹介します。 前回作成した Profile クラスに address を追加しました。 address のアクセス修飾子は private…

続きを読む
2021年08月14日1 分
TypeScript

【TypeScript】Getterとは何ですか?

次の Profile クラスがあったとします。 Profile クラスを使ってみます。 name は public なので呼び出しができるのですが、 age は private なので呼び出しができません。 age を外部から呼び出し可能にするには、getter…

続きを読む
2021年08月13日1 分
TypeScript

【TypeScript】クラスでアクセス修飾子を使う方法

アクセス修飾子とは、 public 、 private 、 protected を使って、クラスがどこからアクセス可能かを指定する修飾子のことを言います。 次のクラスがあったとします。 tanaka.name を console.log…

続きを読む
2021年08月12日5 分
TypeScript

【TypeScript】lengthがエラーになった場合の対処方法

配列の中身がいくつあるかを調べたいので、length を使った関数を作ります。 すると、 エラーが発生し、『プロパティ 'length' は型 'T' に存在しません。』と指摘されました。 こちらを解消するには、拡張機能で length…

続きを読む
2021年08月11日1 分
TypeScript

【TypeScript】条件によって返す値を変える方法

input の内容によって、返す値を変えたいとします。 input に入力がある場合は、 input の値が返り、 input が null もしくは undefined であれば、『入力内容が不明もしくはありません。』を返します。 console.log…

続きを読む
2021年08月10日1 分
TypeScript

【TypeScript】エラー『プロパティ '〇〇' は型 'HTMLElement' に存在しません。』が発生した場合の対処方法

HTML に入力フィールドがあったとします。 この入力フィールドに、TypeScript で値を入れたいとします。 すると、 エラーが発生し、『プロパティ 'value' は型 'HTMLElement…

続きを読む
2021年08月09日3 分
TypeScript

【TypeScript】union型を判別する方法

例えば、料理が出来上がる速さに関する union 型があったとします。 もつ煮込みうどんの出来上がる速さを console.log で表示したいので、以下の関数を作りました。 確認してみると、 エラーが発生し、『プロパティ 'manualSpeed' は型 'Cooking…

続きを読む
2021年08月08日1 分
TypeScript

【TypeScript】inferとは何ですか?

例えば、同じ値があっても、用途が違うために型が異なっている場合があったとします。 こちらの例では、 Person オブジェクトの job は string 型ですが、 Questionnaire の job は boolean…

続きを読む
2021年08月07日1 分
TypeScript

【TypeScript】コンディショナルタイプ(Conditional Types)とは何ですか?

社会人の時に使用する型と、学生の時に使用する型があったとします。 この型を社会人の時と学生の時で使い分ける時、どうすればいいのでしょうか。 このような時に使用するのが、コンディショナルタイプ(Conditional Types…

続きを読む
2021年08月06日1 分
TypeScript

【TypeScript】Omitとは何ですか?

前回は、ある型から特定のプロパティを取り出したい場合に使用する、 Pick を紹介しました。 Pick とは反対に、ある型から特定のプロパティを除外したい場合は、どうすればいいのでしょうか。 Profile の型があったとします。 こちらの型から address…

続きを読む
2021年08月05日1 分
TypeScript

【TypeScript】Pickとは何ですか?

Profile の型があったとします。 こちらの型から name と age のみ使用する、 profile オブジェクトを作成しました。 profile オブジェクトには、 address…

続きを読む
2021年08月04日1 分
TypeScript

【TypeScript】readonlyとは何ですか?

例えば、次のオブジェクトがあるとします。 name を『田中』から『佐藤』へ変更してみます。 console.log で確認すると、 name が『佐藤』になりました。 今回のように、勝手に書き換えたくないデータがある場合、readonly…

続きを読む
2021年08月03日1 分
TypeScript

【TypeScript】型推論を基にして、関数や変数などの型を指定する方法

例えば、次のオブジェクトがあるとします。 profile を見てみると、 型指定しなくても、型推論をしてくれています。 では、型推論で生成された型を、他に使用するには、どうすればいいでしょうか。 型を他に使用するには、型を指定するところに、『typeof…

続きを読む
2021年08月02日1 分
TypeScript

【TypeScript】マップド型(Mapped Types)とは何ですか?

Profile オブジェクトの型があったとします。 こちらの型を使いたいが、age は必要ない場合、パーシャル型を使用しました。 同様に、特定の型を他の型に作り替えたい場合、マップド型(Mapped Types)を使います。 書き方は、新しい型を作り、中に、『 P in…

続きを読む
2021年08月01日2 分
TypeScript

【TypeScript】リクワイヤド型とは何ですか?

前回は、パーシャル型(Partial Type)を紹介しました。 パーシャル型とは反対に、オプションの項目を、ある時は必須にしたい場合、どうすればいいでしょうか。 tanaka というオブジェクトがあったとします。 age はオプションであるため、 age…

続きを読む
2021年07月31日2 分
TypeScript

【TypeScript】パーシャル型とは何ですか?

name と age が必要な Profile の型を作成しました。 tanaka というオブジェクトを作成してみます。 次に、 sato というオブジェクトを作成してみます。 佐藤さんの、 age がわからなかったので、 age…

続きを読む
2021年07月30日1 分
TypeScript

【TypeScript】インデックスシグネチャとは何ですか?

profile というオブジェクトがあったとします。 profile オブジェクトに、 name と age を入れてみます。 すると、 profile.name と profile.age にエラーが発生し、『プロパティ 'name…

続きを読む
2021年07月29日2 分
TypeScript

【TypeScript】型アサーションとは何ですか?

profile というオブジェクトがあったとします。 profile には、 name と age が入る予定ですが、まだ何も入っていません。 profile オブジェクトに、 name に『田中』と age に『16』を入れてみます。 『プロパティ 'name…

続きを読む
2021年07月28日2 分
TypeScript

【TypeScript】ジェネリクス型とは何ですか?

TypeScript のジェネリクス型とは、汎用的なメソッドにある時は A の型、またある時は B の型といった、状況によって型を指定できる型になります。 例えば、profile という関数を、ある時は number 型、ある時は string…

続きを読む
2021年07月27日2 分
TypeScript

【TypeScript】リテラル型とは何ですか?

リテラル型は、開発者が自由に型を作成し、特定の型以外はエラーとすることができる型です。 例えば、次の定数があったとします。 regularHoliday…

続きを読む
2021年07月26日1 分
TypeScript

【TypeScript】型の絞り込みとは何ですか?

Yes、No で答えるコードがあったとします。 answer が『0』もしくは『ture』の場合『yes』を返し、『1』もしくは『false』の場合『no』を返すようにします。 『0』は number 型であり、『true』は boolean…

続きを読む
2021年07月25日1 分
TypeScript

【TypeScript】パラメータをオプションにしたい場合

パラメータには、 name 、 age 、 phoneNumber 、 address がある、 Profile という関数があったとします。 Profile 関数に、 newUser オブジェクトを作成して、値を入れてみます。 newUser…

続きを読む
2021年07月24日5 分
TypeScript

【TypeScript】クラスに型を指定したい場合

TypeScript でクラスに型を指定したい場合は、どうすればいいのでしょうか。 例えば、次のクラスがあったとします。 今のところ、 name や age に型指定をしていないので、型がないと指摘されます。 class に型を指定する場合は、 class…

続きを読む
2021年07月23日5 分
TypeScript

【TypeScript】インターフェイス型とは何ですか?

以前、型エイリアスでオブジェクトの型を指定しました。 今回は、インターフェイス型でオブジェクトの型をしてみます。 こちらのコードがあったとします。 型エイリアスをインターフェイス型に変えてみます。 まず、 interface と入力し、型の名前である Profile…

続きを読む
2021年07月22日5 分
TypeScript

【TypeScript】変数に関数の型を指定したい場合

前回は、TypeScript の関数の型について紹介しました。 今回は、前回作成した関数を、新たな変数に使用したい場合について紹介します。 前回のコードは、こちらです。 新たに resolution という変数を作成したとします。 この変数に calculation…

続きを読む
2021年07月21日5 分
TypeScript

【TypeScript】関数に型を指定するということはどういうことですか?

前回は、TypeScript の型エイリアスについて紹介しました。 今回は、関数の型について紹介します。 例えば計算するための関数があったとします。 number 型と number 型を足しているので、calculation 関数の戻り値は、number…

続きを読む
2021年07月20日5 分
TypeScript

【TypeScript】型エイリアスとは何ですか?

前回は、TypeScript のユニオン型について紹介しました。 今回は、型エイリアスについて紹介します。 例えばプロフィールについて関数があるとします。 name や age など profile…

続きを読む
2021年07月19日5 分
TypeScript

【TypeScript】ユニオン型とは何ですか?

前回は、TypeScript のオブジェクト型について紹介しました。 今回は、ユニオン型について紹介します。 例えば年齢の変数があるとします。 では、age に 16 歳を代入します。 すると、『string 型を number…

続きを読む
2021年07月18日5 分
TypeScript

【TypeScript】オブジェクト型とは何ですか?

TypeScript のオブジェクト型とは、何なのでしょうか? 例えば、名前と年齢のオブジェクトがあります。 person 内の name と age に型指定したい場合、オブジェクト型を使います。 方法は、person の後に、 :{} をつけて、 {} の中に name…

続きを読む
2021年07月17日5 分
TypeScript

【TypeScript】tsconfig.jsonのcompilerOptionsとは何ですか?

TypeScript には、細かな決まり事を設定できるオプションがあります。 そのオプションを一箇所にまとめているところが、tsconfig.json の中にある compilerOptions です。 compilerOptions…

続きを読む
2021年07月16日5 分
TypeScript

なぜTypeScriptを使うのか

TypeScript を使い始めた頃は、エラーばかり出て『なぜ TypeScript を使う必要があるのか』と考えてしまうと思います。 例えばこの様な計算式があったとします。 確認すると、 1 + 2 =…

続きを読む
2021年07月15日5 分
TypeScript

【TypeScript】Error Cannot find module 'webpack-cli/bin/config-yargs'エラーの対処方法

TypeScript の環境構築時、以下のコマンドでローカルサーバーを立ち上げようとしました。 すると、以下のエラーが発生しました。 原因は、 webpack-cli のバージョンが 4 以降の場合、 config-yargs…

続きを読む
2021年06月18日5 分