ピン留めされたアイテム

いわゆるブルーベリー本と言われるTypescriptの入門本の備忘録です。

1.3 TypeScriptの開発環境

普段AngularやReact等のFWを使っていると、開発環境は自動で作られるためTypeScriptの環境構築って意外と知らないこともありますよね。
備忘録としてメモしておこうと思います。

Node.jsをインストール
package.jsonを作成
package.jsonは、Node.jsのプロジェクトに必ず存在するファイルで、主な機能としてはプロジェクトの依存関係の記録と、プロジェクトの設定を記述する。

npm init (--yes)

デフォルトのpackage.jsonに"type": "module"を追加する。

"main": "index.js"
↓ ↓ ↓
"main": "index.js"
"type": "module"

TypeScriptをインストール

npm install --save-dev typescript @types/node

--save-dev: インストールするパッケージがdevDependencies(プログラムの実行ではなくプログラムのビルドやその他開発時にのみ必要なパッケージ)

tsconfig.jsonの準備
tsconfig.jsonは、TypeScriptコンパイラに対する設定を記述したファイル。

npx tsc --init

デフォルトから変更

"target": "es2016" → "target": "es2020"
"module": "commonjs" → "module": "esnext"
// "moduleResolution": "node" → "moduleResolution": "node" 
// "outDir": "./" → "outDir": "./dist"

最後にincludeオプションを設定。

{
    "compilerOptions": {
        // たくさんのコンパイラオプションたち
    },
    // ↓ここに追加
    "include": ["./sec/**/*.ts"]
}

RON

コラム5 比較演算とNaN

NaNは数値型に属するにも関わらず、数値を表さない不思議な値。
NaNに対しては比較演算子が通用しない。
ex. xにNaNが入っている場合、x === NaN、x < 100, x === 100, x > 100もすべてfalseを返す。
xがNaNかどうかを検証する場合は以下を使う。

Number.isNaN(x)

コラム6 論理代入演算子の特殊な挙動

let name = "Taro"
name ||= getDefaultName();
console.log(name)

上記の例の場合、nameにはすでに真の値が代入されているため、getDefaultName()関数は呼び出されない。
呼び出されない場合、再代入もされない。

RON

オブジェクト

計算されたプロパティ名

const propName = "foo";
const obj = {
  [propName]: 123,
};

console.log(obj.foo); -> 123

オブジェクトリテラルスプレッド構文

const obj1 = {
  bar: 456,
  baz: 789,
};

const obj2 = {
  foo: 123,
  ...obj1,
};

console.log(obj2); -> {foo: 123, bar: 456, baz: 789}

オブジェクトはいつ同じなのか

→ 明示的にコピーしなければ同じ(参照受け渡し)

const foo = { num: 123 };
const bar = foo;
console.log(bar.num); -> 123
bar.num = 0;
console.log(foo.num); -> 0

RON

3.7.2 正規表現

正規表現のフラグ一覧

フラグ	意味
i	大文字・小文字を区別せずにマッチする
g	文字列中の一箇所ではなく全ての箇所にマッチする
m	^や$が文字列の先頭・末尾だけでなく行の先頭・末尾にマッチする
s	.に改行文字も含む
u	文字列をUTF-16コードユニット列ではなくUnicodeコードポイント列として扱う
y	指定された開始位置からのみマッチする

正規表現の例

const r = /ab+c/;

console.log(r.test("abbbbc")); -> true
console.log(r.test("Hello, abc world!")); -> true
console.log(r.test("ABC")); -> false
console.log(r.test("こんにちは")); -> false

const r = /^abc/;

console.log(r.test("abcdefg")); -> true
console.log(r.test("Hello, abcdefg")); -> false

const result = "Hello, abbbbbc world!".match(/a(b+)c/);

if (result != null) {
  console.log(result[0]); -> "abbbbbc"
  console.log(result[1]);-> "bbbbb"
}

RON

5.5.2 例外処理

try-catch

try {
  console.log("エラーを発生させます。");
  throwError();
  console.log("エラーを発生させました。");
} catch (err) {
  console.log("エラーをキャッチしました。");
  console.log(err);
} finally {
  console.log("おわり");
}

function throwError() {
  const error = new Error("エラーが発生しました。");
  throw error;
}

RON

6.2.4 リテラル型のwidening

const RON1 = 'RON'; 
-> 変数RON1は'RON'型
let RON2 = 'RON'; 
-> 変数RON2はstring型