TypeScript基础

一、关于 TypeScript

TypeScript是 JavaScript 的一个超集，主要提供了类型系统和对 ES6 的支持，它由 Microsoft 开发

二、TypeScript优缺点

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

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

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

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

TypeScript 拥有活跃的社区

·         大部分第三方库都有提供给 TypeScript 的类型定义文件

·         Google 开发的 Angular2 就是使用 TypeScript 编写的

·         TypeScript 拥抱了 ES6 规范

TypeScript 的缺点

TypeScript 的弊端在于：

·         有一定的学习成本，需要理解接口（Interfaces）、泛型（Generics）、类（Classes）、枚举类型（Enums）等概念

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

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

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

三、安装 TypeScript

npm install -g typescript
tsc xxxx.ts

四、Hello TypeScript

function sayHello(person: string) {
    return 'Hello, ' + person;
}
let user = 'Tom';
console.log(sayHello(user));
 
执行 tsc hello.ts
 
这时候会生成一个编译好的文件 hello.js：function sayHello(person) {
    return 'Hello, ' + person;
}
var user = 'Tom';
console.log(sayHello(user));
 
TypeScript 中，使用 : 指定变量的类型，: 的前后有没有空格都可以

注意点：

TypeScript 如果发现有错误，编译的时候就会报错。

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

如果要在报错的时候终止 js 文件的生成，可以在 tsconfig.json 中配置 noEmitOnError 即可。关于 tsconfig.json，参考官方手册（中文版）

五、原始数据类型

1、布尔值

var isScuess: boolean = false;
注意，使用构造函数 Boolean 创造的对象不是布尔值：new Boolean() 返回的是一个 Boolean 对象：
let createdByNewBoolean: Boolean = new Boolean(1);
直接调用 Boolean 也可以返回一个 boolean 类型let createdByBoolean: boolean = Boolean(1);

2、数值

var decLiteralNum: number = 6;
var hexLiteralNum: number = 0xf00d;
 
// ES6 中的二进制表示法
var binaryLiteralN: number = 0b1010;
// ES6 中的八进制表示法
var octalLiteralN: number = 0o744;
 
var notANumber: number = NaN;  //typeof
var infinityNumber: number = Infinity;
 
其中 0b1010 和 0o744 是 ES6 中的二进制和八进制表示法，它们会被编译为十进制数字。

3、字符串

let myName: string = 'Tom';
let myAge: number = 25;
// 模板字符串
let sentence: string = `Hello, my name is ${myName}.
I'll be ${myAge + 1} years old next month.`;

4、空值

function alertName(): void {
    alert('My name is Tom');
}
声明一个 void 类型的变量没有什么用，因为你只能将它赋值为 undefined 和 null：let unusable: void = undefined;
5、null和undefined
在 TypeScript 中，可以使用 null 和 undefined 来定义这两个原始数据类型：let u: undefined = undefined;
let n: null = null;

undefined 类型的变量只能被赋值为 undefined，null 类型的变量只能被赋值为 null。与 void 的区别是，undefined 和 null 是所有类型的子类型。也就是说 undefined 类型的变量，可以赋值给 number 类型的变量：// 这样不会报错

let num: number = undefined;
// 这样也不会报错
let u: undefined;
let num: number = u;
 
而 void 类型的变量不能赋值给 number 类型的变量：let u: void;
let num: number = u;

六、任意值

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

1、什么是任意值类型

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

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

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

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

2、任意值的属性和方法

在任意值上访问任何属性都是允许的：

let anyThing: any = 'hello';
console.log(anyThing);
console.log(anyThing.myName);

可以认为，声明一个变量为任意值之后，对它的任何操作，返回的内容的类型都是任意值。

3、未声明类型的变量

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

let something;
something = 'seven';
something = 7;

七、类型推论

以下代码虽然没有指定类型，但是会在编译的时候报错：

let myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

事实上，它等价于：​​​​​​​

let myFavoriteNumber: string = 'seven';
myFavoriteNumber = 7;
TypeScript 会在没有明确的指定类型的时候推测出一个类型，这就是类型推论。

如果定义的时候没有赋值，不管之后有没有赋值，都会被推断成 any 类型而完全不被类型检查：​​​​​​​

let myFavoriteNumber;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

八、联合类型

联合类型（Union Types）表示取值可以为多种类型中的一种。

1、简单例子

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

let myFavoriteNumber: string | number;
myFavoriteNumber = true;

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

这里的 let myFavoriteNumber: string | number 的含义是，允许 myFavoriteNumber 的类型是 string 或者 number，但是不能是其他类型。

2、访问联合类型的属性或方法

当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型里共有的属性或方法：

function getLength(something: string | number): number {
    return something.length;
}

上例中，length 不是 string 和 number 的共有属性，所以会报错。

访问 string 和 number 的共有属性是没问题的：​​​​​​​

function getString(something: string | number): string {
    return something.toString();
}

联合类型的变量在被赋值的时候，会根据类型推论的规则推断出一个类型：

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
console.log(myFavoriteNumber.length); // 5
myFavoriteNumber = 7;
console.log(myFavoriteNumber.length); // 编译时报错

上例中，第二行的 myFavoriteNumber 被推断成了 string，访问它的 length 属性不会报错。

而第四行的 myFavoriteNumber 被推断成了 number，访问它的 length 属性时就报错了。

下一篇文章继续更新TypeScript类型定义-升级篇

交流

共同进阶学习

    

学习之余，大家一起来薅羊毛喽，各取所需。