ペロハム大学

ﾔﾙｿﾞｰ

プロを目指す人のためのTypeScript入門 読書メモ① 第1～2章

TypeScript

■思ったこと

JavaScriptすっ飛ばしていきなりTypeScriptやる人も読んで良いよ♪と書いてあったのでこちらの書籍にいたしました。本を読むために本を読む、おれはまるで人間ネスト構文・・！

■ 第1章 イントロダクション

TypeScriptとJavaScriptの違いって

  • TypeScriptは型注釈を書けるのがJavaScriptとの大きな違い、型チェックは静的に行われる（実行前にエラーがあると赤くなるよね）
  • そんで、型情報は型チェックのためだけに利用される。だからコンパイル後にJavaScriptに変換されてもなんの問題もないわけだ
  • 結局実行時はJavaScriptなるので、TypeScriptは実装するときに安全ってのが使う意味
  • tsからjsへの変換はトランスパイルという。変換を簡単に言うと型注釈を取り除くこと

ECMAScript

  • JavaScriptのもう一つの名、が、もっぱら言語仕様の意味で使われる
  • ECMAScript仕様書によって言語仕様が定義されている
  • 調べると日本語訳してくださっているサイトがあります、これはすごい量！！そしていきなり読むには難しい！ xn--ecmascript2020-tt9vf572amitfjlc.com

■ 第2章 基本的な文法・基本的な型

君は文と式の違いを感じたことがあるか

  • TypeScriptのプログラムは文を並べていくことで作られている！TypeScriptの文は;（セミコロン）で終わるよ
  • 式は文の中に現れる
  • 例えばconst text = "hoge";は文だけど、"hoge"の部分は「hoge」という文字列を作り出している、文字列リテラルという式なのだ（この感覚、ムジ～！）
  • const 変数名 = 式;で覚えよう
  • 文と式の違いは、結果があるかどうか！
  • 式の後にセミコロンを書く文は式文というらしい。特に結果もなく、与えられた式を実行させるだけのヤツ

変数

  • constは再代入不可、letは再代入OKだし初期値入れなくても良い
  • constって定数のイメージだけど、TypeScriptの場合はあくまで変数とみるのが主流なんだって
  • letは中身を追うのに読む側の負担があるため、極力使わないでほしいという思い
  • そうするとletが使われるのはループ処理とかがほとんど

値っていうけど

  • 値はプログラムで扱うデータのこと
  • TypeScriptでいう値はほとんどプリミティブで構成される

プリミティブ？誰よその女！！

  • TypeScriptの値はプリミティブとオブジェクトに分けられる
  • プリミティブでググると「原始的な（もの）、根源的な（もの）」って出るように、それ以上分解できない値のこと
  • プリミティブに含まれる値は文字列、数値、真偽値、BigInt、null、undifined、シンボルの七種類
  • シンボルはあまり使わないのでここでの紹介はカッツ・アイ

数値型

  • 正数も少数もひっくるめてnumber型、いいじゃねえか…

リテラル

  • 何らかの値を生み出すための式のこと

数値リテラル

  • 結果が数値になる式のこと

BigInt

  • ES2020で追加された新キャラ、まだまだnumberが主流だけど、今後のために覚えておこう
  • 任意精度の正数をを表す、要するに誤差のない正確な正数！
  • しかし、計算速度はnumberのほうが高速なので、使いどころは限られる？
  • BigIntリテラルは正数の後に「n」を書けばOK
  • 整数のみなので、小数点とかあると丸められちゃうよ

文字列

  • 「""」でも「''」のどっち使っても良かったんだって、そうだったのか…だいたい統一されてるから知らなかった！
  • 改行するなら「/n」

テンプレートリテラル

  • 「``」で囲われた文字列リテラルのこと、この中では改行できる、もちろんエスケープも使える
const hoge: string = `hoge\nhoge
hoge`;
console.log(hoge);

//[console]
// hoge
// hoge
// hoge
  • ES2015で追加されたので比較的新しい書き方なんだって、なんか納得！
  • 変数を${式}で使える書き方はテンプレートリテラル特有の機能だった！式の定義は覚えているか？例えばconst text: string = "hoge"だったら${text}となるわけだけど、textってイコール"hoge"だよね、これって文字列リテラル、式が入ってるんです！結果として、文字列「hoge」が表示される
  • もっと分かりやすくすると、${1+1}だったら2が表示される、馴染みやすい式！

真偽値（boolean）

  • 真偽値リテラルとしてはtrueとfalseの二種類だけ

nullとundefined

  • どっちもデータがないことを表すが、使うのはundefined推奨・・サポートが手厚いから！

演算子

算術演算子

  • 二項演算子
    • 二つの式をつないで新たな式を作る
  • 単項演算子
    • 一つの式に付与して新たな式を作る
    • -式とか、小技だけど+文字列ってやると数値に変換できる。私も筆者さんと同じくNumber(文字列)派だ
  • 比較演算子
    • 式の比較を行う
  • 等価演算子
    • 一致判定を行う
    • 「===」で一致を判定しよう！「==」は暗黙の型変換してくれるおかげでちょっと微妙
    • 「===」はオペランドの型が違えば即、false！！
    • ただし、x == nullに限っては、同時にundefinedのチェックもしてくれるから場合によっては使ってもいいかも
  • 論理演算子
    • 「&&」とか「||」とか、結果がbooleanになるもの
    • ||は型注釈で使うと、引数がない場合のデフォルト値にも使える、これは空文字=falseに変換される挙動から
    • 短絡評価なのも特徴、評価とは式の値を実際に計算すること！左がflaseなら右は見てもくれない。IPAの試験みたいだあ・・
    • 「??」はES2020に追加された新しい論理演算子、左がnullかundefinedの時は右を評価してくれる。SQLのCOALESCE()的な
  • 条件演算子（三項演算子）
    • これがこれならコレ、違うならソレ
    • if分と違って式、短絡評価だよ
  • 代入演算子
    • そのまんま、変数への代入を行う演算子
    • 代入演算子の返り値もそのまんま右の値、そういう考え方したことなかったな！？

■感想

やっぱ基本の勉強大事すぎる・・式の話知らなすぎた！TypeScriptの年表がゲームのリリースノートみたいでおもしろかった、みんなゲームの大型アプデ並みに喜んだろうな！