1.介绍
TypeScript 是 JavaScript 的类型的超集,它可以编译成纯 JavaScript。
编译出来的 JavaScript 可以运行在任何浏览器上。TypeScript 编译工具可以运行在任何服务器和任何系统上。
TypeScript 是由微软开发的一款开源的编程语言。
2.优势
.js
文件可以直接重命名为 .ts
即可tsc
命令,安装完成之后,我们就可以在任何地方执行 tsc
命令了。.tsx
为后缀。//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));
编辑器中会提示错误,编译的时候也会出错:
TypeScript 编译的时候即使报错了,还是会生成编译结果,我们仍然可以使用这个编译之后的文件。
如果要在报错的时候终止 js 文件的生成,可以在 tsconfig.json
中配置 noEmitOnError
即可。
let isDone: boolean = false;
let decLiteral: number = 6;
let myName: string = 'Tom';
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.函数