仕事ですぐに使えるTypeScriptを読んでいく番外編

TypeScript

これは

TypeScriptの学習にとても役立ちそうなドキュメントを教えてもらったので
コツコツと読んでいく記事です。

参考

著作権者：フューチャー株式会社（Future Corporation）様

future-architect.github.io

番外編

7章まで読み進めてきましたが、今日は公式のチュートリアルをやってみようと思います。

公式のチュートリアル

www.typescriptlang.org

5分でTypeScript

TypeScriptの入手については２種類
　・npm経由 　・VisualStudio経由 npmはコマンドを使ってinstallする方法ですね。
VisualStudioはインストールの時にプラグインを選択していればインストールされる
または後からインストールが可能。MSが開発しているだけあってVisualStudioとの親和性はたかそうですね。
とはいえTypeScriptを使う場面がVisualStudioを使える場所とは限らないので、OS依存度の低いVisualStudioCodeでやっていくのが良さそう

チュートリアルではまずgreeter.tsを作るようになっていてtscコマンドを使ってコンパイルしています。

// 最初に作るgreeter.ts
// これをベースに発展させていくのが本チュートリアル
function greeter(person) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.textContent = greeter(user);

tscコマンドは該当するtsファイルがある場所で

tsc greeter.ts

VisualStudioCodeだと下にターミナルウィンドウがあるので楽に実行できます。
コンパイル後はjsがファイルが作成され、実行はjsを指定して上げる形になります。

TypeScriptは柔軟で動的なJavaScriptの拡張版になるので、
型定義について曖昧であっても、意図しない動作をすることはあれど、
基本的にjsファイルへコンパイルされるようです。

インターフェース
TypeScriptに構造的に互換性があればインターフェースは明示的なimplementsなしに実装可能

interface Person {
    firstName: string;
    lastName: string;
}

function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = { firstName: "Jane", lastName: "User" };

document.body.textContent = greeter(user);

クラス
オブジェクト指向になれた人だと使いにくかったクラスは
TypeScriptで親しみやすくなったという点をいろんなサイトを見ているとよく見かける。
このチュートリアルでも似た話が出てきていて、便利だよねとなっていた。

class Student {
    fullName: string;
    constructor(public firstName: string, public middleInitial: string, public lastName: string) {
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}

interface Person {
    firstName: string;
    middleInitial: string; // せっかくあるんだし使おう
    lastName: string;
}

function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.middleInitial + person.lastName;
}

let user = new Student( "Jane", "M.", "User" );

document.body.textContent = greeter(user);

実行
いろんな方法があるようだけれどここではHTMLを使ってブラウザで表示させている。
一つ作っておけばワークスペースで使い回しできるし、ブラウザ表示の方が好き。
VisualStudioCodeだとChromeのデバッガーがあるのでそちらを使うのもいいかも。

<!DOCTYPE html>
<html>
    <head><title>TypeScript Greeter</title></head>
    <body>
        <script src="greeter.js"></script>
    </body>
</html>

表示させるとこんな感じ f:id:torikizi:20190710231017p:plain

混乱しそうなので避けてましたが、
他のドキュメントを参考にして理解を深めるの必要かもしれません。
(当然と言われるとその通りなのですが...)

今日はここまで。