typescript
React, Redux, TypeScriptの組み合わせだと、どうしてもファイル数が増えて、記述があちらこちらに散らばることが多々あり、リーダビリティが下がってしまう。 Redux Toolkit (RTK) を使えば、あちらこちらに記述していた書き方を集約して書ける以外にも、re…
こちらのBen Awadのサンプルがよかったのでメモしておく。 github.com ディレクトリ構造 . ├── package.json ├── public │ └── index.html ├── src │ ├── App.tsx │ ├── Counter.tsx │ ├── ReducerExample.tsx │ ├── TextField.tsx │ ├── index.tsx │ └── re…
github.com useSelector, useDispatchを用いたReduxの書き方 ディレクトリ構造 container, presentationalディレクトリで分けて、atomic design風に分ける。 . ├── App.css ├── App.tsx ├── components │ ├── container │ │ ├── molecules │ │ │ └── Colorfu…
Node.js環境上でCSVファイルを取り込んで何かしらの加工をして吐き出すプログラムを書きながら、使い回しのし易いTypeScriptの書き方を学ぶ。 セットアップ Packages yarn add -D @types/node @typescript-eslint/eslint-plugin @typescript-eslint/parser c…
リファクタプロセス hooksを一つずつ導入 useState カウンターアプリを、まずはstate hookを使って書いてみる。 import React, { useState } from 'react' import ReactDOM from 'react-dom' const Counter: React.FC = () => { const [count, setCount] = u…
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…
Interfaces Creates a new type, describing the property names and value types of an object 例えば、今まで学んだことを利用して次のように型定義を行うと、コードが長くなってしまって可読性も低くなる。 const oldCivic = { name: 'civic', year: 200,…
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…
ファンクション周りでの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…
重要な概念を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 前者…
モジュールでの型宣言とimport ES Moduleで他ファイルに型宣言したものを読み込ませることができる。 // Interfaces.ts export interface Person { name: string; age?: number; } enum Job { WebDev, WebDesigner, PM } export default Job; // index.ts im…
デフォルト引数の活用 次のようなファンクションを定義する。 const sayWord = (word: string): string => { console.log(word); return word; }; sayWord('hoge'); sayWord(); TSでは引数と返り値に対してこのような型指定の形式を取る。 するとVanillaJSの…
JavaScriptの型付けは動的に行われているので、暗黙の型変換や型の認識(Truthy / Falsy)などが行われてしまう。 そこで必要なのが、JavaScriptのスーパーセット(Superset)であるTypeScriptによる静的型付けである。 ParcelによるTypeScript実行環境の構…