从浅入深学习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;

总结

good afternoon