TypeScript 基础语法

1、void 与 undefined和 null

与 void的区别是，undefined 和 null是所有类型的子类型。也就是说 undefined类型的变量，可以赋值给 number类型的变量也可以赋值给String类型的变量

而 void 在 JavaScript里是没有的，在TS中 void 表示没有任何返回值的函数

function alertName(): void {
    alert('My name is Tom');
}

注意： 是不可以赋值给 number 或string 类型的变量的。

// 这样不会报错
let num: number = undefined;
// 这样也不会报错
let u: undefined;
let num: number = u;

// 报错
let u: void;
let num: number = u;

// index.ts(2,5): error TS2322: Type 'void' is not assignable to type 'number'.

2、任意值 any

如果是一个普通类型，在赋值过程中改变类型是不被允许的：

let myFavoriteNumber: string = 'seven';
myFavoriteNumber = 7;

// index.ts(2,1): error TS2322: Type 'number' is 
// not assignable to type 'string'.

但如果是 any类型，则允许被赋值为任意类型。

let myFavoriteNumber: any = 'seven';
myFavoriteNumber = 7;

注：变量如果在声明的时候，未指定其类型，那么它会被识别为任意值类型

3、类

3.1、类的声明

3.2、构造函数 constructor

构造函数是类的特殊方法，只有在类被实例化的时候调用，而且只被调用一次。

class Person{
    name;
    constructor(name:string) {
        console.log("haha");
    }
    eat() {
        console.log("i am eating");
    }
}

var p1 = new Person("batman");
p1.eat();

var p2 = new Person("superman");
p2.eat();

下面是简写方法，非常常用：注意简写时候constructor必须声明访问控制符。

class Person{
    constructor(public name:string) {
    }
    eat() {
        console.log(this.name);
    }
}

var p1 = new Person("batman");
p1.eat();

var p2 = new Person("superman");
p2.eat();

在构造函数时必须明确指定访问控制符。 constructor(public name:string)和 constructor(name:string)是不一样的。

3.3、类的继承

两个关键字：
extends：用来声明类的继承关系
super：调用父类的构造函数或者方法
super的作用：
         1、调用父类的构造函数(必须调用)
         2、调用父类的其他函数(非必须)

注：子类在继承父类的时候，如果父类有构造函数并且子类也声明构造函数的时候，子类的构造函数必须调用父类的构造函数并且父类的参数也是比传的。使用super()来调用父类构造函数。

class Employee extends Person {
  constructor(public name: string) {
    // super(name)
  }
}

下面是报错信息

2175CC73-8B26-48F9-B362-28A063019042.png

4、接口

两个关键字：
interface声明接口
implements实现接口

4.1 interface 用法：声明

4.1.1 使用接口作为方法的参数的类型声明

interface IPerson {
  name: string;
  age: number;
}

class Person {
  constructor(public config: IPerson) {
    console.log('My name is ' + config.name + ' age is ' + config.age)
  }
}

let p1 = new Person({ name: 'siyuetian', age: 22 });

4.1.2 用接口声明方法

注： 所有声明实现这个接口的类必须实现这个方法。

interface  Animal {
  eat();
}

class Sheep implements Animal {
  // 所有声明实现这个接口的类必须实现接口声明的方法。
  eat() {
    console.log('I eat grass');
  }
}

5、注解annotation

6、类型定义文件

如何在ts中用jquery?

类型定义文件（*.d.ts）:帮助开发者在TypeScript中使用已有的JavaScript的工具包，如：JQuery.

实际上就是一个TypeScript模块，把你要使用的avaScript的工具包里面的工具以TypeScript的类或者是模块的方式暴露出来供你在你的模块里去import。

ts中使用jquery:

jquery的类型定义文件就是jquery.d.ts拷贝到目录下即可。

或者通过 npm install --save @types/jquery 来安装类型定义文件。

工具：Typings 专门用来安装类型定义文件的。

7、解构

7.1 对象解构，就是一般的ES6解构
7.2 嵌套解构和重命名

function getStock() {
    return {
        code: "IBM",
        price: {
            price1: 200,
            price2:400
        }
    }
}
//解构的时候还可以重命名变量值
var { code: codeX, price:{price2} } = getStock();
console.log(codeX);//重命名
console.log(price2);//嵌套的值 析构里再写个析构

8、函数
https://github.com/xcatliu/typescript-tutorial/blob/master/basics/type-of-function.md

参考：https://www.cnblogs.com/starof/p/6963377.html
https://ts.xcatliu.com/advanced/class-and-interfaces