TypeScript的优点
- 增强了代码的可维护性和可读性
- 有着很强的包容性
TypeScript的缺点
- 学习成本
- 开发成本
TypeScript安装
- TypeScript的命令行安装
$ npm install -g typescript
- 以上命令会在全局环境下安装
tsc
命令,安装完成之后,我们就可以在任何地方执行tsc
命令了 - 编译一个 TypeScript 文件很简单:
$ tsc hello.ts
TypeScript基础数据类型
原始数据类型
- 原始数据类型包括:布尔值、数值、字符串、
null
、undefined
以及 ES6 中的新类型Symbol
布尔值
在 TypeScript 中,使用 boolean
定义布尔值类型
let isLoading: boolean = false;
数值
在 TypeScript 中,使用 number
定义数值类型:
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;
// 其中 0b1010 和 0o744 是 ES6 中的二进制和八进制表示法,它们会被编译为十进制数字。
字符串
在 TypeScript 中,使用 string
定义字符串类型:
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.`;
// 其中 ` 用来定义 ES6 中的模板字符串,${expr} 用来在模板字符串中嵌入表达式。
Null 和 Undefined
在 TypeScript 中,使用 null
和 undefined
来定义这两个原始数据类型:
let u: undefined = undefined;
let n: null = null;
空值
JavaScript 没有空值(Void)的概念,在 TypeScript 中,可以用 void
表示没有任何返回值的函数:
function alertName(): void {
alert('My name is Tom');
}
// 声明一个 void 类型的变量没有什么用,因为你只能将它赋值为 ``undefined`` 和 ``null``:
let unusable: void = undefined;
undefined
和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;
// Type 'void' is not assignable to type 'number'.
任意值
任意值(Any)用来表示允许赋值为任意类型。
let myFavoriteNumber: any = 'seven';
myFavoriteNumber = 7;
- 在任意值上访问任何属性都是允许的:
let anyThing: any = 'hello';
console.log(anyThing.myName);
console.log(anyThing.myName.firstName);
- 也允许调用任何方法:
let anyThing: any = 'Tom';
anyThing.setName('Jerry');
anyThing.setName('Jerry').sayHello();
anyThing.myName.setFirstName('Cat');
可以认为,声明一个变量为任意值之后,对它的任何操作,返回的内容的类型都是任意值。
未声明类型的变量
变量如果在声明的时候,未指定其类型,那么它会被识别为任意值类型:
let something;
something = 'seven';
something = 7;
something.setName('Tom');
## 等价于
let something: any;
something = 'seven';
something = 7;
something.setName('Tom');
- 如果没有明确的指定类型,那么 TypeScript 会依照类型推论的规则推断出一个类型。
- 如果定义的时候没有赋值,不管之后有没有赋值,都会被推断成 any 类型而完全不被类型检查
联合类型
表示取值可以为多种类型中的一种。联合类型使用 | 分隔每个类型
let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;
// 这里的 let myFavoriteNumber: string | number 的含义是,
// 允许 myFavoriteNumber 的类型是 string 或者 number,但是不能是其他类型。
- 当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候,我们只能访问此联合类型的所有类型里共有的属性或方法