Angularを使いこなすための第一歩「TypeScript」の基本を勉強する【あっさり系まとめ】

##まずAngularについて軽めに・・・
AngularはGoogleとコミュニティによって開発が進められているjavascriptのフレームワークです。
ややこしいですが「AngularJS」と呼ばれていたフレームワークの後継になります。

###Angularの特徴としては、

- [コンポーネント指向](https://qiita.com/nabepon/items/723dc53ad584b3457ea7)
- TypeScriptベースで実装されている
- さまざまな技術が使われている（SystemJS、RxJS、Zone.js）
- [フルスタックフレームワーク](http://d.hatena.ne.jp/keyword/%A5%D5%A5%EB%A5%B9%A5%BF%A5%C3%A5%AF%A5%D5%A5%EC%A1%BC%A5%E0%A5%EF%A1%BC%A5%AF)
- [セマンティックバージョニング](https://qiita.com/soyanchu/items/72095a7c9fdb7f71b2c3)

などがあげられます。

###Angularを学ぶときに注意すること
当然ですがAngularには他のフレームワーク同様にバージョンがあります。
ややこしいのはバージョンによって呼び方が違うので調べものをするときには注意が必要となります。
バージョンと名称は以下の表の通りです。

|version|名称|
|:--:|:--:|
|v1|AngularJS|
|v2|Angular2|
|v4|Angular|

###Angularを始めるには・・・
Node.jsを使ってAngularをインストールするので、Node.jsがお使いのパソコンに入っていない場合はNode.jsをインストールしてください。

Angularをインストールするために必要なもの

- Node.js 4以上が必要
- Nodeのパッケージ管理システムnpm

[Node.js](https://nodejs.org/en/)
[Angular公式サイト](https://angular.io/)

##【本題】TypeScriptって？
TypeScriptを勉強するのには[公式サイト](https://www.typescriptlang.org/)でコードを書くのが良いでしょう。
サイトTOPに行くと「Playground」というタブがあります。
そこで、TypeScriptを記述することができ、コンパイルと動作まで確認することができます。
TypeScriptを学ぶ上では非常に良い環境だと思いますので試してみてください。

###「javascript」との違いは

- 変数の型がある
- [コンパイル](http://e-words.jp/w/%E3%82%B3%E3%83%B3%E3%83%91%E3%82%A4%E3%83%AB.html)が必要

TypeScriptにはデータ型が7つ存在します。

- string型
- number型
- boolean型
- 配列型
- オブジェクト型
- タプル型
- enum型

ただTypeScriptは型を指定しないで変数に値を設定した場合勝手に型を推測してくれます。
`any`を型として指定すると何でも代入できる型の変数として扱うことができます。
any型の変数が増えすぎるとデバックの際にもわかりにくくなるので使用は必要最低限にしておくのが無難です。

```typescript
var hoge: any = 'Angular';
```
また「｜」で区切ることで複数型を指定することができます。

```typescript
var hoge: string | number;
```

##変数の話
TypeScriptには3つの変数宣言があります。

|宣言方法|変数の特徴|
|:--|:--|
| let |宣言前に参照するとエラーになります（ブロックスコープ）|
| const |再代入不可能な宣言方法|

再代入しない変数に関しては基本的にはconstで宣言した方が良いかも知れません。

```typescript:変数宣言
let box;
let box2;
const PI = Math.PI; //3.14.....
```
ちなみに変数を文字列中に埋め込みたい場合は変数を`${}`で囲むことで実現できます。

```typescript
let hoge = 'Hello';
console.log(`この後に変数に代入した文字が表示されます${hoge}`);
```


##関数について
TypeScriptで関数を記述する際は省略して記述することが可能です。
`hoge(name?: string)`のnameの後ろに「？」を記述することで引数を省略できることを示すことができます。

```typescript:関数
function hoge(name?: string): string {
  return 'Hello, ' + name + '!';
}

document.write(hoge());

```
実行すると「Hello, undefined!」と出力されます。
これは、初期値が設定されていないからです。
初期値は下記のように記述すれば設定することができます。

`hoge(name?: string = 'Taro')`
とすると引数ががない場合は初期値として「Taro」と表示することができます。

引数にどんなものが入るかわからない複数の値が入るかもしれない場合には可変引数を使います。
`hoge(...values: number[]) number { ......`
引数の頭にドットを3つ並べると仮引数を配列として扱うことができ、複数の引数を処理できます。

###アロー関数
使用することで関数を省略して記述できるケースがあります。
また、関数を一文で書ける時はさらに簡略して書ける場合があるので一例を紹介します。

```typescript:アロー関数
let add = (x1: number, x2: number): number => {
  return x1 + x2;
}
````
上記の関数は中括弧を簡略して書くことができます。
```typescript
let add = (x1: number, x2: number): number =>  return x1 + x2;
```
また一文で書いた時は自動的にreturnするように判断されるのでreturnも省略可能です。
```typescript:
let add = (x1: number, x2: number): number => x1 + x2;
```
引数が一つの時はさらに省略することができます。

```typescript:
let add = x1 =>  x1 + x2;
let add = () =>  'Hello'; //引数がない場合の書き方
```

ただし、「引数に型を指定する場合」や「引数がない場合」には「（）」を省略して書くことができないので注意してください。

##classについて
アクセス修飾修飾子によってアクセスを制限することができます。
アクセス修飾子は以下の３つがあります。

|アクセス修飾子|特徴|
|:--|:--|
| public　　　　　　|外部のどこからでもアクセスできる（デフォルトはpublic|
| protected|自分のクラスとその派生クラスからアクセスできる|
| private |そのクラスからのみアクセスできる|

```typescript:class
class Animal {
  age: number = 10;

  constructor(private isBark: boolean, private legs: number) { }

  bark(): void { 
    if (this.isBark) { 
      alert('legs:' + this.legs);
    }
  }
}

//インスタンス化
let dog = new Animal(true, 4);
```

###getterとsetter
privateなプロパティに対して値を取得したり、値を設定する機能があります。
それが「getter」と「setter」と呼ばれているものです。

```typescript:getter,setter
class Animal {

  private _age: number = 10;

  get age(): number { 
    return this._age;
  }

  set age(value: number) { 
    if (value < 0) { 
      throw new Error('年齢は年齢は0以上でなければなりません');
    }
    
    this._age = value;
  }
}

let dog = new Animal();
console.log(dog.age);   //値の取得 dog.age = 10;
dog.age = 11;           //値のセット
```
ageというメソッド名に対して頭に「get」「set」をつけることで、外部からclassにアクセスして値を取得、代入することができるようになります。

###classの継承
`extends Animal`と記述することでAnimal classを継承することができ、「extends Animal」の中に記述された内容だけが差分として上書することができます。

```typescript:classの継承
class Animal {
  age: number = 10;

  constructor(private bark: boolean, private legs: number) { }

  bark(): void { 
    if (this.isBark) { 
      alert('legs:' + this.legs);
    }
  }
}

class Dog extends Animal {
  bark(): void { 
    if (this.isBark) {
      alert('bow, wow!');
    }
  }
}
```
親classのcryメソッドを実行したい場合には`super`で実行することができます。

```typescript:super
if (this.isBark) {
  super.cry();
  alert('bow, wow!');
}
```
また、継承したclass内でconstructorを上書きをしたい場合は`super();`を実行し、初期化してください。
実行しないと他のメソッドに影響が出てしまうので注意しましょう。

##便利なジェネリック
型の違うclassを複数用意しないといけない時その分だけclassを作ると管理が大変になってしまいます。
そこで使うのがジェネリック機能です。

```typescript:ジェネリック機能

class hogeString { 
  data: string;
}

class hogeNumber { 
  data: number;
}

//ジェネリックを使用
class hogehoge<T> { 
  data: T;
  getHoge(): T { 
    return this.data;
  }
}

new hogehoge<string>; //dataがstring型のhogehogeを生成
new hogehoge<number>; //dataがnumber型のhogehogeを生成
```

上記のようにclass名の後に「不等号＋任意の文字列」を記述することでdataの型がことなるclassを生成することができます。

```typescript
//関数
function hoge<T>(keyword: T){
  console.log(`Log: ${keyword}`);
}

hoge<string>('Hello');
hoge<number>(10000);

//複数指定
class hoge<T, U> {
  name: T;
  age: U;
}

let hogehoge = new hoge<string, number>();
```
と記述することで関数にもジェネリック機能を使用することができます。
さらに、「,（句読点）」で区切ることで型を複数指定することができます。

##インターフェイスで共通化
classの共通化を行うのに便利な機能です。

```typescript
interface Animal {
  name: string;
  legs: number;
  isBark: boolean;
  bark(): void;
}

class Dog implements Animal {
  name: string = 'maru';
  legs: number = 4;
  isBark:boolean = true;
  bark(): void {
    if (this.isBark) {
      console.log('bow!, wow!');
    }
  }
}
```
Dogというclassを作成する時に`implements Animal`とすることで`interface`を適用させることができます。
こうすることでDogというclassにnameプロパティが定義されていない時にエラーが発生します。
classの共通化ができるので、設計する際には重要な機能となってきます。

##まとめ
いかかでしたでしょうか？
私自身「TypeScript」を学習するのは初めてのことでしたが、javascriptを触ったことがある人であればそれほどハードルを感じことはないような印象を受けました。
もちろん今回は基本的な部分のお話ではありますが、これをきっかけに「TypeScript」または「Angular」に学んでいいただければ幸いです。