タイトルのような疑問を持ちながらTypeScriptをとりあえず書いていた時期が私にもありました。 
いちいち型書かなきゃいけないのめんど・・・という時期が。
今回はTypeScriptはなんのために使うものなのか、どんなメリットがあるのかを中心に 
TypeScriptの恩恵についてお話ししていきたいと思います！
<hr>
<h2 id="typescript%E3%81%A8%E3%81%AF">
<a class="header-anchor-link" href="#typescript%E3%81%A8%E3%81%AF" aria-hidden="true"></a> TypeScriptとは</h2>
公式(<a href="https://www.typescriptlang.org/ja/" target="_blank" rel="nofollow noopener noreferrer">https://www.typescriptlang.org/ja/</a>)にはシンプルにこう書かれています。
<blockquote>
TypeScript は、型の構文を持つ JavaScript です。
</blockquote>
え？! つまりTypeScriptってJavaScriptなの？？ ってなりますよね。 
どういうことなんでしょうか？？？
実はTypeScriptは、最終的にJavaScriptにコンパイルして実行されます。 
(JavaScriptにコンパイルして使う言語を総じて「AltJS」と呼び、他に<code>CoffeeScript</code>や<code>Dart</code>などがあります。)
<aside class="msg message">!<div class="msg-content">
コンパイルとは: プロフラミング言語で書かれたソースコードをコンピューターが実行可能な形式に変換すること
</div></aside>
<hr>
<h2 id="javascript%E3%81%98%E3%82%83%E3%83%80%E3%83%A1%E3%81%AA%E3%81%AE%EF%BC%9F%EF%BC%9F">
<a class="header-anchor-link" href="#javascript%E3%81%98%E3%82%83%E3%83%80%E3%83%A1%E3%81%AA%E3%81%AE%EF%BC%9F%EF%BC%9F" aria-hidden="true"></a> JavaScriptじゃダメなの？？</h2>
結局JavaScriptになるなら、意味ないじゃん！!! 
と思った方、そんなことはありません✋ 
TypeScriptはJavaScriptの問題点を補ってくれる、いわばJavaScriptの上位互換です。
「型を定義できない」というのも問題点のひとつで、個人開発や少人数ならまだしも大規模開発になってくると開発スピードに影響が出たり、バグを防ぎづらいなどの問題が出てきます。
そこでTypeScriptを使おう！となるわけですね。
<hr>
<h2 id="%E5%9E%8B%E3%82%92%E5%AE%9A%E7%BE%A9%E3%81%99%E3%82%8B%E3%81%A3%E3%81%A6%E3%81%A9%E3%81%86%E3%81%84%E3%81%86%E3%81%93%E3%81%A8%EF%BC%9F">
<a class="header-anchor-link" href="#%E5%9E%8B%E3%82%92%E5%AE%9A%E7%BE%A9%E3%81%99%E3%82%8B%E3%81%A3%E3%81%A6%E3%81%A9%E3%81%86%E3%81%84%E3%81%86%E3%81%93%E3%81%A8%EF%BC%9F" aria-hidden="true"></a> 型を定義するってどういうこと？</h2>
型ってなに？ 
定義・・・・？？？？
という方のために補足ですが、実際にコードで見てみると
<div class="code-block-container"><pre class="language-js"><code class="language-js">interface Account {
 id: number
 displayName: string
}
</code></pre></div>こちらは公式に置いてあった簡単な例ですが、ここではAccoutの
<ul>
<li>
<code>id</code>はnumber(数値型)</li>
<li>
<code>displayName</code>はstring(テキスト型)</li>
</ul>
であることが定義されています。
つまりどういうことかというと、<code>id</code>には数値しか、<code>displayName</code>にはテキストしか使えない状態にしてあげています。
<hr>
<h2 id="%E5%9E%8B%E3%82%92%E5%AE%9A%E7%BE%A9%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%81%A7%E3%81%A9%E3%82%93%E3%81%AA%E3%81%84%E3%81%84%E3%81%93%E3%81%A8%E3%81%8C%E8%B5%B7%E3%81%8D%E3%82%8B%E3%81%AE%E3%81%8B">
<a class="header-anchor-link" href="#%E5%9E%8B%E3%82%92%E5%AE%9A%E7%BE%A9%E3%81%99%E3%82%8B%E3%81%93%E3%81%A8%E3%81%A7%E3%81%A9%E3%82%93%E3%81%AA%E3%81%84%E3%81%84%E3%81%93%E3%81%A8%E3%81%8C%E8%B5%B7%E3%81%8D%E3%82%8B%E3%81%AE%E3%81%8B" aria-hidden="true"></a> 型を定義することでどんないいことが起きるのか</h2>
では実際に型を定義することでどんないいことが起きるのでしょうか。 
ここでは主な利点として3つ上げてみます。
<ol>
<li>バグを未然に防ぐ</li>
<li>エディタ補完が強力になる</li>
<li>可読性が上がる</li>
</ol>
<h3 id="1.%E3%83%90%E3%82%B0%E3%82%92%E6%9C%AA%E7%84%B6%E3%81%AB%E9%98%B2%E3%81%90">
<a class="header-anchor-link" href="#1.%E3%83%90%E3%82%B0%E3%82%92%E6%9C%AA%E7%84%B6%E3%81%AB%E9%98%B2%E3%81%90" aria-hidden="true"></a> 1.バグを未然に防ぐ</h3>
型が定義されていれば、
<ul>
<li>この変数にどんな値が入っているか</li>
<li>この関数にはどんな値を渡せばいいのか</li>
<li>この関数はどんな値を返すのか</li>
</ul>
などといったことが見えるようになり、あらゆるパターンを想定してプログラムを書くことができます。結果、予期せぬバグを防ぐことができるというわけですね。 
例えば、「nullが返ってくる可能性があるということがわかっていれば防げるバグ」などが挙げられると思います。
もちろん100%防げるかといったらそうではなく、 
型定義が誤っている可能性があったり、any型などはすり抜けてしまったりします。
<h3 id="2.%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF%E8%A3%9C%E5%AE%8C%E3%81%8C%E5%BC%B7%E5%8A%9B%E3%81%AB%E3%81%AA%E3%82%8B">
<a class="header-anchor-link" href="#2.%E3%82%A8%E3%83%87%E3%82%A3%E3%82%BF%E8%A3%9C%E5%AE%8C%E3%81%8C%E5%BC%B7%E5%8A%9B%E3%81%AB%E3%81%AA%E3%82%8B" aria-hidden="true"></a> 2.エディタ補完が強力になる</h3>
互換性のあるエディタでは型定義を元に入力候補を表示する事ができます。 
おなじみのVisual Studio CodeはTypeScriptと同じマイクロソフトが開発しているので、当然対応しています。
例えばこのように型を宣言してあげると
<div class="code-block-container"><pre class="language-js"><code class="language-js">type Item ={
 id: number
 name: string
 color: 'red'| 'blue'| 'green'
}
</code></pre></div>その変数を使用するときにこのように候補を表示してくれます。 
<img src="https://storage.googleapis.com/zenn-user-upload/c3dd70cd731c-20221016.png" alt loading="lazy" class="md-img">
地味に見えますがこういったサポートが開発効率を大き上げてくれます。
<h3 id="3.%E5%8F%AF%E8%AA%AD%E6%80%A7%E3%81%8C%E4%B8%8A%E3%81%8C%E3%82%8B">
<a class="header-anchor-link" href="#3.%E5%8F%AF%E8%AA%AD%E6%80%A7%E3%81%8C%E4%B8%8A%E3%81%8C%E3%82%8B" aria-hidden="true"></a> 3.可読性が上がる</h3>
複数人による大規模な開発ほど、自分の把握していないコードを触る際に 
「この変数にはなにが入っているんだろう・・・」 
「この関数にはどんな値を渡せばいいんだ？？？」 
「一体ここでなにが返ってくるんだ(白目)」
といった場面に遭遇することがありますよね。。 
しかしTypeScriptなら(しっかり型定義していれば)これらが一目瞭然！ 
開発の大きな手助けとなります💪
<hr>
<h2 id="%E3%83%87%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88%E3%81%AF%E3%81%AA%E3%81%84%E3%81%AE%EF%BC%9F">
<a class="header-anchor-link" href="#%E3%83%87%E3%83%A1%E3%83%AA%E3%83%83%E3%83%88%E3%81%AF%E3%81%AA%E3%81%84%E3%81%AE%EF%BC%9F" aria-hidden="true"></a> デメリットはないの？</h2>
いいことだらけでデメリットがないようにも見えるTypeScriptですが 
メンバーのスキルセットによっては学習コストがかかり工数も増えるので、 
チームのリソースや開発の規模に合わせて導入を検討するのが良いですね。
ただし長期的にみると得られるメリットの方が大きいと思うので、ぜひ前向きに導入を検討してみてください！(誰)
<hr>
<h2 id="%E3%81%BE%E3%81%A8%E3%82%81">
<a class="header-anchor-link" href="#%E3%81%BE%E3%81%A8%E3%82%81" aria-hidden="true"></a> まとめ</h2>
最後まで読んでいただき有り難うございます！
この記事を読んでTypeScriptの恩恵について理解を深められた方は「よっしゃどんどん型つけるぞーー！」と明日からの型付けモチベーションがUPしたのではないでしょうか(？)
記事について疑問やご指摘があれば是非、コメントなどでご連絡ください！ 
<a href="https://twitter.com/fumina_twinsmom" target="_blank" rel="nofollow noopener noreferrer">Twitter</a>のフォローもよろしくお願いいたしますϵ( 'Θ' )϶

TypeScriptってなんのために使うの？

型を定義するってどういうこと？

型を定義することでどんないいことが起きるのか

Discussion