komeの備忘録

東大院卒外資ITエンジニアの技術ブログ

おすすめ記事: OpenposeをGPUのないUbuntu18にインストールして使えるようにしてみた

今更ながらTypeScriptを1から勉強した備忘録

Linux TypeScript Node.js Ubuntu

はじめに

TypeScriptを1から学んだときのメモ。
結構流行っている反面、日本語でまとめた記事が見つからなかったので、せっかくなので自分が入門時に勉強した内容をまとめた。

TypeScriptとは

TypeScriptは、Microsoftが開発したJavaScriptの上位互換言語である。TypeScriptで実装したものをコンパイルすることで、JavaScriptを出力してくれる。

型指定やオブジェクト指向、クラスやインタフェースなど、元々のJavaScriptにない機能を豊富に追加してくれたらしい。

www.typescriptlang.org

自分のプログラミング経験と実行環境

情報系の大学院出身ということもあり、新しい言語を学ぶのにはさほど嫌悪感はない。むしろ好んで学びに行きたいくらいである。
これまでには、C/C++やC#、Python、Rubyなどを触ってきているが、JavaScriptは読めるがほとんど実装したことはない。ということで、実はWebっぽい言語初挑戦かも知れない。

以下が今回の実行環境である。

OS: Ubuntu18.04 Desktop
npm version: 6.11.3

やったこと

基本的には下記の公式ドキュメントに従って進めた。

www.typescriptlang.org

TypeScriptのインストール

npm、node.jsはインストール済みであるとする。
まだの方は下記のブログを参照して、インストールしよう。

www.komee.org

https://www.komee.org/entry/2020/03/22/070000www.komee.org

インストールは下記のワンライナーで完了する。

$ npm install -g typescript
$ tsc -v
Version 3.8.3

TypeScriptの特徴と実装

JavaScriptへのコンパイル

下記のコードを実装し、greeter.tsとして保存する。TypeScriptで書かれた言語の拡張子は、.tsとなる。

function greeter(person){
    return "Hello, " + person;
}

let user = "Jane User";

document.body.textContent = greeter(user);

下記のコマンドでコンパイルする。

$ tsc greeter.ts

そうすると、greeter.jsというファイルが同じディレクトリに生成される。

型指定

TypeScriptの特徴である、型指定を実装してみる。上記のgreeter.tsのgreeter関数の引数personに型を指定する。

function greeter(person : string){
    return "Hello, " + person;
}

let user = "Jane User";

document.body.textContent = greeter(user);

上記のコードは問題ないが、例えばuser変数の中身を数値配列にしてみる。

function greeter(person : string){
    return "Hello, " + person;
}

let user = [0, 1, 2];

document.body.textContent = greeter(user);

すると次のようなエラーメッセージが表示される。

Argument of type 'number[]' is not assignable to parameter of type 'string'.

JavaScriptでは型指定がないためなかなか見ることのなかった、型違いエラーである。
これがTypeScriptの特徴である。

インタフェース

firstNameとlastNameを持つオブジェクトを記述するインタフェースを作る。
これに合わせてgreeter.tsを編集する。

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はJavaScriptの進化系であり、クラスベースのオブジェクト指向プログラミングをサポートしている。

さらにgreeter.tsを編集し、Studentクラスを実装する。

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

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

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

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

document.body.textContent = greeter(user)

こういったコードもコンパイル可能であり、適切なJavaScriptコードに変更してくれる。

テストコードの実行

まずgreeter.ts、greeter.jsと同じディレクトリ内にgreeter.htmlを次のように実装する。

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

そしてこのgreeter.htmlをブラウザで開くと、greeter.jsが実行される。

非常に簡単だが、下記のような実行結果となる。

f:id:komee:20200321191543p:plain
greeter

まとめ

型指定ができて、JavaScript互換性のあるTypeScriptはとても使いやすかった。
書いていて思ったが、JavaScriptというよりはインタフェースやクラスが存在して、C#ライクな言語だなぁと感じた。私自身C#をこよなく愛しており、またほとんどJavaScriptを使ってこなかった人生だったので、これまでの知識を統合しながらJavaScriptっぽい言語を学べるのはとてもやりやすかった。

あとやっぱりMicrosoftが開発した言語というだけあって、VSCodeのPluginが充実していた。補完やリコメンドもしてくれて、めっちゃいい。当初Vimで環境を構築しようとしたが、ESlintをうまく実装できず挫折したが、VSCodeはワンクリックで実装できてしまった。これは私の技能レベルの問題でもあるが、VSCodeが素晴らしすぎるのかも知れない。

ちなみにこの5分で終わる入門をやり終わったあとに、次のようなサイトを見つけた。
typescript-jp.gitbook.io

こちらもTypeScriptについて非常に明快に書かれている。これを全部理解することで、よりTypeSxcriptに慣れ親しむことができるだろう。このあとやってみる。

参考サイト

TypeScript - JavaScript that scales.

Introduction - TypeScript Deep Dive 日本語版

(C) komee.org