devlog

フロントエンドエンジニアの技術ブログ

TypeScript

react-router-dom で ルーティングを実装する

React で ルーティングをする為のライブラリでデファクトスタンダードとなっているのが react-router です。 そして、Web 上で利用できるように DOM にバインディングができるライブラリが react-router-domです。 reacttraining.com github.com ちなみに、r…

React コンポーネントをカスタムフックで Presentational Component と Container Component に分離する

Presentational Component(コンポーネント) と Container Component(コンテナー) Presentational Component(コンポーネント) Container Component(コンテナー) カウンターコンポーネントを Presentational Component(コンポーネント) と Container Component…

TypeScript の baseUrl について調べた事

Qiitaへ「TypeScript の baseUrl について調べた事」を投稿しました。 qiita.com

Qiita投稿 - React + TypeScript で react-router の URLパラメーターを取得する

Qiitaへ「React + TypeScript で react-router の URLパラメーターを取得する」という記事を投稿しました。 qiita.com

TypeScriptでのsetIntervalを行うと「Type 'Timer' is not assignable to type 'number'.」とエラーが出た。

TypeScript(TSX)中でsetIntervalを行うと「Type 'Timer' is not assignable to type 'number'.」とエラーが出た。 ブラウザ環境下で実行する場合は、window.setInterval()と書いて、戻り値を: numberにする事で解決する github.com

React + TypeScript で State をもつ class コンポーネントを作成するときは、Generics の第二引数に State の型を指定する

タイトルのまま。 「React + TypeScript で State をもつ class コンポーネントを作成するときは、Generics の第二引数に State の型を指定する」 import React, {Component} from "react"; type AppState = { count: number } class App extends Component<…

Storybookの @storybook/addon-info で props table が表示されない!!

Storybook + React(TypeScript) の環境で「@storybook/addon-info」と「react-docgen-typescript-loader」を使用して、コンポーネントが受け取るpropsの情報をドキュメントとして生成する事ができるが、特定のコンポーネントでのみ propTables が生成できな…

TypeScriptで型定義済みのオブジェクトにプロパティを追加する方法

TypeScriptでは、型が定義されているオブジェクトに追加でプロパティを追加するとエラーが発生します。 type Data = { id: number, name: 'hoge' } const data01: Data = { id: 1, name: 'hoge', created_at: new Date() // Error } この場合は、インデック…

TypeScriptでオブジェクトのプロティをUnion Typesとして設定する方法

TypeScriptでオブジェクトのプロティをUnion Typesとして設定するには、アサーションを使用します。 // obj: {bar: 1 | 2 | 3, foo: boolean, baz: string} const obj = { foo: false, bar: 1 as (1 | 2 | 3), baz: '2' } これで、obj.barは、数値の1, 2, 3 …

WebStorm で TypeScript の型推論をマウスオーバーで表示させたい

Visual Studio Code には、 TypeScrpt を書いている時に変数などにマウスオーバをした時に型推論が表示される機能があります。 これがすごく便利なのですが、私の好きな WebStorm で同等の機能を再現したく調べた所、設定を一箇所変更する事で同様の機能を使…

TypeScriptのTuple型

配列のような感じだけど、別物。 JavaScriptなら一括に配列として扱われている let data1: [string, number] = ['taro', 20]; // これはオッケー let data2: [string, number] = [20, 'taro']; // これはエラー let data3: [string, number] = ['taro', 20, …

TypeScriptのarray型

定義する方法が2種類ある。 let array1: number[] = [1, 2, 3]; // リテラル表現 let array2: Array<number> = [1, 2, 3]; // ジェネリクス表現 気をつけたいのが、JavaScriptだと配列の中にどんな型の値でも入れる事ができたけど、TypeScriptだと違う。 アノテーシ</number>…

TypeScriptのアノテーション(型注釈)

TypeScriptでは、関数の引数や戻り値にアノテーションという型注釈を付与する事ができる。 これによって、JavaScript特有の暗黙的型変換によるバグなどを防ぐ事ができる。 アノテーションは、: 型の種類というようにコロンに続いて型の種類を指定する。 cons…

@ 2019 devlog