ペロハム大学

ﾔﾙｿﾞｰ

プロを目指す人のためのTypeScript入門 読書メモ② 第3章（1）

TypeScript

■ 思ったこと

正月のテレビ、面白すぎ！！！！

■ 第3章 オブジェクトの基本とオブジェクトの型（3.1～3.5.5）

TypeScriptのオブジェクトとは

  • いくつかの値をまとめたデータ！連想配列とよばれる
  • オブジェクトにも当然オブジェクトリテラルがいる
const obj = {
 hoge: 'hoge'  // ここがオブジェクトリテラル！
}
  • オブジェクトリテラルはプロパティ名: 式で出来ている
  • オブジェクトの中身・・それがすなわちプロパティなんですね。こっから値を取得することをプロパティアクセスという
  • 例えば変数objのhogeを取得したければobj.hoge
  • またはobj['hoge']、プロパティ名は文字列なので[]の中はStringが基本
const name = '名無しさん';

const user = {
    name,
    age: 20,
};

console.log(user.name);
user.name = '名無しさん＠あけおめ';
console.log(user['name']);

// [console]
// 名無しさん
// 名無しさん＠あけおめ
  • ちょっと待って！！nameはconstなのに再代入してるじゃん！！・・それは、オブジェクトの中身がいくら変わろうが、変数name の中身自体が同じであればOKということらしい。逆に言うと書き換えできちゃってるってこと、いいのか悪いのか！？

スプレッド構文

  • を使うと、オブジェクトの作成時にプロパティを別のオブジェクトからコピーできます
  • プロパティ名: 式の位置を...式と書けばOK
  • 同じ名前のプロパティがあれば上書きされる、あくまでコピーなので元のやつは変化なし、まったく別物だよ！
const name = '名無しさん';

const user1 = {
    name,
    age: 20,
};

const user2 = {
    ...user1,
    name: '名無しさん＠あけおめ',
};

console.log(user1);
console.log(user2);

// [console]
// { name: '名無しさん', age: 20 }
// { name: '名無しさん＠あけおめ', age: 20 }

オブジェクトの型

  • オブジェクト自体を表す型
// これがオブジェクトの構文だったら
const obj = {
 hoge: 'hoge',
}

// これがオブジェクトの型！
const obj = {
 hoge: string;
}

// つまり、こういうこと
const obj = {
 hoge: string;
} = {
 hoge: 'hoge',
};

type文で型に別名を

  • 型名を宣言する文、TypeScriptにしかない書き方だぜ！ので、コンパイルすると消える
  • 構文はtype 型名　= 型;、これで型に別名が付けれるので、今後は型名として使える
type HogeObj = {
 hoge: string;
};

const obj: hoge = {
 hoge: 'hoge',
};
  • あくまで使用されるのは型チェックの時なので、各順番場所はどこでもいい。なんかわかってきた感じがする！
  • どの型にでも使える

interface宣言でも型に別名を

  • type文と同じく型名を新規作成できるけど、こっちはオブジェクト型に対してしか使えない
  • 構文はinterface 型名 オブジェクト型
  • type文で足りるのでinterfaceはあんまり使う機械ないかも？
interface HogeObj = {
 hoge: string;
};

const obj: hoge = {
 hoge: 'hoge',
};

オプショナルなプロパティ

  • あってもなくてもいいプロパティのこと、構文は型名?: 型
  • 実際はundefinedを許容されたユニオン型、業務でよく使った記憶

読み取り専用オブジェクト

  • にしてあげると、再代入時にエラーとなる。プロパティ名前にreadonlyつけてあげればOK

typeofキーワードで型をGET

  • 型推論の結果を型として抽出して型名つけて使える・・ちょいむず！

部分型

  • ある型がある型に部分的に一致していたら、それはそれで入れても良いよ♪てきな…使いながら覚えよう！

type文で使え！型引数

  • 構文は型名<型引数>、型引数は複数あってもOKで、プロパティの型として使えマス
  • 型引数を持つ型はジェネリクス型とも呼ばれる
  • 型引数自体の型は使うときに書いてあげる、こーすることで、構造を保ちながらいろんな型作れる
  • 目的としては抽象化・・実際に使ってみないとなかなかピンとコナイネ
type pet<Dog,Cat> = {
    inu: Dog;
    nuko: Cat;
}

const obj1: pet<number, string> = {
    inu: 0,
    nuko: "1"
}

const obj2: pet<boolean, boolean> = {
    inu: false,
    nuko: true
}
  • 型引数の後ろにextendsつけると必ず部分型これにしろみたいな制約つけれるけど利点が分からんうちは置いとこうかな・・
  • 型引数 = 型で初期値を入れられる。これで省略できるんだって、便利なことはわかる！

出たわね、配列！

  • 最初に言っとくと、TypeScriptの配列はオブジェクトの一種わよ！なんでって・・値がプリミティブとオブジェクトしかないからね、前者じゃないからね
  • やっぱりここでも。配列は配列リテラルで作る！[]の中に色々書くやつ、、これが評価されて配列ができていたのか
  • 配列の中身は要素（element）と呼ぶ
  • 要素の型は一個に限らずなんでも混ぜちゃってOK（ユニオン型だね）
  • 要素にはスプレッド構文も使える、別の配列の中身コピったり

読み取り専用配列型

  • こちらも型の前にreadonlyつけてあげればOK、可読性上がるので積極的に使うべし

便利、配列のメソッド！

  • push
    • おなじみ、配列の後ろに要素追加する、プッシュプッシュ～！
  • unshift
    • …知らん！先頭に要素追加できるんだって、そんなのあったのか・・
  • includes
    • 配列の中に引数が含まれてるか、booleanで返ってくる、便利
  • indexOf
    • 引数が配列の何番目に含まれているか？ない場合は-1が返ってくる、これが結構大事よね

■ 感想

フットンダで印象残ったのは河本の替え歌だ・・三四郎のラジオにたまに来る様子を見ると、変なぶっこみが多くて突っ込む人がいると結構笑える。三四郎ANNは年越し特番も年末空気抜群のわちゃわちゃ感で楽しかったぜ！そんでフットンダ、テレビで川北がハマりまくってるの初めて見たかもしれん！粗品との対決すごくよかった！ヂ寄席は去年見たからの男前激スベリ展開が面白過ぎる、一体感高めで超よかった！優勝ネタ祭りも見ごたえあったし、いぬ、めっちゃワクワクした好き！！座王もまさかの決勝だったしシンパイショーも相変わらず面白い・・ああ、正月最高！！