TypeScript 入门（一）

TypeScript 教程 | 菜鸟教程

了不起的 TypeScript 入门教程

一、TypeScript

TypeScript 是 JavaScript 的一个超集，一种给 JavaScript 添加特性的语言扩展。TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，可通过npm和yarn安装，通常我们使用.ts作为 TypeScript 代码文件的扩展名。

JavaScript	TypeScript
作为一种解释型语言，只能在运行时发现错误	可以在编译期间发现并纠正错误
弱类型，没有静态类型选项	强类型，支持静态和动态类型
不支持模块，泛型或接口	支持模块、泛型和接口
不支持编译其他 ES3，ES4，ES5 或 ES6 功能	支持 ES3，ES4，ES5 和 ES6 等

实例:

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

// npm 安装TypeScript
npm install -g typescript
// tsc app.ts:执行命令将 TypeScript 转换为 JavaScript 代码
tsc app.ts

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

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

1、基础类型:

类型关键字	描述	举例
任意类型 any	可赋予任意类型的值
数字number	双精度 64 位浮点值，用来表示整数和分数	let decLiteral: number = 6
字符串 string	单引号（'）、双引号（"）、反引号（`）、${}	let name: string = "Runoob"
布尔类 boolean	true、false	let flag: boolean = true
数组类	元素类型后面加上[]、使用数组泛型	let arr: number[] = [1, 2]、let arr: Array = [1, 2];
元组	用来表示已知元素数量和类型的数组，各元素的类型不必相同	let x: [string, number];x = ['Runoob', 1];
枚举enum	用于定义数值集合	enum Color {Red, Green, Blue};let c: Color = Color.Blue;console.log(c); // 输出 2
void	用于标识方法返回值的类型，表示该方法没有返回值	function hello(): void {}
null	表示对象值缺失
undefined	用于初始化变量为一个未定义的值
never	never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值

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

1、Any 和 Unknown

Any ：针对编程时类型不明确的变量使用的一种数据类型，任何类型都可以被归为 any 类型（全局超级类型）；本质上是类型系统的一个逃逸舱，而无需事先执行任何形式的检查。

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

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

Unknown：同Any，所有类型也都可以赋值给 unknown；但unknown 类型只能被赋值给 any 类型和 unknown 类型本身。

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）

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

var str = '1' 
var str2:number = <number> <any> str   //此时str2 是 string 类型

// “尖括号” 语法
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;

当 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;
}());