コピペコードで快適生活

明日使えるソースを自分のために

TypeScript

ReactHooksを使ってみる

最近のReactでは関数コンポーネント&ReactHooksを使うのが主流らしい。 キャッチアップしたところ、state管理がコンポーネントからキレイに分離できてよさそうだった。 index.tsx import * as React from "react"; import * as ReactDOM from "react-dom"; …

React+TypeScript+webpackの環境構築

必要なライブラリのインストール ビルドツールをインストールする npm install --save-dev webpack webpack-cli webpack-dev-server typescript ts-loader React関連のライブラリをインストールする。 ビルド後のファイルに含めるので--saveとする。 npm ins…

TypeScriptのコードをJestでテストする

やり方には、ts-jestを使う方法と、babelを使う方法がある。 babelを使うやり方は、https://kinosuke.hatenablog.jp/entry/2020/01/29/115640 と同じアプローチ。preset-envをpreset-typescriptにするだけ。ただし、型チェックはできない。 今回は、型チェッ…

TypeScript+webpack環境を作る - ts-loader使う版

https://kinosuke.hatenablog.jp/entry/2021/07/23/165039 のやりなおし。 babelはTypeScriptからJavaScriptへの変換だけをやってくれるだけで、肝心の型チェックはやってくれなかったので、ts-loaderを使ってやってみる。 必要なライブラリをインストール n…

TypeScript+webpack環境を作る - babel使う版

TypeScriptをはじめてみる - コピペコードで快適生活 の続き 必要なライブラリをインストール npm install --save-dev webpack webpack-cli typescript babel-loader @babel/core @babel/preset-typescript webpack: モジュールバンドラー。 JavaScript等の…

TypeScriptをはじめてみる

TypeScriptの雰囲気を掴むために、5分でできるチュートリアルをやってみる。 環境の準備 PC環境は汚したくないので、dockerで環境を作る。 #{APP_DIR}/docker-compose.yml に以下を書く version: '3' services: node: image: node volumes: - "./:/var/app" …