typeScript

1.介绍

　　TypeScript 是 JavaScript 的类型的超集，它可以编译成纯 JavaScript。

        编译出来的 JavaScript 可以运行在任何浏览器上。TypeScript 编译工具可以运行在任何服务器和任何系统上。

        TypeScript 是由微软开发的一款开源的编程语言。

2.优势

（1）TypeScript 增加了代码的可读性和可维护性

　　类型系统实际上是最好的文档，大部分的函数看看类型的定义就可以知道如何使用了

　　可以在编译阶段就发现大部分错误，这总比在运行时候出错好

　　增强了编辑器和 IDE 的功能，包括代码补全、接口提示、跳转到定义、重构等

（2）TypeScript 非常包容

　　TypeScript 是 JavaScript 的超集，.js 文件可以直接重命名为 .ts 即可

　　即使不显式的定义类型，也能够自动做出类型推论

       可以定义从简单到复杂的几乎一切类型

　　即使 TypeScript 编译报错，也可以生成 JavaScript 文件

　　兼容第三方库，即使第三方库不是用 TypeScript 写的，也可以编写单独的类型文件供 TypeScript 读取

TypeScript 最大的优势便是增强了编辑器和 IDE 的功能，包括代码补全、接口提示、跳转到定义、重构等

3.劣势

　　有一定的学习成本，需要理解接口（Interfaces）、泛型（Generics）、类（Classes）、枚举类型（Enums）等前端工程师可能不是很熟悉的概念

　　短期可能会增加一些开发成本，毕竟要多写一些类型的定义，不过对于一个需要长期维护的项目，TypeScript 能够减少其维护成本

　　集成到构建流程需要一些工作量

　　可能和一些库结合的不是很完美

4.安装

命令行工具安装：

npm install -g typescript

 

以上命令会在全局环境下安装 tsc 命令，安装完成之后，我们就可以在任何地方执行 tsc 命令了。

使用 TypeScript 编写的文件以 .ts为后缀，用 TypeScript 编写 React 时，以 .tsx 为后缀。

编译ts文件: tsc  hello.ts

自动编译ts文件：

首先运行tsc --init命令生成tsconfig.json文件，修改OutDir

"outDir": "./js",表示编译生成的js文件存放在根目录的js文件夹下

然后找到终端-运行任务-tsc：监视即可。

5.demo

//hello.ts

function sayHello(person: string) {
    return 'Hello, ' + person;
}

let user = 'Tom';
console.log(sayHello(user));

执行 : tsc hello.ts之后会生成一个编译好的  hello.js 文件

//hello.js

function sayHello(person) {
    return 'Hello, ' + person;
}
var user = 'Tom';
console.log(sayHello(user));

TypeScript 只会进行静态检查，如果发现有错误，编译的时候就会报错。

function sayHello(person: string) {
    return 'Hello, ' + person;
}

let user = [0, 1, 2];
console.log(sayHello(user));

编辑器中会提示错误，编译的时候也会出错：

index.ts(6,22): error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

TypeScript 编译的时候即使报错了，还是会生成编译结果，我们仍然可以使用这个编译之后的文件。

如果要在报错的时候终止 js 文件的生成，可以在 tsconfig.json 中配置 noEmitOnError 即可。

6. 数据类型

布尔值、数值、字符串、数组、枚举、any、null、undefined以及void

let isDone: boolean = false;
let decLiteral: number = 6;
let myName: string = 'Tom';

　let u: undefined = undefined;

　let n: null = null;

undefined 和 null 是所有类型的子类型。也就是说 undefined 类型的变量，可以赋值给 number 类型的变量：
let num: number = undefined;

任意值：任意值（Any）用来表示允许赋值为任意类型

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

在任意值上访问任何属性都是允许的，调用任何方法也都是允许的

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

 数组：

let fibonacci: number[] = [1, 1, 2, 3, 5];//只能为number类型的数据
let list: any[] = ['xcatliu', 25, { website: 'http://xcatliu.com' }];//可以为任意类型数据

也可以使用数组泛型表示：

let fibonacci: Array<number> = [1, 1, 2, 3, 5];

 

7.类型推论

如果没有明确的指定类型，那么 TypeScript 会依照类型推论（Type Inference）的规则推断出一个类型

let myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

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

TypeScript 会在没有明确的指定类型的时候推测出一个类型，这就是类型推论。

上面的

myFavoriteNumber 被赋值成seven，则系统将其推论为字符串类型的
如果定义时没有赋值，不管之后有没有赋值，都会被推断成any类型而完全不被类型检查

8.联合类型： 表示取值可以为多种类型中的一种。

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

联合类型使用 | 分隔每个类型。

 

9.接口

在 TypeScript 中，我们使用接口（Interfaces）来定义对象的类型。

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

let tom: Person = {
    name: 'Tom',
    age: 25
};

tom 的形状必须和接口 Person 一致，定义的变量既不能比接口少了一些属性，也不能多一些接口。

如果不希望完全匹配一个形状，可以使用可选属性：

interface Person {
    name: string;
    age?: number;
}

let tom: Person = {
    name: 'Tom'
};
或者是：
let tom: Person = {
    name: 'Tom',
    age: 25
};
//age可选属性可以不存在

如果希望一个接口允许有任意的属性：

interface Person {
    name: string;
    age?: number;
    [propName: string]: any;
}

let tom: Person = {
    name: 'Tom',
    gender: 'male'
};

使用 [propName: string] 定义了任意属性取 string 类型的值。

一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集

interface Person {
    name: string;
    age?: number;
    [propName: string]: string;
}

let tom: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male'
};

// index.ts(3,5): error TS2411: Property 'age' of type 'number' is not assignable to string index type 'string'.
// index.ts(7,5): error TS2322: Type '{ [x: string]: string | number; name: string; age: number; gender: string; }' is not assignable to type 'Person'.
// Index signatures are incompatible.
// Type 'string | number' is not assignable to type 'string'.
// Type 'number' is not assignable to type 'string'.

上例中，任意属性的值允许是 string，但是可选属性 age 的值却是 number，number 不是 string 的子属性，所以报错了。

只读属性：

interface Person {
    readonly id: number;
    name: string;
    age?: number;
    [propName: string]: any;
}

let tom: Person = {
    id: 89757,
    name: 'Tom',
    gender: 'male'
};

tom.id = 9527;

// index.ts(14,5): error TS2540: Cannot assign to 'id' because it is a constant or a read-only property.

 10.函数