【概要】
・マイクロソフト開発
・JavaScriptの拡張。大規模開発に対応できるように
・静的な型付け(jsは動的)なので一度型が決まると変えられない
・クラスベースのオブジェクト指向
・公式サイト： https://www.typescriptlang.org/
【基本】
main.tsファイルを作成
tsc main.ts //実行
node main.js //コンソール出力
■型推論が適用される
var i: number = 10; //型明示 var i = 10; //型推論でintと判断される var x; //any型
■配列
var results: number[]; results = [10, 5, 3];
■列挙
enum Signal {
Red = 0,
Blue = 1,
Yellow = 2
}
enum Signal { //数値は省略できる
Red, //0
Blue = 3,
Yellow //4 ※設定の後からの連番になる
}
var result: Signal;■関数
function 関数名(引数): 戻り値 {
return a + b;
}例）
function add(a: number, b: number): number {
return a + b;
}//戻り値が無い場合はvoid
//?を付けて引数の要求を任意にすることができる。(a: number, ?b: number)
ただし、任意の引数の後に必須の引数を定義することはできない
//引数に初期値を渡すこともできる(a: number = 10, ?b: number)
■無名関数
var add = function(a; number, b: number): number{
return a + b;
}アロー関数にすると
var add = (a; number, b: number): number => {
return a + b;
}さらに短く
var add = (a; number, b: number): number => a + b;
■関数のオーバーロード（関数名が同じで型が違う）
function add(a: number, b: number): number;
function add(a: string, b: string): string;
function add(a: any, b: any): any { //関数宣言はany型にする
if(typeof a === "string" && typeof b ==="string"){
return a + " " + b;
}
return a + b;
}
console.log(add(5, 3)); //8
console.log(add("hello", " world")); //hello world
//その他の組み合わせはコンパイルエラーになる■クラス
class User {
public name: string;
constructor(name: string){
this.name = name;
}
//変数宣言とコンストラクタ処理を同時に行う場合、
//以下のように宣言もコンストラクタ内の記述も不要
constructor(public name: string){
//private _nameのように、プライベートの場合は慣習的に_を付ける
}
sayHi(): void{ //メソッド。functionは書かない
console.log("hi! i am " + this._name);
}
//ゲッター（getter）とセッター（setter）
get name() {
return this._name;
}
set name(newValue: string) {
this._name = newValue;
}
}
var tom = new User("Tom");
console.log(tom.name);
tom.sayHi();■継承 ※例として上記のUserクラスを継承
class AdminUser extends User {
constructor(_name: string, private _age: number) {
super(_name);
}
public sayHi(): void { //親クラスと同じメソッド名を使うとオーバーライドする
console.log("my age: " + this._age);
super.sayHi(); //親クラスのメソッドを呼ぶ
}
}継承される可能性があるクラスは、親クラスのプロパティの修飾子はprotectedが良い
■静的メンバ・静的メソッド
class User {
constructor(private _name: string){
User.count++; //静的メンバにアクセスするにはクラス名(User)を付ける
}
static count: number = 0; //静的メンバ
static showDescription(): void { //静的メソッド
console.log("this class is about users");
}
}
console.log(User.count); //静的メンバ呼び出し
User.showDescription();【環境構築】
参考：https://qiita.com/ochiochi/items/efdaa0ae7d8c972c8103
・node.jsのインストール
コマンドプロンプトで確認
node -v npm -v
・typescriptコンパイラのインストール
npm install -g typescript //-g:グローバル環境にインストール
確認
tsc -v
