<hr>
<h1 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とは</h1>
<p>JavaScriptにコンパイルされる静的型システムが付いたJavaScriptの上位集合</p>
<h4 id="%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB%E3%81%95%E3%82%8C%E3%82%8B%E3%81%A8%E3%81%AF">
<a class="header-anchor-link" href="#%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB%E3%81%95%E3%82%8C%E3%82%8B%E3%81%A8%E3%81%AF" aria-hidden="true"></a> コンパイルされるとは</h4>
<p>TypeScriptをJavaScriptに変換させてJavaScriptを表示している<br>
JavaScriptは規制が緩い</p>
<h4 id="%E9%9D%99%E7%9A%84%E5%9E%8B%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%81%8C%E4%BB%98%E3%81%84%E3%81%9F">
<a class="header-anchor-link" href="#%E9%9D%99%E7%9A%84%E5%9E%8B%E3%82%B7%E3%82%B9%E3%83%86%E3%83%A0%E3%81%8C%E4%BB%98%E3%81%84%E3%81%9F" aria-hidden="true"></a> 静的型システムが付いた</h4>
<p>JavaScriptに変換する前に型検査される<br>
型検査に通るように書く必要がある＝この関数の戻り値はこういう型ですよってわかりやすく書く</p>
<h4 id="javascript%E3%81%AE%E4%B8%8A%E4%BD%8D%E9%9B%86%E5%90%88">
<a class="header-anchor-link" href="#javascript%E3%81%AE%E4%B8%8A%E4%BD%8D%E9%9B%86%E5%90%88" aria-hidden="true"></a> JavaScriptの上位集合</h4>
<p>JavaScriptで書いたコードは全部TypeScriptである<br>
JavaScript＋a がTypeScript（ ＋aの部分は主に型）</p>
<h1 id="%E3%81%AA%E3%81%9C%E4%BD%BF%E3%81%86%E3%81%AE%E3%81%8B">
<a class="header-anchor-link" href="#%E3%81%AA%E3%81%9C%E4%BD%BF%E3%81%86%E3%81%AE%E3%81%8B" aria-hidden="true"></a> なぜ使うのか</h1>
<h2 id="1.-%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%E3%81%A8%E3%81%97%E3%81%A6%E3%81%AE%E5%81%B4%E9%9D%A2%E3%82%92%E5%88%A9%E7%94%A8%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81">
<a class="header-anchor-link" href="#1.-%E3%83%89%E3%82%AD%E3%83%A5%E3%83%A1%E3%83%B3%E3%83%88%E3%81%A8%E3%81%97%E3%81%A6%E3%81%AE%E5%81%B4%E9%9D%A2%E3%82%92%E5%88%A9%E7%94%A8%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81" aria-hidden="true"></a> 1. ドキュメントとしての側面を利用するため</h2>
<p>→半自動的に関数の使い方がわかる<br>
コメントを今まで書いていた人→本当にそのコメントが合っているのか定かではない<br>
TypeScriptはエラーが出るため信頼できるドキュメントになる</p>
<h2 id="2.-linter%E3%81%A8%E3%81%97%E3%81%A6%E3%81%AE%E5%81%B4%E9%9D%A2%E3%82%92%E5%88%A9%E7%94%A8%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81">
<a class="header-anchor-link" href="#2.-linter%E3%81%A8%E3%81%97%E3%81%A6%E3%81%AE%E5%81%B4%E9%9D%A2%E3%82%92%E5%88%A9%E7%94%A8%E3%81%99%E3%82%8B%E3%81%9F%E3%82%81" aria-hidden="true"></a> 2. Linterとしての側面を利用するため</h2>
<p>→Linterとは、実行する前にそのコードが正しいかどうかを検証するツール<br>
膨大なコードの時、エラーに気づきにくい。いろんなボタンを押した時に出るため。<br>
TypeScriptはコンパイラーが自動的にコードを読んでエラーを見つけてくれる</p>
<h2 id="3.-es5%E3%81%B8%E3%81%AE%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%A9%E3%81%A8%E3%81%97%E3%81%A6%E3%81%AE%E5%81%B4%E9%9D%A2%EF%BC%88%E3%83%88%E3%83%A9%E3%83%B3%E3%82%B9%E3%83%91%E3%82%A4%E3%83%A9%EF%BC%89">
<a class="header-anchor-link" href="#3.-es5%E3%81%B8%E3%81%AE%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%A9%E3%81%A8%E3%81%97%E3%81%A6%E3%81%AE%E5%81%B4%E9%9D%A2%EF%BC%88%E3%83%88%E3%83%A9%E3%83%B3%E3%82%B9%E3%83%91%E3%82%A4%E3%83%A9%EF%BC%89" aria-hidden="true"></a> 3. ES5へのコンパイラとしての側面（トランスパイラ）</h2>
<p>→ES6でコードを書いてもブラウザが追いつかない<br>
ES5までは主要なブラウザが対応している<br>
最新の書き方で書いてもダウングレードできる</p>
<hr>


TypeScript概要

1. ドキュメントとしての側面を利用するため

2. Linterとしての側面を利用するため

3. ES5へのコンパイラとしての側面（トランスパイラ）

Discussion