skillup

技術ブログ

JavaScript

TypeScriptをさわって

投稿日:2023年5月6日 更新日:

世間的にはGWですが、以前からやろうやろうとおもっていたTypeScriptをちょこちょこさわっています。

ある程度フロントで仕事している人なら必須だとは思います。が、実務でまだ使ったことがないのとフレームワークのように一過性のトレンドではなくある程度主流の流れになるだろうなとかんじて腰をすえて勉強しようと去年ぐらいから思ってました(今年初めはいろいろあって着手がおくれましたが・・・)

まだ入り口にたって匂いを嗅いだ程度なんですが、早くもメリットが分かりかけてきたので少しメモしておこうと思います。

TypeScriptに関して

読んで字の如く型のあるJavaScriptです。

まあ、PHPでも7以降やっているかたですと、タイプヒンティングが使えますし、ある程度、コードにこだわりがある現場だったり、リーダーが知見があるかただとおそらく型の定義を必須にしたり、二重イコールやemptyの判定を禁止にしていたりするのではないかと思います。

いい加減な私でさえ(汗)、二重イコールやemptyにアレルギーがでてきたので・・・

で、JSに型が導入されたのがTypeScriptですね。

自分自身はPHPでほぼほぼ型をしっかり定義してかいていたことや、JavaやC#、Goでも経験があったため、それほど抵抗なく取り組めました。

で、やってみた感想などを・・

最も大きいメリットとしては、以下のような点が挙げられるかと思います。

型定義により使えるメソッド、プロパティの判別ができる

なんといってもこれですかね。ある動画サイトの講師の方がいってんですが、「仕様書」みたいなもんですかね。

特にDOM系のメソッドはこれがあることでコードが落ちることがめちゃくちゃへりました。

普通のJSだと大丈夫だとおもったのに、いざ実行しようとした時に

  • 変数がDOM要素だったか、値(innerTextやvalue)だったかを勘違いしてしまい、実行時に落ちる
  • 実行時までは変数の型が正確にわからないため存在しないメソッドやプロパティを参照してしまい落ちまくる・・・

ということが結構ありましたが、TypeScriptで書いた場合、型で判定できるので、有効なメソッドやプロパティを判定することができそれがなくなったのが大きいです。

また使えるメソッドを調べたりするのが地味に面倒だったのですが、TypeScriptの場合、メソッドが一覧できますので、この点も楽ですね。

あとはenum系の型処理が使えるのも大きいですね。文字列判定でずっと頑張ってきましたが、やはりコードがみやすく、かつ安全になるので、保守性が一気に高くなります。

型による安全性

また基本的なところで言えば型の照合ができるので、型が合っていない場合、コードを書いていてエラーがでますので、数字と文字の取り違え(金額計算などでよくあります)

  • 特に数字と文字の違いで実行時に型違いが判明して落ちる

などを防ぐことができます。

null/undefinedの可能性に気づける

型判定と同一トピックですが、nullやundefinedの可能性がある場合に型に明示されているので、

  • チェック忘れをしなくてよい
  • オプショナルチェイニングをすることで値があったときのみ処理を実行することができる
  • 必ず値がある場合には!をつけることでundefinedの可能性をなくすことができる

などnull/undefined関連のミスがなくなります。

学習コストが比較的低い

要は型のついたJavaScriptなのでJavaScriptがわかっていることと、ある程度、静的型付け言語にふれていればそれほど学習コストはかからないと思います。

オプショナルチェイニング(.?などでnull/undefinedの場合にはそれ以降の処理をしないこと)がすごい便利でTypeScriptの記法だと思っていたのですが、調べたところES2020だったようです・・汗

他にも抽象メソッドが使える、型パラメータ、デコレータなどもありますが、まだ使いこなせていないのでここらへんで・・・

-JavaScript

執筆者:


comment

メールアドレスが公開されることはありません。 が付いている欄は必須項目です

関連記事

no image

オートコンプリートのプラグイン

最近だとフォームの入力画面で最初の数文字を入力すると候補を予測して表示してくれる機能(=オートコンプリート)があることが一般的ですね。 いろいろなプラグインがありますが、今回お勧めしたいのはBoots …

no image

JavaScriptでのDom操作に関して

画面系の複雑な処理をやる場合、JavaScriptを使うのですが、個人的に気をつけているポイントなど。 Contents1 ES6のクラス化2 DOM要素取得のポイント2.1 class自体でのスコー …

no image

package.jsonによるタスクの実行

前回の記事でgulpによるタスクの実行を書きましたが、package.jsonでこれを行うこともできます。 てっきり依存ライブラリの記述だけかと思いますしたが、様々なタスクを実行できるようですね。イメ …

no image

JavaScriptのコールバック関数について

Angularをやるうえで前提となるJavaScriptの知識を書いていこうかと。 PHPでもありますが、関数を変数として扱い、別の関数の引数にすることができます。 これを利用すると下記のようなソース …

no image

React×TypeScriptをさわって

新年から新しい現場でReact × TypeScriptを触るようのなのですが、予習していて気づいたことを。 ほとんど雑記ですね・・ 当たり前ですが、データの管理の仕方などはVueと似ているため、やっ …

アーカイブ