TypeScript 入门（一）

一、TypeScript

TypeScript 是 JavaScript 的一个超集，支持 ECMAScript 6 标准，是一种给 JavaScript 添加特性的语言扩展（增加的功能在后文会讲）。

TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，可通过npm和yarn安装，通常我们使用.ts作为 TypeScript 代码文件的扩展名。

实例:

// app.ts
const hello : string = "Hello World!"
console.log(hello)

// tsc app.ts:执行命令将 TypeScript 转换为 JavaScript 代码
tsc app.ts

// 同一目录下生成一个 app.js 文件
var message = "Hello World";
console.log(message);

// 执行文件，打印了'Hello World'
node app.js 
复制代码

1、基础类型:

注意：TypeScript 和 JavaScript 没有整数类型。

1、Any 类型

针对编程时类型不明确的变量使用的一种数据类型

let x: any = 1;    // 数字类型
x = 'I am who I am';    // 字符串类型
x = false;    // 布尔类型

let arrayList: any[] = [1, false, 'fine'];// 定义存储各种类型数据的数组
arrayList[1] = 100;
复制代码

2、Null 和 Undefined

• null：表示 “什么都没有”，一个空对象引用，用 typeof 检测 null 返回是 object。

• undefined：表示没有设置值的变量，用 typeof 检测 null 返回是 undefined。

Null 和 Undefined 是其他任何类型（包括 void）的子类型，可以赋值给其它类型，如数字类型；此时，赋值后的类型会变成 null 或 undefined。而在TypeScript中启用严格的空校验（--strictNullChecks）特性，就可以使得null 和 undefined 只能被赋值给 void 或本身对应的类型。

// 启用 --strictNullChecks
let x: number;
x = 1; // 运行正确
x = undefined;    // 运行错误
x = null;    // 运行错误

// 启用 --strictNullChecks（用 | 来支持多种类型）
let x: number | null | undefined;
x = 1; // 运行正确
x = undefined;    // 运行正确
x = null;    // 运行正确
复制代码

3、never 类型

never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。在函数中它通常表现为抛出异常或无法执行到终止点（例如无限循环）。

let x: never;
let y: number;

// 运行错误，数字类型不能转为 never 类型
x = 123;

// 运行正确，never 类型可以赋值给 never类型
x = (()=>{ throw new Error('exception')})();

// 运行正确，never 类型可以赋值给 数字类型
y = (()=>{ throw new Error('exception')})();

// 返回值为 never 的函数可以是抛出异常的情况
function error(message: string): never {
    throw new Error(message);
}

// 返回值为 never 的函数可以是无法被执行到的终止点的情况
function loop(): never {
    while (true) {}
}
复制代码

2、变量声明

变量用于引用计算机内存地址，当做存储数据的容器；变量使用前必须先声明，我们可以使用 var 来声明变量。

// 四种方式来声明变量

var uname:string = "Runoob"
var uname:string // 没有初始值，变量值会设置为 undefined
var uname = "Runoob" // 变量可以是任意类型
var uname // 类型可以是任意类型，默认初始值为 undefined
复制代码

TypeScript 遵循强类型，如果将不同的类型赋值给变量会编译错误

var num:number = "hello"     // 编译错误
复制代码

3、类型断言（Type Assertion）

类型断言可以用来手动指定一个值的类型，即允许变量从一种类型更改为另一种类型。

// app.ts
var str = '1' 
var str2:number = <number> <any> str   //str、str2 是 string 类型

// app.js
var str = '1';
var str2 = str;  //str、str2 是 string 类型
复制代码

当 S 类型是 T 类型的子集，或者 T 类型是 S 类型的子集时，S 能被成功断言成 T。它之所以不被称为类型转换，是因为转换通常意味着某种运行时的支持。但是，类型断言纯粹是一个编译时语法，一种为编译器提供关于如何分析代码的方法。

4、类型推断

当类型没有给出时，TypeScript 编译器利用类型推断来推断类型。如果由于缺乏声明而不能推断出类型，那么它的类型被默认为动态 any 类型。

var num = 2;    // 类型推断为 number
num = "12";    // 编译错误
复制代码

5、变量作用域

变量作用域指定了变量定义、可用的位置。

TypeScript 有以下几种作用域：

• 全局作用域 ：全局变量定义在程序结构的外部，它可以在你代码的任何位置使用。
• 类作用域 ：类变量声明在一个类里头，但在类的方法外面；该变量可以通过类的对象来访问。类变量也可以是静态的，静态的变量可以通过类名直接访问。
• 局部作用域 ：局部变量，只能在声明它的一个代码块中使用。

// app.ts
var global_num = 12          // 全局变量
class Numbers { 
   num_val = 13;             // 实例变量
   static sval = 10;         // 静态变量
   
   storeNum():void { 
      var local_num = 14;    // 局部变量
   } 
} 

// app.js
var global_num = 12; // 全局变量
var Numbers = /** @class */ (function () {
    function Numbers() {
        this.num_val = 13; // 实例变量
    }
    Numbers.prototype.storeNum = function () {
        var local_num = 14; // 局部变量
    };
    Numbers.sval = 10; // 静态变量
    return Numbers;
}());
复制代码