Help us understand the problem. What is going on with this article?

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

まずAngularについて軽めに・・・

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

Angularの特徴としては、

などがあげられます。

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
Angular公式サイト

【本題】TypeScriptって?

TypeScriptを勉強するのには公式サイトでコードを書くのが良いでしょう。
サイトTOPに行くと「Playground」というタブがあります。
そこで、TypeScriptを記述することができ、コンパイルと動作まで確認することができます。
TypeScriptを学ぶ上では非常に良い環境だと思いますので試してみてください。

「javascript」との違いは

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

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

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

var hoge: any = 'Angular';

また「|」で区切ることで複数型を指定することができます。

var hoge: string | number;

変数の話

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

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

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

変数宣言
let box;
let box2;
const PI = Math.PI; //3.14.....

ちなみに変数を文字列中に埋め込みたい場合は変数を${}で囲むことで実現できます。

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

関数について

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

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

document.write(hoge());

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

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

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

アロー関数

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

アロー関数
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;

引数が一つの時はさらに省略することができます。

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

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

classについて

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

アクセス修飾子 特徴
public       外部のどこからでもアクセスできる(デフォルトはpublic
protected 自分のクラスとその派生クラスからアクセスできる
private そのクラスからのみアクセスできる
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」と呼ばれているものです。

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」の中に記述された内容だけが差分として上書することができます。

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で実行することができます。

super
if (this.isBark) {
  super.cry();
  alert('bow, wow!');
}

また、継承したclass内でconstructorを上書きをしたい場合はsuper();を実行し、初期化してください。
実行しないと他のメソッドに影響が出てしまうので注意しましょう。

便利なジェネリック

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

ジェネリック機能
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を生成することができます。

//関数
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の共通化を行うのに便利な機能です。

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」に学んでいいただければ幸いです。

Why do not you register as a user and use Qiita more conveniently?
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away
Comments
Sign up for free and join this conversation.
If you already have a Qiita account
Why do not you register as a user and use Qiita more conveniently?
You need to log in to use this function. Qiita can be used more conveniently after logging in.
You seem to be reading articles frequently this month. Qiita can be used more conveniently after logging in.
  1. We will deliver articles that match you
    By following users and tags, you can catch up information on technical fields that you are interested in as a whole
  2. you can read useful information later efficiently
    By "stocking" the articles you like, you can search right away