TypeScript

ES6 基础上的超级静态类型定义语言，需要编译成 js 后在浏览器执行。

Vue 项目中的配置文件

// tsconfig.json
{
  "compilerOptions": {
    // 与 Vue 的浏览器支持保持一致
    "target": "es5",
    // 这可以对 `this` 上的数据属性进行更严格的推断
    "strict": true,
    // 如果使用 webpack 2+ 或 rollup，可以利用 tree-shake:
    "module": "es2015",
    "moduleResolution": "node"
  }
}

1. 基础类型

const name:string; //name为string类型

function(type:string):viod{} //参数type为string类型，可返回任意值

const arr:(number | string)[]=[1,'2',3] //数字或者字符类型的数组

const teacher:[string, string, number] = ['name', 'sex', 20] //元组 tuple，数组类型和个数固定

类型有：(需要小写)

string any array number boolean object null undefined ...

2. interface 接口声明

interface LabeledValue {
    label: string;
}

interface SquareConfig {
    color?: string;
    width?: number;
} //？可选参数

interface SearchFunc {
    (source: string, subString: string): boolean;
} //函数声明，参数是string类型，返回需要是布尔值；

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

3. implements 实现接口

interface ClockInterface {
    currentTime: Date;
    setTime(d: Date);
}

class Clock implements ClockInterface {
    currentTime: Date;
    setTime(d: Date) {
        this.currentTime = d;
    }
    constructor(h: number, m: number) { }
}

继承接口

interface Shape {
    color: string;
}

interface Square extends Shape {
    sideLength: number;
}

let square = <Square>{};
square.color = "blue";
square.sideLength = 10;

4. 箭头表达式

箭头函数能保存函数创建时的 this值，而不是调用时的值；

this 即使在 setInterval 中也不指向 window，而是指向创建时作用域的 this

--noImplicitThis：如果设置了这个参数，会报错 this的类型为any

还有一个方法可以保持this的作用域不变，又不会报错：提供一个显式的 this参数。 

this参数是个假的参数，它出现在参数列表的最前面：

function f(this: void) {
    // make sure `this` is unusable in this standalone function
}
interface Deck {
    createCardPicker(this: Deck): () => Card;
}

5. 类

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}
let greeter = new Greeter("world");

继承 extends

class Animal {
    move(distanceInMeters: number = 0) {
        console.log(`Animal moved ${distanceInMeters}m.`);
    }
}

class Dog extends Animal {
    bark() {
        console.log('Woof! Woof!');
    }
}

const dog = new Dog();
dog.bark();
dog.move(10);

super关键字

class A {}

class B extends A {
  constructor() {
    super();
  }
}
//上面代码中，子类B的构造函数之中的super()，代表调用父类的构造函数。

//第二种情况，super作为对象时，在普通方法中，指向父类的原型对象；在静态方法中，指向父类。

class A {
  p() {
    return 2;
  }
}

class B extends A {
  constructor() {
    super();
    console.log(super.p()); // 2
  }
}

let b = new B();

公共 public，私有 private 与受保护的修饰符 protected（类似private，但在继承函数中依然可以被调用）

6.模块(module)导入导出

import
export

7.类型定义文件 *.d.ts

例如要在项目中使用jquery，就找到jquery的index.d.ts放到项目根目录，就可以使用$符号了。

可以从下面网址中的软件找到需要的 .d.ts 文件

https://github.com/typings/typings

持续更新中。。。