TypeScript 基礎

TypeScriptとは

TypeScript はマイクロソフトによって開発され、メンテナンスされているフリーでオープンソースのプログラミング言語です。

大きな特徴として

• JavaScriptに対して、型定義などの機能を追加したもの。
• JavaScriptの最新仕様である、ES2018の構文仕様が使え、JavaScript言語の完全なスーパーセットになっている。(JavaScriptの構文等がそのまま使うことができる。)
• TypeScriptを書く際は、TypeScriptファイル(.ts) を 作成する必要があり、そのファイルをJavaScript ファイル(.js)にコンパイルししている。

なぜ型を追加する必要があるのか？

型があることにより、コードを書いている時点でエラーに気づくことができます。コンパイルをするときに、型の制約のチェックを行うことにより、すぐにエラーを修正可能。型を追加することによって効率的に開発を進めることが可能となっているのがメリットとして挙げられます。

numberで定義しているものにstring型のものを入れてしまった場合

let num: number = 1;

let num: number = 'hoge'; // エラー: `string` を `number` に代入できません

こんな感じにエラーを出してくれます。

基本アノテーション

TypeScriptでは、変数、定数、関数、引数などの後ろに 「: 型名」を指定することで型を宣言することができます。

基本的な型定義

let num: number;
let str: string;
let bool: boolean;

num = 1;
num = '1'; // Error

str = 'its';
str = 1; // Error

bool = true;
bool = 'true'; // Error

配列の場合

let Array: string[];

Array = ['its', 'hoge'];

Array[0] = 123; // Error
Array = ['its', 123]; // Error

any型

any型はすべての型と互換性があります。
any型にはどんな方でも代入でき、その変数を何にでも代入できます。

let hoge: any;

hoge = 'name'
hoge = 123

let num: number;
hoge = num;

これは問題なく動作します。

null undefindの扱い

nullとundefinedは、any型と同じ扱いをします。

let num: number;
let str: string;

num = null;
str = undefined;

union型

union型は、プロパティを複数の型を定義して、そのどれかに当てはまると使用可能にできるものです。

type strOrNum = String | Number;

strOrNum = 'hoge';
strOrNum = 123;
strOrNum = true // Error

void

voidは関数に戻り値がない時に使います。

function log(message): void {
    console.log(message);
}

インターフェース

インターフェースは、複数の型のアノテーションを一つにまとめることができます。

interface User {
   name: string;
   full_name: string;
}

let name:User;
name = {
   name: 'hoge',
   full_name: 'hoge hoge';
};

name = {           // Error : `full_name` is missing
    name: 'hoge',
};
name = {           // Error : `second` is the wrong type
    name: 'hoge',
    full_name: 123;
};

参考

wiki
https://ja.wikipedia.org/wiki/TypeScript

TypeScript の概要
https://qiita.com/EBIHARA_kenji/items/4de2a1ee6e2a541246f6

TypeScript Deep Dive
https://typescript-jp.gitbook.io/deep-dive/