Typescript基礎まとめ

はじめに

これは、現在の案件でTypescriptを使用しているため、今まで学習してきたことを簡単にまとめた記事になります。

typescriptで指定できる型

• number: 数値型
• string: 文字列型
• boolean: 真偽型
• symbol: シンボル型
• any: 任意の型
• オブジェクト型

number/string/boolean/symbol型は、標準で利用できるという意味で、Primitive Type(プリミティブ型or基本型)と呼ばれる。

型推論により、Typescriptは変数宣言で型指定が省略されている場合でも、型チェックを行う。

ただし、型・初期値ともに省略すると、変数はすべてany型になる。どんな型も受け入れてしまうので、原則letを使うときは初期値は省略しない方がいい。

let data;
data = 10.5;
// toFiexdは引数に与えた
console.log(data.toFixed(0));
=> 11

data = 'hoge';
// charAtは引数に与えた数の位置にある文字列を返す。１
console.log(data.charAt(0));
=> h

charAt

toFixed

型アサーション

互換性のある型である場合、<型名>という記述を変数やリテラル前付与することで、型を明示的に変換してくれる。

function show(result: string) {
    return`結果は結果は${result}です`;
}

console.log(show(100));
// 渡しているのはnumber型だが、string型に変換している
console.log(show(<any>100));
// asでも同様。
console.log(show('100' as any));

配列の定義方法

配列の目印としてを使って、次のように定義する。

例

let hoge: string[] = ['fuga', 'mogo'];

[構文]

let name: type[] = initial

name: 定義する配列名
type: 配列のデータ型
initial: 配列の初期値

typeについては、エイリアスとして次のように定義することもできる。

let name: Array<type>

これはジェネリック記法と呼ばれるもので、Rubyでいうとこの%記法的な立ち位置。

ただ、基本的にはtype[]のほうがわかりやすい。

なお、空配列を定義する際は、次のように行うほうが new Array するよりもわかりやすくて、シンプル。

let data: number[] = [];

連想配列

いわゆるハッシュ。

[構文]

let name: { [index: i_type]: v_type] } = initial

name: ハッシュ名
i_type: インデックスのデータ型
v_type: 値のデータ型
initial: オブジェクトリテラルの初期値
index: インデックスを表す予約語(これは固定)

ハッシュへのアクセス方法は2種類ある。

1. プロパティ構文
   .(ドット)でアクセスする方法
   console.log(data.hoge)

2. ブラケット構文
   ブラケットでアクセスする方法
   console.log(data['hoge'])

ちなみに、何度も同じハッシュを使うのであれば、名前付きの型(interfaceを使用)を定義することもできる。

interface StringMap {
  [index: string]: string;
}

let object: StringMap = {
  'hoge': 'ほげ',
 'fuga': 'ふが',
 'bar': 'ばあ';
}