TypeScript

什么是TypeScript？

1.TypeScript是由微软开发的一款开源的编程语言
2.TypeScript是JavaScript的超集，遵循最新的ES6，ES5规范。TypeScript拓展了JavaScript的语法。
3.TypeScript更像后端Java，c#这样的面向对象语言可以让js开发大型企业项目。
4.谷歌也在大力支持TypeScript的推广，谷歌的Angular2.x+就是基于TypeScript语法。
5.最新的Vue，React也可以集成TypeScript， 详细看官网TypeScript

TypeScript

TypeScript的安装

TypeScript的安装，通过npm (node.js包管理工具)

  npm install -g typescript
  tsc --init  //ts配置项告诉你里面是干啥的

接下来编译第一个Typescript文件，随便创建一个TypeScript文件。

index.ts

  function greeter(person) {
      return "Hello, " + person;
  }
  let user = "大盘鸡拌面";
  document.body.innerHTML = greeter(user);

接下来我们将这个ts引入到html文件中。打开页面会发现ts的文件里面写的js代码可以实现，页面中可以实现以上代码。完全符合ts的特性。它的体现当然不止这些。它有它独特的魅力。。。

对它进行编译，就跟css预编译器scss，less一样。编译成js，我们将它理解成一个工具。

  tsc index.ts

.ts后缀单文件进行编译

如果我们只希望greeter函数接受的参数为字符串类型呢？以往都是将传过来的参数进行数据类型的判断。一个两个还好，项目大，每个需求不一样的时候就不好管理喽。
ts为我们提供了 ：string 类型注解

类型注解
TypeScript里的类型注解是一种轻量级的为函数或变量添加约束的方式。

  //把以上代码修改下再看看效果
  function greeter(person: string) {
    return "Hello, " + person;
  }
  let user = [0, 1, 2];
  document.body.innerHTML = greeter(user);

编译后的结果---参数不符合，不能进行分配

但是它依然会对ts文件进行编译，并且生成一个js文件。它会警告你的代码不会按预期执行

TypeScript的基础数据类型

1.布尔值

    let isDone: boolean = false;    //  对其修改为非布尔值的数据类型，也会报错

2.数字（和js一样，但除了支持十进制和十六进制字面量，还支持ES6中引入的二进制和八进制字面量）

let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;

3.字符串

  let name: string = "bob"; // 也可以使用单引号，以及ES6的模板字符串

4.数组（三种方式）

     //可以在元素类型后面直接[],numeber表示由此类型元素组成的一个数组,里面的每一项成员都应该是数字类型。
    let list0: number[] = [1, 2, 3]; 
    let list1:Array<number> = [1, 2, 3] 
    let list2:any[] = ['123',22,true] //表示任意类型（下面会说到）

5.元组 Tuple（属于数组的一种）
元组类型允许表示一个已知元素数量和类型的数组，个元素类型不必相同，你可以对它的每一个值进行定义。当类型不符合的时候同样会发生错误提示

// 指定数组每一项的数据类型
let x: [string, number];
x = ['hello', 10]; // OK
x = [10, 'hello']; // Error

6.枚举（enum）

enum类型是对javascript标准数据类型的一个补充，使用枚举类型可以为一组数值赋予友好的名字。

  enum info{ name, age, sex }
  let a:info = info.name    // 0 

默认的情况下，从0开始为元素的编号，你也可以手动的指定成员的值

  enum info {name = '大盘鸡拌面', age = 18, sex = '男'}
  let a:info = info.name  // '大盘鸡拌面' 有没有点js对象访问赋值的意思，O(∩_∩)O哈哈~

枚举类型提供一个方便你由枚举的数值得到他的名字，假如我们知道年龄的值是18，但是我们不确定它映射info里的哪一个名字，我们可以查找他的名字。

  let infoAge: string = info[18]  //age  输出的是上面已定义的age ，它的值是18

7.Any（任意类型）

有时候，我们会想要为那些编程阶段还不清楚类型的变量指定一个类型，这些值可能来自于动态的内容，比如来自用户 输入或第三方库。这种情况下，我们不希望类型装换器对这些值进行检查，而是让他们直接通过编译阶段的检查，那么我们可以使用any类型来标记这些变量：

  let test: any = 2019;
       test = 2020               // 2020
       test = '大盘鸡拌面'        // '大盘鸡拌面'
       test = false              // false

在对现代代码进行改写的时候，any类型是十分有用的，它允许你在编译时可选择的包含，或者移除类型的检查。

8.Void （没有任何类型，一般用于定义方法的时候方法没有返回值）
声明一个 void 类型的变量没有什么大作用，因为你只能为其赋予 undefined 和 null。它表示没有任何数据类型，当一个函数没有返回值的时候。你通常回见其返回值类型是void
当在函数中返回一个非 undefined 和 null 的数据类型的话，它会语法报错

  let test1: void = undefined
  let test2: void = null
  let test3: void = '你好'  // Type '你好' is not assignable to type 'void'

9.null 和 undefined

跟javascript一样的，和void相似

10.Never （表示不会出现的值）

never 类型表示的是那些永不存在的值。是那些总是抛出异常，或者根本不会有返回值的函数表达式或者箭头函数表达式的返回值类型。变量也可能是never类型

// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
    throw new Error(message);
}

// 推断的返回值类型为never
function fail() {
    return error("Something failed");
}

// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
    while (true) {
    }
}

11. Object
    表示非原始类型，也就是除了number，string，boolean， symbol， null，undefined之外的类型,跟javascript 的区别不是太大

declare function create(o: object | null): void;

create({ prop: 0 }); // OK
create(null); // OK

create(42); // Error
create("string"); // Error
create(false); // Error
create(undefined); // Error

12.类型断言

类型断言好比其它语言里的类型转换，但是不进行特殊的数据检查和解构。 它没有运行时的影响，只是在编译阶段起作用。 TypeScript会假设你，程序员，已经进行了必须的检查。

// 第一种语法 （尖括号）
let someValue: any = "this is a string";

let strLength: number = (<string>someValue).length;
// 第二种语法 （as） 两种语法效果都是一样的，然而,当你在ts中使用jsx时，只有as语法断言是被允许的