あのぞんブログ

TypeScript

Arrow function で generics にすると HTML タグとして認識されてしまうときの tips

2021-09-02

エディタなどによってうまくハイライトされなかったときはこうする。 をにする。

React で複数の ref を 1つのコンポーネントにセットする

2021-07-09

同じ div に と の両方を使いたいとがあった。 しかしどちらも ref を渡さなければいけなかったのでその方法です。 Share ref with multiple ref handlers · Issue #13029 · facebook/react…

component から props の型を取得する

2021-07-05

Storybook で props 型が必要だけど export したくなかったので。 方法 1 方法 2(古い)

fitty を React で使う useFitty hook

2021-06-14

はコンテナに合わせてテキストのフォントサイズをフィットしてくれるライブラリです。 rikschennink/fitty: ✨ Makes text fit perfectly それを React で使うための hooks を書いた。 Gist fitty for react…

styled-components の keyframes で ts-styled-plugin のエラーが出る

2021-05-19

css animation の や などのキーワードに対して のエラーが出たので対処しました。 で animation を扱う場合以下のように書きます。 () この や に VS Code…

React で特定の props を固定した特化コンポーネントを定義する

2021-01-19

React で特定の props を固定した特化コンポーネントを定義する方法をいくつかまとめました。 DEMO です。 react-set-props - CodeSandbox 以下の という自作コンポーネントと というライブラリのコンポーネントを例に使います。 Star…

アロー関数とfunction それぞれの Type Guard 書き方

2021-01-04

この記事では アロー関数で Type Guard について紹介します。 TypeScript: TS Playground - An online editor for exploring TypeScript and JavaScript function パターン arrow…

React で URL props が変わったら fade アニメーションで 背景を変える

2020-12-29

props で指定された URL が変わったら フェードアウト し、 新しい URL 画像で フェードイン しながら表示するコンポーネントを作りました。 を使います。 デモ コード 部分の説明。 変更された際 になり Exit アニメーション(fade out…

js で先頭以外(n行目以降)をソートする

2020-12-17

js で配列の 2 行目以降のみをソートする方法のメモです。 repl: https://repl.it/@anozon/sortbody#index.ts ソート対象の配列 先頭以外をソートする n 行目以降のみソートする Lodash…

Next.js export 実行時のタイムスタンプをコンポーネントで使う

2020-11-17

を実行した時のタイムスタンプをレンダリングしたいときの方法です。 jsx 上で などとするとクライアントサイドでレンダリングされた時間が表示されてしまいます。 SSR 時のデータを React で使いたい場合は NextPage…

React と display grid でメモリ付き定規

2020-10-30

メモリ付きの定規、ルーラーコンポーネントのサンプルです。 react-memory-component コード ruler-with-memory - CodeSandbox ミソ ブロック部分とメモリ部分を 0.…

絵文字を含めて文字数カウントするWebアプリ作った

2020-10-02

アプリ 文字頻度カウント(絵文字対応) emoji-count 絵文字対応 では絵文字が 1 文字として分割できません。 を使います。 bestiejs/punycode.js: A robust Punycode converter that fully complies…

Python で TypeScript の UnionType を使う

2020-08-24

TypeScript の UnionType は以下のように定義できます。 Python の type でも同じようなことができるのか調べました。 ちなみに というのがありますが別です。 typeing.Literal を使う ちなみに get_args…

React で canvas から画像生成する最小コード

2020-05-25

この記事では React (と TypeScript で) canvas から画像生成する方法を紹介します。 文字描画や色変更をサンプルに説明していきます。 React で Canvas を使うベースのコード useEffect…

Next.js with TypeScript で最小限の _app.tsx, _document.tsx

2020-02-08

この記事では Next.js with TypeScript で最小限の _app.tsx, _document.tsx について紹介します。 Gist: Next.js with typescript minimum pages/_document.tsx, pages…

children を持つ Component を normal function で書くときの型定義

2020-02-07

この記事では children を持つ Component を function で書くときの型定義する方法を説明します。 書き方 を使うことで書けます。 Sample PropsWithChildren - CodeSandbox それぞれの書き方 関連 Tips Props…

【Clasp】GoogleAppScript のコードをローカルで開発する

2020-01-21

この記事では Clasp を使って GoogleAppScript のコードを手元で管理する方法を紹介します。 Clasp Command Line Interface using clasp | Google Developers 手順…

5層 ReactComponent と TypeScript でカウンター書いてみる

2020-01-21

経年劣化に耐える ReactComponent の書き方 - Qiita が良さそうだったので TypeScript で書く場合を試してみた。 コード CodeSandbox 気になる部分 StyledComponent で既存 Component を Wrap…

GatsbyJS を Typescript に移行した際の Type 付け

2020-01-09

GatsbyJS で書いているこのブログを Typescript 移行しました。 主に以下の記事を参考に移行しました。なので今回は Type づけに焦点を当てて書きます。 Gatsby.js を完全 TypeScript 化する - Qiita GraphQL Data…

© 2021 あのぞんびより All Rights Reserved