［超入門］TypeScriptの使い方が5分でわかる

目的

本記事ではtypescriptを始めよう、始めたらいいけど、全体像がつかめなくて始めることができない方向けにtypescriptがどんな特徴を持っているのかをお伝えします。

簡単にわかるという必要性のために、厳密性は欠いた表現にしています。ご了承ください。

学ぶ意味

何事も新しいことを学ぶ時は大変なものですなんなぜ今回タイプスクリプトを学ぶ必要あるのかをお伝えします

変数や引数に型を使える

まず一つ目が変数や引数に型を使えるということがタイプ作り太るメリットになります。特に複数人が1つのシステムを作る場合どの変数1対してどんな値を入れたら入るのかというのは一目でわかりませんそのためカッターによってどのような体を入れているのかというのを一目でわかるようにする形システムは必要不可欠だと言えるでしょう

好きな書き方でかける

使用環境によってJavaScriptは書き方が変えていく必要があることが多いのですが、タイプスクリプトであれば、トランスファイルを前提にしているため、自分の好き方で好きな言い方で言うことができますトランスファイルというのはあるプログラミング言語で書かれたプログラムのソースコードを入力として受け取り、別のプログラミング言語の同等の行動を目的として生成するある種のコンパイラーと言えます、そのため自分の好きな書き方で書いても結局は皆と同様のアウトプットを出すことができます。

Javascriptの上位互換

上記のを見てみると、体育タイプスクリプトはJavaScriptの上位互換と言えることができるでしょう、フロントエンドを選択するのであればjavascriptを描く以外の選択肢は基本的にありません、そのためエラーのない安全な行動を書くのを書きたいのであれば、第1候補として体育スクリプトが来るのが間違いないでしょう。

早く書くことができます。

使用方法

下記のコマンドでインストール可能です。

yarn -g add typescript

環境を作るのが面倒なのでまずは試してみたいという方は下記のURLからカラープレイグラウンドで実際にタイプスクリプトを試すことができます、まずは書き手試してみるのが良いでしょう

http://www.typescriptlang.org/play/

コンパイル方法

下記のコマンドにてコンパイルが可能です。

ここでのコンパイルとは、
TypeScriptをブラウザで見れる形に変換してくれる処理と考えてください。

コンパイル時のオプション変更

コンパイル時に処理を施したい場合や、
変換後のJavascriptのバージョンを変更できたりするファイルです。

{
  "compilerOptions": {
    "module": ""es2015",// TSのモジュールはES Modulesとして出力
    "target": "es5",// TSの変換後のJSの形式
  }
}

型の設定の仕方

TypeScriptでの型の処理の仕方は、

変数に設定する場合は、変数宣言をした後に “:” を書いて、型を明示してください。

const test:number = 1

また、TypeScriptは型を明示しない場合でも、型を考えて入力してくレルという便利な機能が備わっています。そのため、下記のようなコードの場合は、型を明示していなくてもエラーとなります。型を明示しない＝なんでも入れられるというわけではありません。
なんでも型を許容したい場合は,any型という型があります！

const number = 1 ; //数値が入っている
number = "文字列"  →型が違うため、エラーとなる

使用するそれぞれの型

ここからはTypeScriptで使用する基本的な型をどのように使っていくのかというのを説明していきます

プリミティブ型

boolean

let isDone: boolean = false;

日本語で言えば、はい、いいえや真偽のどちらであるか話題として扱うことができるのが、ブーリアン形になります

number

let three: number = 3;

数値を扱うためのデータ方がナンバー形になりますナンバー変数には整数値も浮動小数点値も格納することができます。
16 進数、10 進数に加えて、8 進数、2 進数も処理することができます。

string

let color: string = "red";
color = 'blue';

文字列を扱うためのデータ方がString形になります

配列での型の処理

let list1: number[] = [1, 2, 3];
let list2: Array<number> = [1, 2, 3];

配列での型処理は、
一つの配列にどの型を入れるのかを示してください。

上述している例で出ている配列の場合は、
number型として処理されるため、number以外の型を入れることはできません。

タプルでの型の処理(色々ごちゃまぜで使いたい場合)

配列の場合は、一つの配列に型を固定されてしまいますが、
タプルを使えば、[“文字列”, 数値, boolean] といった
型ごちゃまぜでも使用が可能です。

// 宣言
let x: [string, number];
// 初期化
x = ["hello", 10]; // OK
// 初期化 (間違い)
x = [10, "hello"]; // 最初に宣言した型と異なるためエラー

関数を型にする

関数を型にするとは、関数での返り値を型にするということです。
上述した型を返り値として、宣言することが可能です。
特定の型が返らない場合は下記のようなvoid型を使用します。

function alertUser(): void {
    console.log("This is alert");
}

関数の引数に型を入れる型アノテーションもあります。

function greeter(person: string) {
    return "Hello, " + person;
}
 
let user = "Suzuki Taro";

自分で型をつくるクラス

ここまで見てきた型は、
プリミティブ型と呼ばれるどのプログラミング言語にもある一般的な型ですが、
ここで紹介するクラスでは、自分自身で型を定義することができます。

型の定義というと少々大げさですが、
多言語を学んでいる人であれば、
クラスからオブジェクトをインスタンス化するいうコードを書いているかと思います。
その際にオブジェクトを一つの塊としてみて型とみているのは無意識におこなっているのではないかなーと思います。
特に私のようなphpといった型なし言語から来た人だと上記の考えが理解できるかなと思います。

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}
let greeter = new Greeter("world");

インターフェースも使える

主にクラスや、関数に対して使える骨格構造であるインターフェースも備えてる。下記のように使います。

関数の場合

interface LabelledValue {
    label: string;
}
function printLabel(labelledObj: LabelledValue) {
    console.log(labelledObj.label);
}
let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj);

LabelledValueをlabelledObjの引数の型として使用しています。

クラスの場合

interface ClockInterface {
    currentTime: Date;
}
class Clock implements ClockInterface {
    currentTime: Date;
    constructor(h: number, m: number) { }
}

implementsでClockInterface から作成しています。

ジェネリクス

ジェネリクスとは、、
関数やクラス、インターフェースの型の定義を、作成時には定義しないで、使用時に定義することができます。

function identity<T>(arg: T): T {
    return arg;
}

例えば、上記のような関数があったとすると、
<T>としている部分がジェネリクスとなります。
ジェネリクスはany型と異なり、
<T>として使用時に型が決められた場合は、他の型を許容しません。
すなわち、下記のようなコードの場合は、
最初のnumberOutputは、string型を引数として受け取って、
返り値もstring型となります。
二つ目は、同様一貫してnumber型となっています。

let numberOutput = identity<string>("myString");
let stringOutput = identity<number>("myNumber");

まとめ

フロントエンドの選択肢は、Javascriptしかない以上、
書きやすさやエラーがでなくなるということを考えると需要はなくならないでしょう。Javascriptをある程度使えるようになったら学んで見てください。

本ブログは, Typescript Handbookを参考にしています。全英語ですが、興味のある方は見てみてくださいね。

目的