<section id="type">
  <h1>TypeScript事始め</h1>
  <p>CodePen Settingの旅、JS編第3回。TypeScriptは静的型付け、クラス定義、ES対応などの特徴があるそうな。<br>
CoffeeScriptと違ってJSの延長上の記法なので読み書きしやすそう。</p>
  <section id="hello">
    <h2>特徴</h2>
    <ul>
      <li>変数に「:」で静的型付けができる。</li>
      <li>関数内の引数も「:」で静的型付け</li>
      <li>アロー関数式「=>」が使える</li>
      <li>クラス定義ができる</li>
    </ul>
    <p>素のJSでもそのまま行けるようなのでJSからの書き換えもしやすそう。</p>
  </section>
  <div><button id="btn">ここ押せワンワン</button>
</section>
#btn {
  display: inline-block;
padding: 1em;
background: #666;
border-radius: 5px;
  color: #fff;
}

#btn:hover {
  opacity: 0.7;
  cursor : pointer;
}
/*関数
function hellow(){
window.alert('hellow TypeScript');
window.alert('こんにちは、型スクリプト');
window.alert('おしまい');
}*/

/*アロー関数*/
var hellow = () => {
window.alert('hellow TypeScript');
window.alert('こんにちは、型スクリプト');
window.alert(title + 'は第' + num + '回です。');
window.alert('おしまい');
}



/*変数
var btn = document.getElementById('btn');*/

/*変数(型付け)*/
var btn:object;
btn = document.getElementById('btn');

var title:string;
title = 'JS編';

var num:number;
num = 3;

/*イベント*/
btn.addEventListener('click', hellow, false);
View Compiled

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.