スタートページ＞ Javascript＞ javascript-addon

TypeScriptの概要

TypeScriptの概要
  TypeScriptとは
  環境設定
  PlayGroundの利用
型指定の基本（１）
  TypeAnnotation　型指定構文
  型の種類
  複数の型の指定
型指定の基本（２）
  配列の同一型指定
  tuple 複数の要素の型指定
  interface 連想配列の要素と型定義
  Inline Type 同上　簡潔
  function 関数の引数と戻り値の型指定
型指定の基本（３）Class
  Class の構成property,constructor, method
  継承（inheritance）
  アクセス修飾子（modifier）public, private,readonly 
型指定の基本（４）generics
  genericsの概念
  ClassでのGenerics

TypeScriptとは

TypeScriptは、次の拡張機能をもつ、JavaScriptのプレコンパイラです。

静的型付け

JavaScriptでの変数は「動的型付け」です。例えば、
　　var x = 10; として、数値型で宣言した x を、後のステップで、
　　x = "abc"; のように文字列を代入すると、この時点で x の型は文字列型になります。
　　x = [10, 20]; のように配列として用いることもできます。
これにより、JavaScriptは、変数の型に関する知識の少ない人でもプログラムが作れるし、簡潔で柔軟なコーディングができる利点があります。

しかし、JavaScriptが、大規模なシステム、誤りのないシステム、多人数が共同で開発するシステムにまで利用されるようになると、変数を厳格に定義して、同一変数名を異なる意味で使うことを制限することが重要になってきます。

TypeScriptでは、そのような変数について、あらかじめ「静的型付け」で型を宣言しておき、JavaScriptのコード中に、それに反する記述があったときにエラーを指摘します。
単一の変数だけでなく、例えば「学生」というクラスでは「学部」は文字列。入学年度は数値というように、複雑な型宣言をすることもできます。

TypeScriptは、JavaScriptのプレコンパイラですので、JavaScriptの機能をすべて利用できます。
　実働するのは、生成されたJavaScriptですので、極端にいえば、TypeScriptは使い捨てにすることもできます（プログラム仕様書として重要ですが）。

規格の先取り

JavaScriptの標準規格はECMAScriptで、多くのブラウザでのJavaScriptはECMAScriptに準拠しています。ECMAScriptは常に改訂されていますが、標準規格化するには多様な検討が必要であり、年月がかかってしまいます。
TypeScriptでは、独自の追加機能を既存のECMAScriptに展開する機能を持っていますので、標準規格化するまでに、独自機能を利用することができます。
TypeScriptは、生成するECMAScriptのバージョンを指定することができます。それにより、利用者のブラウザが以前のバージョンであっても稼働するようにプレコンパイルできるのです。

環境設定

TypeScriptを利用するための環境を準備するには、次の３つがあります。
なお、TypeScriptと Reactと共通したアドオンアプリがあるため、双方の環境設定を同時に行うのが通常です。

インストール

本格的に利用するならば、必要なアプリを利用者のＰＣにインストールするのが適切です。
これに関しては、
　　　 【入門】create-react-appでReactとTypeScript環境を構築
などを参照してください。

CDNサービス

公開ライブラリを搭載したサーバのＵＲＬをリンクすることにより、自分のＰＣにインストールすることなしに、利用できるようにするサービスです。
TypeScript+React では、script部に次の記述をします。

  <div id="root"></div>
  <script src="https://unpkg.com/react@18/umd/react.development.js"></script>
  <script src="https://unpkg.com/react-dom@18/umd/react-dom.development.js"></script>
  <script src="https://unpkg.com/babel-standalone@6/babel.min.js"></script>
  <script type="text/babel">

PlayGroundの利用

この場合のPlayGroundとは、何らの準備なしにプログラムを作成・実行できる環境です。
TypeScriptのPlayGroundには、
　https://www.typescriptlang.org/play
があります。