综述:typeScript很重要,是js的一个超集,主要提供了类型系统和对ES6的支持
1.什么是 TypeScript
TypeScript 是 JavaScript 的一个超集,主要提供了类型系统和对 ES6 的支持,它由 Microsoft 开发,代码开源于 GitHub 上。
2.为什么选择 TypeScript
TypeScript 官网列举了一些优势,不过我更愿意自己总结一下:
TypeScript 增加了代码的可读性和可维护性
-
类型系统实际上是最好的文档,大部分的函数看看类型的定义就可以知道如何使用了
-
可以在编译阶段就发现大部分错误,这总比在运行时候出错好
-
增强了编辑器和 IDE 的功能,包括代码补全、接口提示、跳转到定义、重构等
TypeScript 非常包容
-
TypeScript 是 JavaScript 的超集,
.js
文件可以直接重命名为.ts
即可 -
即使不显式的定义类型,也能够自动做出类型推论
-
可以定义从简单到复杂的几乎一切类型
-
即使 TypeScript 编译报错,也可以生成 JavaScript 文件
-
兼容第三方库,即使第三方库不是用 TypeScript 写的,也可以编写单独的类型文件供 TypeScript 读取
TypeScript 拥有活跃的社区
-
大部分第三方库都有提供给 TypeScript 的类型定义文件
-
Google 开发的 Angular2 就是使用 TypeScript 编写的
-
TypeScript 拥抱了 ES6 规范,也支持部分 ESNext 草案的规范
TypeScript 的缺点
任何事物都是有两面性的,我认为 TypeScript 的弊端在于:
-
有一定的学习成本,需要理解接口(Interfaces)、泛型(Generics)、类(Classes)、枚举类型(Enums)等前端工程师可能不是很熟悉的概念
-
短期可能会增加一些开发成本,毕竟要多写一些类型的定义,不过对于一个需要长期维护的项目,TypeScript 能够减少其维护成本
-
集成到构建流程需要一些工作量
-
可能和一些库结合的不是很完美
3.安装 TypeScript
TypeScript 的命令行工具安装方法如下:
npm install -g typescript
以上命令会在全局环境下安装 tsc
命令,安装完成之后,我们就可以在任何地方执行 tsc
命令了。
编译一个 TypeScript 文件很简单:
tsc hello.ts
我们约定使用 TypeScript 编写的文件以 .ts
为后缀,用 TypeScript 编写 React 时,以 .tsx
为后缀。
4.基础语法介绍
- 定义变量类型
let isDone: boolean = false;
let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
// ES6 中的二进制表示法
let binaryLiteral: number = 0b1010;
// ES6 中的八进制表示法
let octalLiteral: number = 0o744;
let notANumber: number = NaN;
let infinityNumber: number = Infinity;
- 任意类型
let myFavoriteNumber: any = 'seven';
myFavoriteNumber = 7;
- 类型推断
如果定义的时候没有赋值,不管之后有没有赋值,都会被推断成 any
类型而完全不被类型检查:
let myFavoriteNumber;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;
- 联合类型
let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;
-
对象的类型——接口
在 TypeScript 中,我们使用接口(Interfaces)来定义对象的类型。
什么是接口
在面向对象语言中,接口(Interfaces)是一个很重要的概念,它是对行为的抽象,而具体如何行动需要由类(classes)去实现(implement)。
TypeScript 中的接口是一个非常灵活的概念,除了可用于对类的一部分行为进行抽象以外,也常用于对「对象的形状(Shape)」进行描述。
简单的例子
interface Person {
name: string;
age: number;
}
let tom: Person = {
name: 'Tom',
age: 25
};
上面的例子中,我们定义了一个接口 Person
,接着定义了一个变量 tom
,它的类型是 Person
。这样,我们就约束了 tom
的形状必须和接口 Person
一致。
- 数组的类型
let fibonacci: number[] = [1, 1, 2, 3, 5];
- 函数的类型
function sum(x: number, y: number): number {
return x + y;
}
- 类型断言
类型断言(Type Assertion)可以用来手动指定一个值的类型
function getLength(something: string | number): number {
if ((<string>something).length) {
return (<string>something).length;
} else {
return something.toString().length;
}
}
- 声明文件
declare var 声明全局变量
declare function 声明全局方法
declare class 声明全局类
declare enum 声明全局枚举类型
declare namespace 声明(含有子属性的)全局对象
interface 和 type 声明全局类型
export 导出变量
export namespace 导出(含有子属性的)对象
export default ES6 默认导出
export = commonjs 导出模块
export as namespace UMD 库声明全局变量
declare global 扩展全局变量
declare module 扩展模块
/// <reference /> 三斜线指令
。。。。。未完待续