Closed27

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

haruruharuru

3章 オブジェクトの基本とオブジェクトの型

3.2.4 interface宣言でオブジェクト型を宣言する

ほとんどの場合、interface宣言はtype文で代用可能です。しかもtype文のほうがより多くの場面で使えるので、interface宣言は使用せずにtype文のみを使うという流儀もあるようです。

ただ、type文が存在せずinterface宣言のみ利用可能だった時期があった(2014年以前)という歴史的経緯のために、オブジェクトの型を作る際はinterface宣言を使うという手癖がある人も多少いるようです。

マジでー!?
わたしinterface派だった!
なんでだろ?と思ったらわたしの型の書き方って@typesを見て覚えてるから?

haruruharuru

3.2.7 読み取り専用プロパティの宣言

とくにプロパティを変更するつもりがない場面ではreadonlyをつけておくほうがより安全です。

あー、あんまやってないかも。
気をつけてみよ。

haruruharuru

ちょいちょい 「TypeScriptでは〜〜」 って書かれてる場所で「え、そうなの?それJSの文法じゃなかったんだ?」ってなって調べるのが時間かかる

haruruharuru

コラム13 配列の要素にアクセスするときの密かな危険性

危険性を回避する1つの方法は、arr[100]のような インデックスアクセスは極力使用しない というものです。

言われてみれば、これが一番不具合だしやすい場所な気がする。
わたしも普段から範囲チェックは気をつけてたけど、賢い人はそもそも「なるべく使わない」っていう意識を持ってるのかー

haruruharuru

3.6.1 オブジェクトの分割代入(1)基本的なパターン

ところで、分割代入を使うにあたっては、1つ注意すべきことがあります。それは 分割代入で宣言された変数には型注釈がつけられない という点です。

んんん〜〜???
分割代入するときに型って付けられますよね?

こういうやつ

const { num, str }:{ num:number, str:string } = obj

後で出てくるのかな?
関数の引数あたりで説明がありそう。

haruruharuru

3.6.4 分割代入のデフォルト値

分割代入にデフォルト値なんて知らなかったですよ。
使いどころあるかな・・・

haruruharuru

3.7.5 Mapオブジェクト・Setオブジェクト

Setはキーだけで値のないMapであるとも考えることができ、ある意味で非常に似たオブジェクトです。

こうやって言われると便利そう。
けど、いままで意識してSet使ったことなかったかも。

キーがオブジェクトであり、列挙系のメソッドを使わない場合はMap/SetではなくWeakMap/WeakSetの採用を検討する余地があります。

存在すら知らなかった
WeakMap/WeakSet

haruruharuru

4章 TypeScriptの関数

4.2.1 関数型の記法

実際、関数型中の引数名は型チェックに影響しません。

こういう細かいところって誰も教えてくれない(知らない)のよね
ありがたし

haruruharuru

5章 TypeScriptのクラス

5.1.7 コンストラクタ引数でのプロパティ宣言

class User {
    constructor(public name: string, private age: number)
}

へー、こんな書き方があるんだ!
見たことないな

5.1.10 クラスの静的初期化ブロック

これも知らなかったけど、いつ使うんだろ・・・
まったくイメージできなかった

haruruharuru

5.2.1 クラス宣言はインスタンスの型を作る

なお、これはクラス宣言に特有の挙動であり、クラス式にはそのような効果はありませんので注意しましょう。

ほんと知らないことが多いよね
言われなくてもこれはやらないけど

コラム22 変数名の名前空間と型名の名前空間

変数名と型名です。これらは 別々の名前空間 に属しています。

へーーー!

クラス宣言というのは 両方の名前空間に同時に名前を作成する構文 だったのです。

へ〜〜〜〜〜!!

5.2.2 newシグネチャによるインスタンス化可能性の表現

いつ使うんだ・・・

haruruharuru

5.2.3 instanceof演算子と型の絞り込み

ロジックはあくまで型システムで記述できるべきであり、クラスという機構を前提とした instanceof に頼るべきではないのです。

むむむ、そうなの?
どっかで使っちゃった気がするぞ

haruruharuru

5.3.3 override修飾子とその威力

うーん、こういうルールを足して縛りを強くするテクニックって敬遠しちゃうんだよなあ
自由に書きたい!と思っちゃうけど、それをさせないためのTSだしなあ
lintと同じで慣れるまでなんだろうけど

コラム23 継承で明らかになるprivateと#の差異

実は、privateプロパティは親と子で同じ名前のプライベートプロパティを定義できませんが、#ならできます。

それって便利なの?ややこしくない?と思ったんだけど、そっかプライベートだからいいのか・・・

haruruharuru

6章 高度な型

6.1.1 ユニオン型の基本

