TypeScript学习记录

TypeScript

• 是 JS 的一个超集，并支持 ESC6 标准
• 微软开发，自由开源
• TS 设计目标是开发大型项目用，可编译为纯 JS ，并可运行在任何浏览器上

语言特性：TypeScript 是一种给 JavaScript 添加特性的语言扩展。增加的功能包括：

• 类型批注和编译时类型检查
• 类型推断
• 类型擦除
• 接口
• 枚举
• Mixin
• 泛型编程
• 名字空间
• 元组
• Await

以下功能是从 ECMA 2015 反向移植而来：

• 类
• 模块
• lambda
• 函数的箭头语法
• 可选参数以及默认参数

TS 与 JS 区别：TS 是 JS 超集，扩展了 JS 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。

实例：

const hello : string = "Hello World"
console.log(hello)

TypeScript 安装

npm安装：

npm install -g typescript

查看版本号：

$ tsc -v
Version 3.2.2

TypeScript 基础语法

TS 由 模块、函数、变量、语句和表达式、注释 组成
新建一个 good.ts 文件，代码如下

var message: string = "hello world"
console.log(message)

TS 文件扩展名为 .ts，TS 转换 JS 命名为

tsc good.ts

此时与 good.ts 同一目录会生成一个 good.js 文件，代码如下

var message: "hello world";
console.log(message);

再使用 node 命令执行 good.js 文件

$ node good.js
hello world

同时编译多个文件

tsc file1.ts file2.ts file3.ts

转换过程入图所示：

tsc 常用参数

1. –help 显示帮助信息
2. –module 载入扩展模块
3. –target 设置 ECMA 版本
4. –declaration 额外生成一个 .d.ts 扩展名的文件，以下命令会生成 ts-hw.d.ts、ts-hw.js 两个文件。

tsc ts-hw.ts --declaration

5. –removeComments 删除文件的注释
6. –out 编译多个文件并合并到一个输出的文件
7. –sourcemap 生成一个 sourcemap (.map) 文件。用来存储源代码与编译代码对应位置映射的信息文件
8. –module noImplicitAny 在表达式和声明上有隐含的 any 类型时报错
9. –watch 在监视模式下运行编译器。会监视输出文件，在它们改变时重新编译。

TypeScript 保留关键字

空白和换行

TypeScript 会忽略程序中出现的空格、制表符和换行符。空格、制表符通常用来缩进代码，使代码易于阅读和理解。

TypeScript 区分大小写
TypeScript 区分大写和小写字符。

分号是可选的
每行指令都是一段语句，你可以使用分号或不使用， 分号在 TypeScript 中是可选的，建议使用。
以下代码都是合法的：

console.log("Runoob")
console.log("Google");

如果语句写在同一行则一定需要使用分号来分隔，否则会报错.

TypeScript 支持两种类型的注释
单行注释 ( // ) − 在 // 后面的文字都是注释内容。
多行注释 (/* */) − 这种注释可以跨越多行

TypeScript 与面向对象
TypeScript 是一种面向对象的编程语言。主要有两个概念：对象 和 类

• 对象：对象是类的一个实例，有状态和行为。例如：一个冰箱是一个对象，他状态有：颜色，型号，大小，行为有：通电与断电
• 类：类是一个模板，是描述一类对象的行为和状态
• 方法：方法是类的操作的实现步骤

TypeScript 面向对象编程实例：

class Site {
   
	name():void {
   
		console.log("Runoob")
	}
}
var obj = new Site ();
obj.name();

以上实例定义了一个类 Site，该类有一个方法 name()，该方法在终端上输出字符串 Runoob。new 关键字创建类的对象，该对象调用方法 name()。编译后生成的 JavaScript 代码如下：

var Site = /** @class */ (function () {
   
    function Site() {
   
    }
    Site.prototype.name = function () {
   
        console.log("Runoob");
    };
    return Site;
}());
var obj = new Site();
obj.name();

输出结果为 ：Runoob

TypeScript 基础类型

数据类型	关键字	描述
任意类型	any	声明为 any 的变量可以赋予任意类型的值。
数字类型	number	双精度 64 位浮点值。它可以用来表示整数和分数。
字符串类型	string	一个字符系列，使用单引号（’）或双引号（"）来表示字符串类型。反引号（`）来定义多行文本和内嵌表达式。
布尔类型	boolean	表示逻辑值：true 和 false。
数组类型	/	声明变量为数组。
元组	/	元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同。
枚举	enum	枚举类型用于定义数值集合。
void	void	用于标识方法返回值的类型，表示该方法没有返回值。
null	null	表示对象值缺失。
undefined	undefined	用于初始化变量为一个未定义的值
never	never	never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。

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

Any 类型
任意值是 TS 针对编程时类型不明确的变量使用的一种数据类型，常用于以下三种情况

1、变量的值会动态改变时，比如来自用户的输入，任意值类型可以让这些变量跳过编译阶段的类型检查，示例代码如下：

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

2、改写现有代码时，任意值允许在编译时可选择地包含或移除类型检查，示例代码如下：

let x: any = 4;
x.ifItExists();    // 正确，ifItExists方法在运行时可能存在，但这里并不会检查
x.toFixed();    // 正确

3、定义存储各种类型数据的数组时，示例代码如下：

let arrayList: any[] = [1, false, 'fine'];
arrayList[1] = 100;

Null 和 Undefined
null
是一个只有一个值的特殊类型，表示一个空对象引用。使用 typeof 检测 null 返回时 object
undefined
是一个没有设置值的变量，typeof 一个没有值的变量会返回 undefined。
这两者是其他任何类型的子类型，可以赋值给其他类型。赋值后类型变为 null 或者 undefined。而在 TS 中启用严格的空校验（–strictNullChecks）特性，就可以使得null 和 undefined 只能被赋值给 void 或本身对应的类型，示例代码如下：

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

上面的例子中变量 x 只能是数字类型。如果一个类型可能出现 null 或 undefined， 可以用 | 来支持多种类型，示例代码如下：

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

never 类型
never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。这意味着声明为 never 类型的变量只能被 never 类型所赋值，在函数中它通常表现为抛出异常或无法执行到终止点（例如无限循环），示例代码如下：

let x: never;
let y: number;

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

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

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