しゅん 2021/05/19

しゅん 2021/05/20に更新

interface vs type
typeが良さそう
①定義できる型の種類
interfaceではオブジェクトとクラスの型だけ定義できますが、typeでは他の型も参照できます。
②interfaceは拡張ができ、勝手に拡張されるリスク

interface Shoes {
  size: number;
  color: string;
}

interface Shoes {
  isSecondhand: boolean;
}　=> これがエラーなくどこにもかけてしまう

const heel: Shoes = {
  size: 235,
  color: "red"
}; => これがプロパティ不足でエラーになる

しゅん 2021/05/20に更新

namespaceとmoduleについて

=> 使わない方が良さそう

理由

namespaceとmoduleでできることは、import / export で対応できるから

typescript-eslint のルールのrecomemdedに
no-namespace(namespaceとmodule使うな)があるから
（prefer-namespace-keyword(module使うくらいならnamespace使え)もある..）

https://slash-mochi.net/?p=187

便利なことがないわけでもない

しゅん 2021/05/20に更新

よくわからなくて調べたやつ

prettierのoption

Parser:

使用するパーサーを指定。
Prettierは、入力ファイルパスからパーサーを自動的に推測するため、この設定を変更する必要はない。

Range

チェックする範囲を指定できる。
そんなケースある？

Arrow Function Parentheses

引数が一つのアロー関数の引数を括弧で囲うか。デフォルトは囲う。

Bracket Spacing

波括弧の内側のスペースをどうするか
デフォルトは空ける

Trailing Commas

複数行の列挙の際、末尾のカンマを入れる
１行なら入れない

type Foo = {
    a: 1,
    b: 2,
}
type Foo = { a: 1, b: 2 }

Quote Props

わかりやすい日本語記事

しゅん 2021/05/21に更新

package.json scriptsを使用してeslintとprettierをまとめて実行

npm install -D npm-run-all

  "scripts": {
    "fix": "run-s fix:eslint fix:prettier",
    "fix:eslint": "npx eslint --fix --ext .ts './src/**/*.ts' || exit 0",
    "fix:prettier": "prettier --write './src/**/*.ts'"
  },

npm run fix

これだけ！

ちなみに

npm-run-allについて

run-s fix:eslint fix:prettier　// 左から直列実行
run-p fix:*                   // fix:から始まるものを全て並列実行

fix:eslintの「 || exit 0 」について

これを書かないとこんなエラーがでて、後続のprettierまでコケる

npm ERR! code ELIFECYCLE
npm ERR! errno 1

下記を直接実行すればエラーはでないのに。

npx eslint --fix --ext .ts './src/**/*.ts'

理由は
eslintがコードのチェックをしてエラーを見つけた場合に、終了コードとして0以外を返却するから。

ELIFECYCLE... は npm が指定されたスクリプトを実行した結果、エラーが発生したことを報告して出力されているもの。eslintはコードの異常を”正常に検知した”のに、nodejsがこのscriptsは異常終了したよと言ってる。

https://teratail.com/questions/261270