これでは不便ですが、心配は無用です。ユニオン型の本領はこんなものではありません。

期待値!!!🤣🤣

haruruharuru

6.1.3 インターセクション型とは

インターセクション型の原義は「かつ」ですが、実際には「 オブジェクト型を拡張した新しい型をつくる 」という用途で使われることが多くあります。

使いこなしてるコードを見るとスマートだなと思う。
わたしは使いこなせていない。
見た記憶はあるけど使った記憶がない。なんでだろ?

haruruharuru

6.3.3 代数的データ型をユニオン型で再現するテクニック

これがさっきの「ユニオン型の本領」というやつかな?
なるほど、TSの機能としてではなく、実装テクニックで解決せよということか。

これができるエンジニアはTypeScript力に優れていると言えるでしょう。

むむー
代数的データ型をググったけどよく分からん・・・

ひとまず型の判定情報を type プロパティとして持たせておくというテクニックは覚えた。
haruはTypeScript力が1あがった

haruruharuru

6.4.3 keyof型・lookup型と型ジェネリクス

ダメ
まったく頭に入ってこない
急にムズくない?

とつぜんのコレ
・・・ぎぶ

haruruharuru

6.5.2 as const の用法

実際のところ、as const は3つめの作用を活かして「値から型をつくる手段」として使われる場面がよくあります。

as const を使うことで同じことを2回書く必要がなくなる場合があります。

なるほど、言われてみると便利かも!

6.6.2 any型の存在理由

anyが悪なのはわかるけど、ライブラリ側が型の説明をちゃんと書いてくれてないのが悪くない?
こっちだって型を付けたいけど、どの型を使えばいいのか調べるのが大変なのが多すぎると思う。
正しい型がすぐに分かれば、誰もanyになんか頼らないんじゃないかな。でないとわざわざTSなんか使わないよ。

haruruharuru

6.7 さらに高度な型

これらをすべて理解する必要はありませんので、説明を読んでもわからないという方もご安心ください。

ぎぶ!!!

6.7.6は分かる。

haruruharuru

7 TypeScriptのモジュールシステム

コラム33 defaultエクスポートは使わないほうがよい?

そんな流行があるの知らなかったな。
むしろdefaultを作るのがお作法かと思ってた。

コラム34 スクリプトとモジュール

スクリプトではトップレベルに定義された変数や型のスコープがファイルの中だけでなくプロジェクト全体に広がるという点です。

あー、それそういうことなんだ!?
わたしが知らないだけで、どっかにトップでグローバルなファイルがあるんだと思ってた!

haruruharuru

コラム37 自分で型定義ファイルを作るには

やっと .d.tsdeclare が出てきたと思ったら、さらっと終わってしまった・・・

haruruharuru

ん?
そういえば、分割代入の型の件はずっと出てこなかったな・・・
モヤモヤするな・・・

haruruharuru

8 非同期処理

8.2.4 同期処理と非同期処理の順序

同期的に実行中のプログラムに非同期処理が割り込むことはない ということです。

ほほう、意識したことなかった。覚えておこう。

haruruharuru

8.3.6 Promiseの静的メソッド(2)

また、結果の配列 results は results[0], results[0]のようにアクセスするよりも分割代入で変数に入れるのがおしゃれです。

おしゃれ!!

Promise.race は Promise.all ほど使う頻度が高くありませんが、たとえばタイムアウトを簡単に表現したい際に役立ちます。

へーーー、Promise.race は使ったことなかった。
こうやって使うのか。スマートだ。

haruruharuru

8.3.6 Promiseの静的メソッド(3)

Promise.allSettled も使ったことないかな?
これは必要な時がありそう。

haruruharuru

8.3.8 Promiseチェーン(1)チェーンを作る

ポイントは、このように catche はPromise の失敗を成功に変換することができる という点です。

なるほど、catheした後にまたthenってできるのか・・・

8.3.11 dynamic import構文

モジュールを非同期的に読み込んでPromiseを返すとな!?
なにそれ知らない

haruruharuru

コラム38 top-level await

Reactではどうなるんだろとググったら設定がいるらしい?
あとで調査。

topLevelAwait: true
haruruharuru

おしまい!!!

すごい! お腹いっぱい!

素敵な本でした!
TSについて知らないことがたくさんありすぎてびっくりした。

本音を言うと、これが3年前に欲しかったぞ!!!

よくある「新人に読ませたい本」みたいなのを選ぶことがあったら、わたしはこの本を選ぶね。

とりあえず1週めはおしまい。
分からなかったところが理解できるように、もうちょっとレベルアップしてから2周めを読みます!

https://gihyo.jp/book/2022/978-4-297-12747-3

このスクラップは2022/04/28にクローズされました