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));