Qiita Teams that are logged in
You are not logged in to any team

Log in to Qiita Team
Community
OrganizationAdvent CalendarQiitadon (β)
Service
Qiita JobsQiita ZineQiita Blog
Help us understand the problem. What is going on with this article?

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の重要な機能としてインターフェイス定義はエポックメイキングに違いありません。
もちろんクラスを利用するための第一段階としての位置づけであることも忘れてはなりません。

以上、おそまつ

Why not register and get more from Qiita?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away