TypeScript基础

TypeScript基本语法

TypeScript 是微软开发的 JavaScript 的超集，TypeScript兼容JavaScript，可以载入JavaScript代码然后运行。TypeScript与JavaScript相比进步的地方 包括：加入注释，让编译器理解所支持的对象和函数，编译器会移除注释，不会增加开销；增加一个完整的类结构，使之更新是传统的面向对象语言。

1、基本数据类型

Boolean

// Boolean
var isDone:boolean = false;

Number

// Number
var width:number = 100;

String

// String
var name:string = "hello"

Array

// Array
var list:number[] = [1,2,3];
var Array<number> = [1,2,3];

Enum

// enum Color {Red, Green, Blue}
var c: Color = Color.Red;
alert(c); //默认从零开始，alert(0);

// 可以手动设置指定值
enum Color1 {Red= 1, Green, Blue}
var c1: Color1 = Color1.Green;
alert(c1)  // alert(2)

// 根据值查找名称
enum Color2 {Red= 1, Green= 2, Blue= 4}
var c2: String = Color2[4];
alert(c2); // alert(Blue)

Any

// 不确定类型，退出编译检查
var notSure: any = 4;
notSure = "maybe a string instead";
console.log(notSure);
notSure = false;
console.log(notSure);

// 不确定数组元素类型
var anylist: any[] = [1, true, undefined]
console.log(anylist);
anylist[50] = 123;
console.log(anylist)

Void

// 空白
function warnUser(): viod {
    alert(123);
}

类型断言

// 在使用JSX语法时，只有as断言语法是被允许的。
let someValue: string = "I'm string value";

// let strLength: number = (<string>someValue).length;

let strLength: number = (someValue as string).length;

console.log(strLength);

类

基本语法

class Animal{
    animalName: string;

    constructor(name:string){
        this.animalName = name
    }

    sayHello(){
        alert(this.animalName + ": hello!")
    }
}

var tom = new Animal("Tom");
tom.sayHello();

继承

class Cat extends Animal {
    // 重写sayHello方法
    sayHello() {
        console.log(this.animalName + "(Cat): " + "Hello")
    }
}

class Mouse extends Animal {
    sayHello() {
        console.log(this.animalName + "(Mouse): " + "Hello")
    }
}

var cat = new Cat("Tom");
cat.sayHello();
var mouse = new Mouse("Jerry");
mouse.sayHello();

修饰符

如果学过强类型语言这里很好掌握

// public private static
class Animal {
    public animalName: string;

    constructor(name:string) {
        this.animalName = name
    }

    sayHello() {
        alert(this.animalName + ": hello!")
    }
}

set、get访问器

interface

function printLabel(labelObj: { label: string}) {
    console.log(labelObj.label);
}
var myobj = {label: "33333"};

printLabel(myobj);

// 使用interface

interface LabelledValue {
    label: string;
}

function printLabel(labelObj: LabelledValue) {
    console.log(labelObj.label)
}

printLabel({label: "1234"});

类型检查器不会去检查属性的顺序，只要相应的属性存在并且类型也是对的就可以。

可选属性

接口里的属性不全都是必需的。 有些是只在某些条件下存在，或者根本不存在。 可选属性在应用“option bags”模式时很常用，即给函数传入的参数对象中只有部分属性赋值了。

interface SquareConfig {
    color?: string;
    width?: number
}

function createSquare(config: SquareConfig): {color: string, area: number} {
    var newSquare = {color: "red", area: 100};
    if(config.color) {
        newSquare.color = config.color
    }
    if(config.width) {
        newSquare.area = config.width * config.width
    }

    return newSquare
}

var mySquare = createSquare({color: "black"});

函数类型

接口能够描述JavaScript中对象拥有的各种各样的外形。 除了描述带有属性的普通对象外，接口也可以描述函数类型。

为了使用接口表示函数类型，我们需要给接口定义一个调用签名。 它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型。

interface SearchFuc {
    (source: string, subString: string): boolean
}
var mySearch: SearchFunc = function(src, sub) {
    var result = src.search(sub);
    if (result == -1) {
        return false;
    }
    else {
        return true;
    }
}

console.log(mySearch("123","123"));

数组类型

与使用接口描述函数类型差不多，我们也可以描述数组类型。 数组类型具有一个index类型表示索引的类型，还有一个相应的返回值类型表示通过索引得到的元素的类型。

interface StringArray {
    [index: number]: string | number
}

var myArray: StringArray = ["1", "2", 9];
console.log(myArray);

支持两种索引类型：string和number。 数组可以同时使用这两种索引类型，但是有一个限制，数字索引返回值的类型必须是字符串索引返回值的类型的子类型。

索引签名能够很好的描述数组和dictionary模式，它们也要求所有属性要与返回值类型相匹配。 因为字符串索引表明obj.property和obj["property"]两种形式都可以。 下面的例子里，name的类型与字符串索引类型不匹配，所以类型检查器给出一个错误提示：

interface NumberDictionary {
  [index: string]: number;
  length: number;    // 可以，length是number类型
  name: string       // 错误，`name`的类型不是索引类型的子类型
}

类类型

实现接口