从浅入深学习TypeScript,通俗易懂
一、TypeScript是什么?
TypeScript 是 JavaScript 的类型的超集,它可以编译成纯 JavaScript。编译出来的 JavaScript 可以运行在任何浏览器上。TypeScript 编译工具可以运行在任何服务器和任何系统上。TypeScript 是开源的。TypeScript 增加了代码的可读性和可维护性
类型系统实际上是最好的文档,大部分的函数看看类型的定义就可以知道如何使用了
可以在编译阶段就发现大部分错误,这总比在运行时候出错好
增强了编辑器和 IDE 的功能,包括代码补全、接口提示、跳转到定义、代码重构等
TypeScript 非常包容
TypeScript 是 JavaScript 的超集,.js 文件可以直接重命名为 .ts 即可
即使不显式的定义类型,也能够自动做出类型推论
TypeScript 的类型系统是图灵完备的,可以定义从简单到复杂的几乎一切类型
即使 TypeScript 编译报错,也可以生成 JavaScript 文件
兼容第三方库,即使第三方库不是用 TypeScript 写的,也可以编写单独的类型文件供 TypeScript 读取
二、使用步骤
1.引入库
代码如下(示例):
npm install -g typescript
2.编译ts文件
代码如下(示例):
tsc hello.ts
2.运行ts文件
代码如下(示例):
tsc hello.ts
3.原始数据类型
布尔值
let isDone: boolean = false;
let createdByNewBoolean: Boolean = new Boolean(1); // new boolen()返回的是boolean值
let createdByBoolean: boolean = Boolean(1); // 直接调用返回boolean值
数值
// 0b1010 和 0o744 是 ES6 中的二进制和八进制表示法,它们会被编译为十进制数字
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 myName: string = 'Tom';
let myAge: number = 25;
// 模板字符串
// ` 用来定义 ES6 中的模板字符串,${expr} 用来在模板字符串中嵌入表达式
let sentence: string = `Hello, my name is ${myName}.
I'll be ${myAge + 1} years old next month.`;
空值
// 用 void 表示没有任何返回值的函数
function alertName(): void {
alert('My name is Tom');
}
// 赋值为 undefined 和 null
let unusable: void = undefined;
Null 和 Undefined
let u: undefined = undefined;
let n: null = null;
// undefined 和 null 是所有类型的子类型
let num: number = undefined;
let u: undefined;
let num: number = u;
4.任意值
任意值(Any)用来表示允许赋值为任意类型
let anyThing: any = 'hello';
console.log(anyThing.myName);
console.log(anyThing.myName.firstName);
5.类型推论
如果没有明确的指定类型,那么 TypeScript 会依照类型推论(Type Inference)的规则推断出一个类型。
场景:
let myFavoriteNumber = 'seven';
myFavoriteNumber = 7;
// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.
// 相当于
let myFavoriteNumber: string = 'seven';
myFavoriteNumber = 7;
// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.
6.联合类型
联合类型(Union Types)表示取值可以为多种类型中的一种
联合类型使用 | 分隔每个类型
let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;
访问联合类型的属性或方法
访问此联合类型的所有类型里共有的属性或方法
function getLength(something: string | number): number {
return something.length;
}
// 因为访问的length属性是number类型不存在的,所以报错
// index.ts(2,22): error TS2339: Property 'length' does not exist on type 'string | number'.
// Property 'length' does not exist on type 'number'.
function getString(something: string | number): string {
return something.toString();
}
// 都是有toString()方法的所以不会报错
7.引用数据类型
数组
第一种,可以在元素类型后面接上 [],表示由此类型元素组成的一个数组
let list: number[] = [1, 2, 3];
第二种方式是使用数组泛型,Array<元素类型>
let list: Array<number> = [1, 2, 3];
元组 Tuple
元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同
// Declare a tuple type
let x: [string, number];
// Initialize it
x = ['hello', 10]; // OK
// Initialize it incorrectly
x = [10, 'hello']; // Error
访问一个越界的元素,会使用联合类型替代
x[3] = 'world'; // OK, 字符串可以赋值给(string | number)类型
console.log(x[5].toString()); // OK, 'string' 和 'number' 都有 toString
x[6] = true; // Error, 布尔不是(string | number)类型
枚举
类型断言
一是“尖括号”语法
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
二为as语法
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;