TypeScript で ES Module を import を絶対パスで参照するやり方です。 絶対パスで import 文を書くと以下のようになります。 import { Heading } from '../../../components/common/Typography'; import { UserTypes } from '../../../constant… read more

TL; DR: import axios, { AxiosError } from 'axios'; try { await axios.get('...'); } catch (e) { if ((e as AxiosError).isAxiosError && e.response) { // axiosのエラー thr… read more

React TypeScript Cheatsheet を見ていたら、React.FC を非推奨してたので、理由を少し調べてみた。 主な理由はこの CRA の pr に書いてあった。 https://github.com/facebook/create-react-app/pull/8177 マイナス面として 暗黙的な children の定義してしまう React.FC でコンポーネントを… read more

TypeScript でライブラリ内や自動的に生成された型定義で、配列の要素がオブジェクトであるときに、その要素が型として定義されていない場合があります。この型を呼出したり型として再定義する方法です。 export type Animals = { name: string; size: number }[]; // または exportされていない場合 type Animals = { na… read more

ちょっと久しぶりに Ethereum(Dapp)の勉強をしているので、いろいろナレッジを書き残していきたい。 こちらの TypeChain を参考にしています 👀 https://github.com/ethereum-ts/TypeChain 前提条件 Truffle v5.1.66 (core: 5.1.66) Solidity - 0.6.2 (solc-js) Node v14.15.3… read more

ブログの記事などで OG 画像を動的に作りたい場合、サーバーサイドを持つサービスなら、 ImageMagick や node-canvas を使い構築することができますが、サーバーサイドを持たない静的なサイトの場合、 vercel 等の Serverless Functions を使い、画像を生成するマイクロサービスを作成し運用することができます。 og-image について og-image は… read more

Next.js(React)で多言語対応をしたい場合、isaachinman/next-i18nextなどのライブラリはありますが、ちょっと多機能すぎて、ブラックボックスな部分が多いと感じたので、簡単に自作してみることにしました。 準備 とりあえず Next.js の環境を用意します。 $ npx create-next-app demo --use-npm --example "&lt… read more

AWS の EC2 のインスタンスが小さいせいか、あるタイミングから tsc コマンドを実行した際に以下のエラーが発生するようになった。 [stdout] [stdout] [stdout]<--- JS stacktrace ---> [stdout] [stdout]==== JS stack trace ======================================… read more

TypeScript で React の開発をしているときにハマった箇所のメモ。 React のイベントの Props 定義 クリックイベントはReact.MouseEvent、選択リスト/テキストのインプットはReact.ChangeEventが型になる。 export interface IMyComponentProps { prop1: string; prop2: (event:… read more

JavaScript から移行して TypeScript を書いていると、オブジェクトの扱いで以下のようなエラーが発生することがある。 Element implicitly has an 'any' type because type '{}' has no index signature. （型 '{}' にはインデックス シグネチャがないため、要… read more