TypeScript

Type Script 基礎

変数

var title: string = 'angular';
// title = 5; error

title = 'Angular5';
// 数字
var num: number = 9;
//真偽値
var isOpen: boolean = true;
//配列
var array: string[] = ['name', 'email', 'body'];
//配列 数字
var numbers: number[] = [1, 3, 5];
//オブジェクト keyは任意
var options: { [key: string]: string } = { name: 'wataru' };
//タプル型
var data: [number, string, number] = [0, 'apple', 1000];
//全ての型
var someting: any = 'foo';
someting = 100;
someting = true;

//自動で型を指定
var unknown = 'string';
// unknown = 10;

//複数の型を指定指定 
var sample: string | number;
sample = 'wataru';
sample = 100;
// sample = true; error

//TypeScript なるべくなるべくletを使用する
//関数内で巻き上げがある
var box;

//関数内で巻き上げがない
let box2;
let n: number = 1;
n = 2;

//定数 値の再代入不可
const count: number = 221;
// count = 11; error

function log(message: string) {
    return message;
}

//<型を指定している>
alert(log(<any>100));

//テンプレート文字列文字列 ``を使用する事で改行コードも入る文字列が変数に格納される
let template1 = `This is Template string`;
let template2 = `
Hello, TypeScript tutorial.
This is Template string.
Thank you.
`
alert(log(template2));

//$でテンプレート文字列を挿入可能となる
let template3 = `
Hello Hello.
${template1}
Thank you
`

alert(log(template3));

関数

//TypeScript 関数(引数):返り値
function greet(name: string): string{
    return 'Hello' + '<br>' + name + '!!';
}

document.writeln(greet('wataru'));


//仮引数 ?を付ける事で引数が無くても実行される
function temp_greet(name?: string): string{
    return 'hoge' + '<br>' + name + '!!<br>';
}
document.writeln(temp_greet());


//仮引数 デフォルトの値を入れる
function temp2_greet(name: string = 'piyo'): string{
    return 'hoge' + '<br>' + name + '!!';
}
document.writeln(temp2_greet());


//可変長引数引数 仮引数の内容を配列で扱う事が可能となる
function sum(...values: number[]): number {
    let total: number = 0;
    for (let i: number = 0; i < values.length; i++) {
        return total;
    }
}
document.writeln(sum(30, 200, 70, 1500));


//arrow関数関数 functionではなくなく => で組み合わせる
let add = (x1: number, x2: number): number => {
    return x1 + x2;
}

//自動でreturnされるので下記の記述でも可能
let add = (x1: number, x2: number): number => x1 + x2;

//引数が一つの場合()は無くても以下の記述でも可能
let add = x1 => x1 + x2; 

document.writeln(add(1, 3));



//arrow関数 this イベントハンドラー
document.getElementById('button1').addEventListener('click', function () {
    console.log(this); //<button id="button1">Button1</button>
}, false));

document.getElementById('button2').addEventListener('click', () => {
    console.log(this); //Windowオブジェクトを示す
}, false));

クラス

//class
//呼び出し方法
//puclic(どこからでも) proteted(自身のクラスと派生) private(自身のクラスからのみ)
class Animal{
    //プロパティ
    age: number = 10;
    //初期化 
    constructor(private isCry: boolean, private legs: number) {
    }
    //関数 
    cry(): void{
        if (this.isCry) {
            alert(this.legs);
        }
    }
}

//インスタンス生成
let dog = new Animal(true, 4);
dog.cry();

//classの継承 Animalクラスののcryメソッドを上書きする
class Dog extends Animal{
    //継承した親のクラスを使用する(super)
    cry(): void{
        super.cry();
        console.log('hello');
    }

    //元の関数を上書きしている
    // cry(): void{
    //     if (this.isCry) {
    //         alert('bow');
    //         }
    //     }
}
//引数を渡せてエラーが出ていない
let dog_1 = new Dog(true, 4);
dog_1.cry();

//getter,setter
class Animal2{
    //プロパティ
    private _age: number = 10;
    //getter
    get age(): number{
        console.log(this._age);
        return this._age;
    }
    //setter
    set age(value: number) {
        if (value < 0) {
            throw new Error('年齢は0以上でなければいけません');
        }
        this._age = value;
    }
}

//変数がprivateな為アクセス出来ない getter setter確認
let dog2 = new Animal2();
console.log(dog2.age); //dog.age = 10
dog2.age = 11; //set
console.log(dog2.age)

ジェネリック

//ジェネリック
class Store<T> {
    data: T;
    getStore(): T{
        console.log(this.data);
        return this.data;
    }
}

let stringData = new Store<string>(); //class内が文字列になる
stringData.data = 'X';
console.log(stringData.getStore());

let numberStore = new Store<number>(); //clss内が数値
numberStore.data = 10000;
console.log(numberStore.getStore());

//関数のジェネリック
function hello<T>(keyword: T) {
    console.log('${keyword}');
}

hello<string>('hello');
hello<number>(1000);


//クラスのジェネリック
class Component<T, U>{
    name: T;
    created: U;
}

let component = new Component<string, number>();
component.name = 'app';
component.created = Date.now();
// component.created = '2017/11/5'; error

interface

//interface 特定の機能の実装を強要する(設計図みたいなもの)
//クラスに設計を適用するにははimplementsの後にinterface名を付ける
interface Animal{
    name: string;
    legs: number;
    isCry: boolean;
    cry(): void;
}

//interfaceを適用している
class Dog implements Animal{
    name: string = 'maru';
    legs: number = 4;
    isCry: boolean = true;

    cry(): void{
        if (this.isCry) {
            console.log('bow');
        }
    }
}   


let Rog: Animal = {
    name: 'maru',
    legs: 4,
    isCry: true,
    cry() {
        console.log('bow');
    }
}

console.log(Rog);
console.log(Rog['name']);

let Dog: { name: string, legs: number} = {
    name: 'naru',
    legs: 4,
};