TypeScriptの基本的機能一覧

TypeScriptとは

MicrosoftがJavaScriptを改良して作った言語。
型定義を厳格に行うことでエラーを発生しづらくするなど。
コンパイルを経てJavaScriptに変換される。

変数、定数の定義

変数定数の定義には、let、const、varがある。
let、varは変数を定義しconstは定数を定義する。
let、constはスコープが狭く、varは広い
typescript:


データ型

数値型

数値型

let data: number = 1025;

文字型

文字型

let data: string = 'TypeScript';

真偽値型

真偽値型

let data: boolean = true;

配列型

配列型

// 文字型のみの配列
let data1: string[] = ['TypeScript', 'JavaScript', 'Python'];

// 文字型と数値型の配列
let data2: (string|number)[] = ['TypeScript', 'JavaScript', 'Python', 1025];

タプル型

タプル型

let data: [string, number, boolean] = ['TypeScript', 1025, false];

オブジェクト型

オブジェクト型

let data1: { [key: string]: string } = {
    name: 'TypeScript'
    id: 'Script'
};

let data2: object = [{ id:12, name: 'Type'}];

共有型(Union型)

共有型(Union型)

let data: string | number | boolean;
data = 'test';
data = 1;
data = false;

enum型

enum型

enum ErrorCode{
  OK = 100;
  BAD_RESPONSE = 400;
  UNAUTHORIZED = 401;
};
// 値へのアクセス
console.log(ErrorCode.OK);  // = 100

any型

any型

let data: any = 'foo';
data = 1025;
data = false;

undefind型

undefind型

let data: undefind = undefind;

テンプレート文字列

テンプレート文字列は改行が保持や変数の表示ができる。

const Name = 'Kenji'
let data = `
  Hello,
  World and ${Name}.
  Thank You.
`;

スプレッド演算子

スプレッド演算子を用いることで配列の複製、連結などを容易に行える。
同様にオブジェクトに利用することも可能。

スプレッド演算子

let data = ['A', 'B', 'C'];

// 複製
let copya = [...data1];  // = ['A', 'B', 'C']
console.log(data1 === copya);  // false

// 連結
let pusha = ['X', ...data, 'Z'];  // = ['X', 'A', 'B', 'C', 'Z']

分割代入

分割代入

let data = ['Book', 'Japan', 'as', 'No.1'];
let [a, , b] = data;
console.log(a, b);  // Book as

// スプレッド演算子も使える。
let [c, ...rest] = data;
console.log(rest); // ['Japan', 'as', 'No.1']

// 初期値の代入
let [d = 'Spirited', e = 'Away'] = ['Sen'];
console.log(d,e);  // Sen Away

関数の定義

基本的にJavaScriptと同様

関数

function hello(name: string): void {  //voidは返り値（省略可能）
  console.log(`Hello, ${name}`);
}

// 省略可能な引数（この場合undefind）
function hello(name?: string) {
  console.log(`Hello, ${name}`);
}

// 初期値の設定
function hello(name: string = 'World') {
  console.log(`Hello, ${name}`);
}

アロー関数

let add = (x1: number, x2: number): number => {
  return x1 + x2;
};
console.log(add(1,3));  // 4

クラス

クラス

class Animal{

  constructor(public age: number) {
    // this.age = age  <=アクセス修飾子publicにより不要
  }

  cry() {
    if(age < 5) {
      alert(`age: ${this.age}`);
    }
  }
}

const jon = new Animal(3);
jon.cry();  // age: 3

クラスの継承

クラス

class Animal{

  constructor(public age: number) {
  }

  cry() {
    if(age < 5) {
      alert(`age: ${this.age}`);
    }
  }
}

class Dog extends Animal {
  constructor(public age: nimber) {
    super(age)
  }
  cry() {
    alert('Bow, wow!');
    super.cry()
  }
}
let gon = new Dog(1);
gon.cry()  // Bow, wow!

インターフェース

インターフェースを用いることでクラスやオブジェクトの形式を統一できる。

interface Animal {
  name: string;
  legs: number;
  isCry: boolean;
  cry();
}

class Dog implements Animal {
  name: string = 'MOCHI';
  legs: number = 4;
  isCry: boolean = true;
  cry() {
    console.log('Bow, wow!');
  }
}

ジェネリック

クラスの外側からデータ型を指定できる

class Store<T> {
  constructor(public data: T) {
  }
  gerStore(): T {
    return this.data
  }
}

const c = new Store<string>('Money')