TypeScript学习

TypeScript
相对于es6，typeScript最大的改善是添加了类型系统。
类型检查的好处有
①有助于代码的编写，因为它可以在编译期预防bug;
②有助于代码的阅读，因为它可以清晰的表明你的意图；


接下来让我们看看TypeScript工具带来的高级功能。 给 person函数的参数添加: string类型注解，如下：
function greeter(person: string) { //string类型注解
    return "Hello, " + person;
}
let user = "Jane User";
document.body.innerHTML = greeter(user);
在构造函数的参数上使用public等同于创建了同名的成员变量。


基础属性
let isDone: boolean = false;//boolean 
let name: string = `Gene`;//string 
let age: number = 37;//number 
数组
① let list: number[] = [1, 2, 3];
② let list: Array<number> = [1, 2, 3];


元组 Tuple
let x: [string, number];
x = ['hello', 10]; // OK
x = [10, 'hello']; // Error
当访问一个越界的元素，会使用联合类型替代：（我的理解就是 没定义类型的额外的可以使用已经定义类型的公共方法 除此之外会报错）
x[3] = 'world'; // OK, 字符串可以赋值给(string | number)类型
console.log(x[5].toString()); // OK, 'string' 和 'number' 都有 toString
x[6] = true; // Error, 布尔不是(string | number)类型
enum类型是对JavaScript标准数据类型的一个补充（枚举）
枚举类型提供的一个便利是你可以由枚举的值得到它的名字。 例如，我们知道数值为2，但是不确定它映射到Color里的哪个名字，我们可以查找相应的名字：
enum Color {Red = 1, Green = 2, Blue = 4}
let c: Color = Color.Green;
enum Color {Red = 1, Green, Blue}
let colorName: string = Color[2];
alert(colorName);  // 显示'Green'因为上面代码里它的值是2


Any
我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。（任何类型）


Void
某种程度上来说，void类型像是与any类型相反，它表示没有任何类型。 当一个函数没有返回值时，你通常会见到其返回值类型是 void：


类型断言
类型断言有两种形式。
let someValue: any = "this is a string";
其一是“尖括号”语法：
let strLength: number = (<string>someValue).length;
另一个为as语法：
let strLength: number = (someValue as string).length;
两种形式是等价的。 至于使用哪个大多数情况下是凭个人喜好；然而，当你在TypeScript里使用JSX时，只有 as语法断言是被允许的.


接口
interface LabelledValue { //必填
  label: string;
}
interface SquareConfig {//可选
  color?: string;
  width?: number;
}
interface Point { //只读 不能修改
    readonly x: number;
    readonly y: number;
}


interface StringArray { //索引定义 类型
  [index: number]: string;
}


interface Shape { //定义接口
    color: string;
}
interface Square extends Shape {//接口继承
    sideLength: number;
}
interface PenStroke { //接口继承
    penWidth: number;
}
interface Square extends Shape, PenStroke { //多接口继承
    sideLength: number;
}




成员都默认为 public
class Animal {
    public name: string;
    public constructor(theName: string) { this.name = theName; }
    public move(distanceInMeters: number) {
        console.log(`${this.name} moved ${distanceInMeters}m.`);
    }
}


当成员被标记成 private时，它就不能在声明它的类的外部访问。比如：
class Animal {
    private name: string;
    constructor(theName: string) { this.name = theName; }
}
new Animal("Cat").name; // 错误: 'name' 是私有的.


protected修饰符与 private修饰符的行为很相似，但有一点不同， protected成员在派生类中仍然可以访问。例如
class Person {
    protected name: string;
    constructor(name: string) { this.name = name; }
}
class Employee extends Person {
    private department: string;


    constructor(name: string, department: string) {
        super(name)
        this.department = department;
    }
    public getElevatorPitch() {
        return `Hello, my name is ${this.name} and I work in ${this.department}.`;
    }
}
let howard = new Employee("Howard", "Sales");
console.log(howard.getElevatorPitch());
console.log(howard.name); // 错误


你可以使用 readonly关键字将属性设置为只读的。 只读属性必须在声明时或构造函数里被初始化。
class Octopus {
    readonly name: string;
    readonly numberOfLegs: number = 8;
    constructor (theName: string) {
        this.name = theName;
    }
}
let dad = new Octopus("Man with the 8 strong legs");
dad.name = "Man with the 3-piece suit"; // 错误! name 是只读的.


函数
书写完整函数类型
let myAdd: (x: number, y: number) => number =
    function(x: number, y: number): number { return x + y; };
函数类型包含两部分：参数类型和返回值类型。 当写出完整函数类型的时候，这两部分都是需要的。 我们以参数列表的形式写出参数类型，
为每个参数指定一个名字和类型。 这个名字只是为了增加可读性。 我们也可以这么写：
let myAdd: (baseValue: number, increment: number) => number =
    function(x: number, y: number): number { return x + y; };


泛型
function identity(arg: any): any { //不泛型写法
    return arg;
}


function identity<T>(arg: T): T { //泛型写法
    return arg;
}
我们定义了泛型函数后，可以用两种方法使用。 第一种是，传入所有的参数，包含类型参数：
let output = identity<string>("myString");  // type of output will be 'string'
这里我们明确的指定了T是string类型，并做为一个参数传给函数，使用了<>括起来而不是()。
第二种方法更普遍。利用了类型推论 -- 即编译器会根据传入的参数自动地帮助我们确定T的类型：
let output = identity("myString");  // type of output will be 'string'


Symbols介绍
自ECMAScript 2015起，symbol成为了一种新的原生类型，就像number和string一样。


let sym2 = Symbol("key");
let sym3 = Symbol("key");
sym2 === sym3; // false, symbols是唯一的


let sym = Symbol();
let obj = {
    [sym]: "value"
};
console.log(obj[sym]); // "value"
拥有很多方法 https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Symbol


模块引入导出以前看过就不记录了