ReturnType・JSX・ESLint

昨日宣言したポモドーロテクニック作戦はあっさり敗北しました。。 今日はこのアプリを入れて実践してみようと思います↓

Be Focused - 仕事および勉強用の Timer

• Denys Yevenko
• 仕事効率化
• 無料
• 

apps.apple.com

スタートするときにタスクを入力するので「よし！」という気持ちになりそう。

ReturnType

TypeScriptは型推論を行うけれど、その推論した戻り値の型を抽出する方法。

const aloha = () => 'Aloha!'
type Greeting = ReturnType<typeof aloha>;
const chao = () => Greeting => 'Chao!';

• 複数の関数の戻り値型をまとめて共用体型をつくりたいとき
• ReduxをTypeScriptで使うとき

JSX

JSXはテンプレート言語ではない！

「React の開発者は DOM のインタラクティブな書き換えという複雑な問題に対応するため、アプリ を独立性の高いコンポーネントという単位に分割し、そこにロジックとデザインを完結させて閉じ込 める方法を採った。ひとつのページを役割別に MVC の 3 つに分けて処理するよりも、見た目と機能 が完結した無数のコンポーネントを組み合わせていくほうが、より複雑なアプリケーションを破綻なく構築できると思わない? 前にもちょっと説明したけど、React では各コンポーネントはロジックレベルでもデザインレベルでもそれぞれ相互に独立していて、処理が終わったものから五月雨的にレ ンダリングされていくの」

なるほど。

JSX でタグを階層化して書くときは、ツリー階層のトップレベルはひとつにしないといけない。

ESLint

TSLintはESLintに統合されていくので、今後はTSLintで。

VSCodeの settings.json に下記を追加しておくとよい。

"editor.codeActionsOnSave": { "source.fixAll.eslint": true
},