JavaScript
Node.js
TypeScript
VSCode

TypeScript Sampleをやってみるその4

More than 1 year has passed since last update.


はじめに

TypeScriptの強力な機能としてインターフェイスを定義することができます。インターフェイスはInterfaceキーワードを用いて定義します。クラスのインターフェイス実装はimplementsキーワードを用いて定義します。インターフェイスサンプルを試した備忘録を投稿します。提供されているサンプルでは出力するコード部がないので、htmlと出力のコーディングをおこないます。


前提


サンプル interfaces

ブラウザへインターフェイスをインプリメントしたクラスの結果を出力するサンプル。


ファイル構成

パス
ファイル名
説明

.
index.html
ブラウザ出力用のhtml (新規追加)

.
interfaces.js
interfaces.tsのコンパイルにて作成されたJavaScriptファイル

.
interfaces.js.map
interfaces.tsのコンパイルにて作成されたmapファイル

.
interfaces.ts
インターフェイスサンプルのTypeScriptファイル

.
README.md
このサンプルの説明と使用方法

.
tsconfig.json
TypeScriptのコンパイルコンフィグファイル


クラス・インターフェイス・オブジェクト図

TS_013.jpg


追加


interfaces.ts

var myCar = new Car();

myCar.start();
myCar.drive(1000);
document.getElementById("box").innerHTML = "My Car Distance Posion : " + String(myCar.getPosition()) + " Km";

最終行に上記を追加


index.html

<!DOCTYPE html>

<html>
<style>
body {font-family: 'Segoe UI', sans-serif }
body {font-size: 24px; }
</style>
<body>
<div id="box"></div>
<script src="interfaces.js"></script>
</body>
</html>


実行

cd ./interfaces

tsc --sourcemap interfaces.ts

index.htmlをエディターで表示Ctrl+F1


結果

TS_014.jpg


ポイント

interfaceにてメソッドまたはプロパティの型を指定して定義します。この型を定義することにより、classで実装するinterfaceの実体(処理するコード)となるメソッドの戻り値との整合性が担保されます。ある意味、C言語系と比較するならば、ヘッダーがinterfaceであり、Cコードがclassと対応するかのようです。ただ、C言語系は、Cコードにincludeでヘッダーを指定することで外部ファイル化できますが、TypeScriptは同一ファイル内でinterfaceを定義する必要があります。そしてインターフェイスのメンバーはすべてパブリックになります。


ノート

interfaceの基本構造をメモしておきます。

InterfaceでClassのメンバーの型をあらかじめ定義します。

TS_018.jpg


まとめ

開発プロジェクトで変数の型をきっちりと定義することは重要です。

MicrosoftがやりたかったことはJavaScriptの型の曖昧さからの脱却にほかならないような気がします。

TypeScriptの重要な機能としてインターフェイス定義はエポックメイキングに違いありません。

もちろんクラスを利用するための第一段階としての位置づけであることも忘れてはなりません。

以上、おそまつ