kyohei's blog

profile picture
Written by Kyohei Tsukuda who lives and works in Tokyo 🇯🇵 , building useful things 🔧.
email / facebook / X / GitHub

10 pages tagged with "TypeScript"

TypeScriptでimportを絶対パスの参照にする

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

axiosのエラーハンドリング

October 20, 2021 - 316 words - 2 mins
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.FC(React.FunctionComponent)を使わないほうがいい理由

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

TypeScriptで配列型の要素がオブジェクトの場合にその型を取得する方法

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

TypeScriptでTruffleの環境を作成する

February 16, 2021 - 1077 words - 6 mins
ちょっと久しぶりに 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画像をvercel上で生成してみる

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

Next.jsにてContextとhookで多言語対応する

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

TypeScriptのビルド中にJavaScript heap out of memoryのエラーが出た

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

React + TypeScript等ではまったこと

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

TypeScriptのインデックスシグネチャについて

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