Zenn
Closed17

「プロを目指す人のためのTypeScript入門」のメモ

JavaScript
Node.js
TypeScript
メモ
読書
lightkunlightkun

1.2

  • TypeScriptコンパイラ
    • TypeScriptのコードが書けたら実行．以下の2つを行う
      • 型チェック
      • トラスパイル
  • トラスパイルでTypeScrpitのコードをJavascriptのコードに書き換える．スゴっ
  • JavaScriptに追従しないといけないのがデメリットになってしまう可能性はあるな
lightkunlightkun

1.3

  • $ npx tsc
    • tsconfig.jsonを読み込んでコンパイルを実行
    • tscはTypeScript Compilerの略
  • tsconfig.jsonで指定したディレクトリにコンパイル結果が生成される
    • jsファイルが作成されていた
    • 作成されたjsファイルはnode.jsで実行可能
  • コンパイルとjsファイルの実行を自動でやってくれるライブラリ
lightkunlightkun

2.3

  • TypeScriptで数値はnumber型を使う
  • number型には整数と少数の区別がない
  • const num = 8000;はconst num = 8_000;と_を入れることが可能
  • nullとundefinedがある
  • 変数に型を指定していない場合は自動的に判定してくれる→型推論
lightkunlightkun

2.4.6

  • x ?? yでxがnullまたはundefinedの場合のみyを返す
const a = "OK";
console.log(5 ?? a);
console.log(null ?? a);
console.log(undefined ?? a);
// 出力
5
OK
OK
lightkunlightkun

M1 Macにしたので環境構築メモ(fish shell)

nodenvをインストール

$ brew install nodenv
$ nodenv -v
nodenv 1.4.0

パスを通す

~/.config/fish/config.fish
+ eval (nodenv init - | source)

本書と同じ16.8.0インストール

$ nodenv install  16.8.0
$ nodenv global 16.8.0
node -v
v16.8.0
lightkunlightkun

3.1

  • TypeScriptのオブジェクト=連想配列
  • 書き方
const sample = {
    number: 123,
    string: "str"
}

console.log(sample.number); // 123

const sample = {
    1: 123,
}

console.log(sample["1"]); // 123
  • オブジェクトのコピーができるスプレット構文
const sample = {
    number: 123,
    string: "str"
}

const sample2 = {
    ...sample,
   // あと勝ちになる
    string: "overwrite"
}

console.log(sample2); // { number: 123, string: 'overwrite' }
  • オブジェクトを代入するときの注意
const sample = {
    number: 123
}
// 参照先が別々
const sample2 = {
    ...sample,
}
sample2.number = 5;

console.log(sample); // { number: 123 }
console.log(sample2); // { number: 5 }

const sample = {
    number: 123
}
// 参照先が同じなのでsample.numberの値も変わる
const sample3 = sample;
sample3.number  = 2;

console.log(sample); // { number: 2 }
console.log(sample3); // { number: 2 }
lightkunlightkun

3.2

  • 型付きの書き方
const x: {
    a: number,
    b: string
} = {
    a: 123,
    b: "str"
}
console.log(x); // { a: 123, b: 'str' }
  • type文=型を宣言する文
type sampleObj = {
    a: number;
    b: string;
}

const y: sampleObj = {
    a: 123,
    b: "str"
}
console.log(y); // { a: 123, b: 'str' }
  • ?をつけることでオプショナルなプロパティの宣言が可能
type sampleObj = {
    a: number;
    b: string;
    c?: string;
}

const y: sampleObj = {
    a: 123,
    b: "str"
}
console.log(y); // { a: 123, b: 'str' }
console.log(y.c); // undefined
  • 読み取り専用にするにはreadpnlyをつける
type sampleObj = {
    readonly a: number;
}

const y: sampleObj = {
    a: 123,
}
lightkunlightkun

3.5

  • 配列に関しての部分

  • 書き方

const arr: number[] = [-1, 0, 1, 2];

console.log(arr); // [ -1, 0, 1, 2 ]
// インデックスアクセスという．1の部分は必ず数値にしないといけない
console.log(arr[1]); // 0

  • 配列でもスプレット構文の利用が可能

  • 複数の型の配列の場合は，値の増減に対応できないが次のように書けた．

    • タプル型という(tsでは配列の一種みたい)
    • 調べてみると他にも色々方法はありそうだった
const arr: [number, string, number] = [-1, "str", 1];
console.log(arr); // [ -1, 'str', 1 ]
lightkunlightkun

3.6

  • 分割代入について
    • オブジェクトから値を取り出して変数に代入するのを簡単に書ける
このスクラップは2022/07/18にクローズされました