Make it to make it

いろいろ作ってアウトプットするブログ

typescript

Redux Toolkitを用いたリファクタ

React, Redux, TypeScriptの組み合わせだと、どうしてもファイル数が増えて、記述があちらこちらに散らばることが多々あり、リーダビリティが下がってしまう。 Redux Toolkit (RTK) を使えば、あちらこちらに記述していた書き方を集約して書ける以外にも、re…

React x TypeScriptの組み合わせミニマルサンプル

こちらのBen Awadのサンプルがよかったのでメモしておく。 github.com ディレクトリ構造 . ├── package.json ├── public │ └── index.html ├── src │ ├── App.tsx │ ├── Counter.tsx │ ├── ReducerExample.tsx │ ├── TextField.tsx │ ├── index.tsx │ └── re…

学びの記録『りあクト!』第11章 Redux でグローバルな状態を扱う

github.com useSelector, useDispatchを用いたReduxの書き方 ディレクトリ構造 container, presentationalディレクトリで分けて、atomic design風に分ける。 . ├── App.css ├── App.tsx ├── components │ ├── container │ │ ├── molecules │ │ │ └── Colorfu…

TypeScriptで使いまわしやすいコードを書く

Node.js環境上でCSVファイルを取り込んで何かしらの加工をして吐き出すプログラムを書きながら、使い回しのし易いTypeScriptの書き方を学ぶ。 セットアップ Packages yarn add -D @types/node @typescript-eslint/eslint-plugin @typescript-eslint/parser c…

React hooksのミニマルサンプル

リファクタプロセス hooksを一つずつ導入 useState カウンターアプリを、まずはstate hookを使って書いてみる。 import React, { useState } from 'react' import ReactDOM from 'react-dom' const Counter: React.FC = () => { const [count, setCount] = u…

TypeScript学習5(Classes)

Classes Blueprint to create an object with some fields (values) and methods (functions) to represent a 'thing'. class Vehicle { drive(): void { console.log('chugga chugga'); } honk(): void { console.log('beep'); } } class Car extends Vehic…

TypeScript学習4(Typed objects: Interfaces)

Interfaces Creates a new type, describing the property names and value types of an object 例えば、今まで学んだことを利用して次のように型定義を行うと、コードが長くなってしまって可読性も低くなる。 const oldCivic = { name: 'civic', year: 200,…

TypeScript学習3(Typed arrays)

TSでarrayを扱う上で重要なポイント TS can do type inference when extracting values from an array TS can prevent us from adding incompatible values to the array We can get help with map, forEach, reduce, functions Flexible - arrays can still…

TypeScript学習2(ファンクション周りでの扱い)

ファンクション周りでのannotations/inference使い分け Type annotations for functions Code we add to tell TS what type of arguments a function will receive and what type of values it will return. Type inference for functions TS tries to figur…

TypeScript学習1(Type annotations, Type inference)

重要な概念を2つほど。 Type annotations / Type inference Type annotations Code we add to tell TypeScript what type of value a variable will refer to Type inference TypeScript tries to figure out what type of value a variable refers to 前者…

TypeScriptハンズオン2(module化とimport, tsc, tsconfig)

モジュールでの型宣言とimport ES Moduleで他ファイルに型宣言したものを読み込ませることができる。 // Interfaces.ts export interface Person { name: string; age?: number; } enum Job { WebDev, WebDesigner, PM } export default Job; // index.ts im…

TypeScriptハンズオン1(default param, implicit types, union types, interface, enum, class)

デフォルト引数の活用 次のようなファンクションを定義する。 const sayWord = (word: string): string => { console.log(word); return word; }; sayWord('hoge'); sayWord(); TSでは引数と返り値に対してこのような型指定の形式を取る。 するとVanillaJSの…

TypeScriptミニマム実行環境構築

JavaScriptの型付けは動的に行われているので、暗黙の型変換や型の認識(Truthy / Falsy)などが行われてしまう。 そこで必要なのが、JavaScriptのスーパーセット(Superset)であるTypeScriptによる静的型付けである。 ParcelによるTypeScript実行環境の構…