TypeScript入门学习基础篇（一）

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 不确定一个联合类型的变量到底是哪个类型的时候，我们只能访问此联合类型的所有类型里共有的属性或方法