全てのコンテンツ

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 分