参照したページ 【TypeScript】Object.keys() の返り値をstring[]型でなくユニオン型の配列にしたい 関数を定義して解決する 以下のようにするとkeysは ("hoge" | "foo" | "baz")[] 型になります。 const obj = { hoge: 'value', foo: 'value', baz: 'value'…

参考にさせていただいたページ TypeScript: TSConfig リファレンス - すべてのTSConfigのオプションのドキュメント tsconfig.jsonのよく使いそうなオプションを理解する はじめに yarn create next-app --typescript でアプリケーションを作成しました。 生…

参考にさせていただいたページ nuxt.js - How to use webpack 5 with nuxt3 project - Stack Overflow Nuxt Configuration Reference · Nuxt nuxt.config.tsの編集 以下のようにbuilderを指定します。 export default defineNuxtConfig({ builder: 'webpack'…

参考にさせていただいたページ Installation · Get Started with Nuxt Nuxt3 インストールしてみた インストール まず公式ページに倣って以下のコマンドを実行しました。 npx nuxi init nuxt3_sample 以下のように表示されました。 user@mac samples % npx n…

参考にさせていただいたページ 【JavaScriptの応用】thisの振る舞い | ワードプレステーマTCD

参考にさせていただいたページ How to Change readonly Properties to be Writable in TypeScript? - Designcise Change a readonly property to mutable in TypeScript | bobbyhadz Improved control over mapped type modifiers: TypeScript: Documentatio…

Navigate Between Pages (ページ間を移動する) について ページ遷移にnext/linkコンポーネントを使う import Link from 'next/link'; Assets, Metadata, and CSS (アセット、メタデータ、CSS) について 画像の表示にnext/imageコンポーネントを使う import I…

参考にさせていただいたページ Create Next App | Next.js TypeScript 公式ページに書いてありました。 npxとyarnとでハイフンがあったり無かったりします。 npx create-next-app@latest --ts # or yarn create next-app --typescript # or pnpm create next…

参考にさせていただいたページ Setup - Create a Next.js App | Learn Next.js Create a Next.js App (Next.jsアプリを作成する) 以下のコマンドでcreateしました。 npx create-next-app nextjs-blog --use-npm --example "https://github.com/vercel/next-l…

参考にさせていただいたページ Getting Started | Next.js create next-appする 作業ディレクトリを作成します。 mkdir next-js-sample 公式の「Getting Started」の「Automatic Setup」の通りに以下のコマンドを実行してみます。 yarn create next-app --ty…

はじめに 配列の要素の順番は関係なく、2つの配列のlengthが等しいかどうか、2つの配列が同じ要素を持っているかを判定します。 関数の定義と実行 以下の通り定義します。 const isSameArr = (arr1: number[], arr2: number[]) => { if (arr1.length !== arr…

参考にさせていただいたページ typescript - Where is VSCode's "Restart TS server"? - Stack Overflow コマンドパレットを開く 以下のキーでコマンドパレットを開きます。 Mac: Command + Shift + P Windows: Ctrl + Shift + P 再読み込みする restart と…

参考にさせていただいたページ ElementやEventに型をつけよう 型定義と関数定義を別々にやる たぶんこんな感じ import { FocusEventHandler, ChangeEventHandler, CompositionEventHandler } from 'react'; type HandleBlur = FocusEventHandler<HTMLInputElement>; type Handl</htmlinputelement>…

参考にさせていただいたページ React で this.props.children に新しい Props を渡す - 無駄と文化 reactjs - How to assign the correct typing to React.cloneElement when giving properties to children? - Stack Overflow サンプルコード import { clon…

参考にさせていただいたページ CSS Modulesについて 【React】CSS ModulesでCSSとSass(SCSS)のローカルスコープを作る - クモのようにコツコツと 2020年におけるCSS設計の暫定解 | foo-x CSS Modulesの型定義について TypeScript + CSS Modules をWebpackで…

参考にさせていただいたページ VS Code Extensionのインストール ESLint - Visual Studio Marketplace eslintのインストールと設定 主に「りあクト!（第3.1版）」という書籍の第6章を参照しました。 りあクト！ TypeScriptで始めるつらくないReact開発 第3.1…

参考にさせていただいたページ 最新版TypeScript+webpack 5の環境構築まとめ(React, Vue.js, Three.jsのサンプル付き) - ICS MEDIA npmモジュールのインストール webpackとTypeScriptの関連モジュールをインストールします。 yarn add --dev webpack webpack…

参考にさせていただいたページ とても参考になる入門と初級の記事です。 TypeScriptの型入門 - Qiita TypeScriptの型初級 - Qiita はじめに 以下のページを読んで、Mapped Typesが理解できる人はこの記事を読む必要は全くありません。 TypeScriptの型入門 - …

参考にさせていただいたページ TypeScript 2.8 の Conditional Types について - Qiita TypeScriptの型入門 - Qiita TypeScriptの型初級 - Qiita この記事について inferまじで何もわからない。という私のような人が少しとっかかりをつかむ超入門記事です。 …

はじめに ほんとに便利な型Tipsを公開してくださっている記事がいくつかあり、あとで見つからなくなったらつらいのでメモしておきます。 リンク TypeScriptで自作している便利型Tips 辞書を作る関数に TypeScript で執拗に型をつける - Object.create(null) …

参考にさせていただいたページ TypeScriptの型入門 - Qiita 辞書を作る関数に TypeScript で執拗に型をつける - Object.create(null) makeObj.tsに関数を定義する 以下のような関数を定義します。 type MyKeys<T extends string> = readonly T[] export default function makeO</t>…

参考にさせていただいたページ TypeScriptの型入門 - Qiita はじめに 関数を定義する段階では引数の型は決めずに、実行時に渡す引数の型によって決まってほしいときがあると思います。 そのようなときに便利な方法です。 関数の定義の仕方 ジェネリクスを使…

参考にさせていただいたページ TypeScriptの型入門 - Qiita TypeScript の構造的部分型とプリミティブ型について - 30歳からのプログラミング はじめに きっかけとなったのはこちら「TypeScriptの型入門 - Qiita」の入門記事であり、キーが多い方が少ない方…

オブジェクトの型を定義する 以下のように定義しました。 type MyObjA = { a1: string; a2: string } type MyObjB = { b1: string; b2: string } type MyObjC = { c1: string; c2: string } type MyObjUnion = MyObjA | MyObjB | MyObjC type MyObjAnd = MyO…

はじめに 以前書いた「Nuxt.js 2.x + TypeScript 4.x その0004 FontAwesomeの必要なアイコンだけ読み込んで使う - Motomichi Works Blog」みたいな感じでimportしたアイコンを、例えば自分で作ったMyComponentに渡すときにMyComponentのpropsの型はどのよう…

参考にさせていただいたページ typescriptのバージョンを確認する | mebee 確認方法 以下のコマンドで確認できると思います。 npx tsc -v

はじめに 検索すると、クラスベースで書いてデコレータを使う方法については多くヒットしますが、Vue.extend()で書いている場合の方法についてはあまりヒットしなかったのでこの記事を書いています。 特に変わったことは書いていませんが。 今日の開発環境 N…

参考にさせていただいたページ 関数の型 - TypeScript Deep Dive 日本語版 はじめに いくつか方法がありますが、少し書いてみます。 後日もう少し充実させていこうと思います。 例として、以下のような「引数が2つあってオブジェクトを返す関数」の型を定義…

参考にさせていただいたページ Template Literal Typesについて TypeScript: Documentation - Template Literal Types 配列を元にStringLiteralTypesの型を定義する方法について TypeScript array to string literal type - Stack Overflow はじめに 以下の…

参考にさせていただいたページ keyof typeofの使い方 [TypeScript] - Qiita TypeScriptの型入門 - Qiita Index signature（インデックス型） - TypeScript Deep Dive 日本語版 はじめに 注意して使用しましょう。 「キーが未確定なobjectを先に作って後から…