TypeScript入门
目录
一：语言特性
二：TypeScript安装
NPM 安装 TypeScript
三：TypeScript基础语法
第一个 TypeScript 程序
四：TypeScript 保留关键字
空白和换行
TypeScript 区分大小写
TypeScript 注释
TypeScript 支持两种类型的注释
五：TypeScript与面向对象
六：TypeScript基础类型
Any 类型
Null 和 Undefined
null
undefined
never 类型
一：语言特性
TypeScript是一种给JavaScript添加特性的语言扩展。增加了以下功能：
- 类型批注和编译时类型检查
- 类型推断
- 类型擦除
- 接口
- 枚举
- Mixin
- 泛型编程
- 名字空间
- 元组
- Await
JavaScript与TypeScript的区别
TypeScript是JavaScript的超集，扩展了JavaScript的语法，因此现有的JavaScript代码可与TypeScript一起工作无需任何修改，TypeScript通过类型注解提供了编译时的静态类型检查。
TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。
二：TypeScript安装
我们需要使用到 npm 工具安装，如果你还不了解 npm，可以参考我们的NPM 使用介绍。
NPM 安装 TypeScript
如果你的本地环境已经安装了 npm 工具，可以使用以下命令来安装。
使用国内镜像：
http://npm config set registry https://registry.npmmirror.com
安装 typescript：
npm install -g typescript
安装完成后我们可以使用 tsc 命令来执行 TypeScript 的相关代码，以下是查看版本号：
$ tsc -v
Version 3.2.2
通常我们使用 .ts 作为 TypeScript 代码文件的扩展名。
然后执行以下命令将 TypeScript 转换为 JavaScript 代码：
tsc app.ts
TypeScript 转换为 JavaScript 过程如下图：
很多 IDE 都有支持 TypeScript 插件，如：Visual Studio，Sublime Text 2，WebStorm / PHPStorm，Eclipse 等。
本章节主要介绍 Visual Studio Code，Visual Studio Code 是一个可以运行于 Mac OS X、Windows 和 Linux 之上的，针对于编写现代 Web 和云应用的跨平台源代码编辑器，由 Microsoft 公司开发。
三：TypeScript基础语法
TypeScript程序由以下几个部分组成：
- 模块
- 函数
- 变量
- 语法和表达式
- 注释
第一个 TypeScript 程序
我们可以使用以下 TypeScript 程序来输出 "Hello World" ：
const hello :string ="Hello World!"
console.log(hello)以上代码首先通过 tsc 命令编译：
tsc Runoob.ts
整个流程如下图所示：
我们可以同时编译多个 ts 文件：
tsc file1.ts file2.ts file3.ts
tsc 常用编译参数如下表所示：
| 序号 | 编译参数说明 |
|---|---|
| 1. | --help 显示帮助信息 |
| 2. | --module 载入扩展模块 |
| 3. | --target 设置 ECMA 版本 |
| 4. | --declaration 额外生成一个 .d.ts 扩展名的文件。 tsc ts-hw.ts --declaration 以上命令会生成 ts-hw.d.ts、ts-hw.js 两个文件。 |
| 5. | --removeComments 删除文件的注释 |
| 6. | --out 编译多个文件并合并到一个输出的文件 |
| 7. | --sourcemap 生成一个 sourcemap (.map) 文件。 sourcemap 是一个存储源代码与编译代码对应位置映射的信息文件。 |
| 8. | --module noImplicitAny 在表达式和声明上有隐含的 any 类型时报错 |
| 9. | --watch 在监视模式下运行编译器。会监视输出文件，在它们改变时重新编译。 |
四：TypeScript 保留关键字
TypeScript 保留关键字如下表所示：
| break | as | catch | switch |
| case | if | throw | else |
| var | number | string | get |
| module | type | instanceof | typeof |
| public | private | enum | export |
| finally | for | while | void |
| null | super | this | new |
| in | return | true | false |
| any | extends | static | let |
| package | implements | interface | function |
| do | try | yield | const |
| continue |
空白和换行
TypeScript会忽略程序中出现的空格，制表符和换行符。
空格，制表图通常用来缩进代码，使代码易于阅读和理解。
TypeScript 区分大小写
TypeScript是区分大小写字符的
TypeScript 注释
注释是一个良好的习惯，虽然很多程序员讨厌注释，但还是建议你在每段代码写上文字说明。
注释可以提高程序的可读性。
注释可以包含有关程序一些信息，如代码的作者，有关函数的说明等。
编译器会忽略注释。
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= (function(){
function Site(){
}
Site.prototype.name= function(){
console.log("Runoob");
}
return Site;
}());
var obj =new Site();
obj.name();六：TypeScript基础类型
| 数据类型 | 关键字 | 描述 |
|---|---|---|
| 任意类型 | any | 声明为 any 的变量可以赋予任意类型的值。 |
| 数字类型 | number | 双精度 64 位浮点值。它可以用来表示整数和分数。 let binaryLiteral: number = 0b1010; // 二进制 let octalLiteral: number = 0o744; // 八进制 let decLiteral: number = 6; // 十进制 let hexLiteral: number = 0xf00d; // 十六进制 |
| 字符串类型 | string | 一个字符系列，使用单引号（'）或双引号（"）来表示字符串类型。反引号（`）来定义多行文本和内嵌表达式。 let name: string = "Runoob";
let years: number = 5;
let words: string = `您好，今年是 ${ name } 发布 ${ years + 1} 周年`; |
| 布尔类型 | boolean | 表示逻辑值：true 和 false。 let flag: boolean = true; |
| 数组类型 | 无 | 声明变量为数组。 // 在元素类型后面加上[] let arr: number[] = [1, 2]; // 或者使用数组泛型 let arr: Array |
| 元组 | 无 | 元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同。 let x: [string, number]; x = ['Runoob', 1]; // 运行正常 x = [1, 'Runoob']; // 报错 console.log(x[0]); // 输出 Runoob |
| 枚举 | enum | 枚举类型用于定义数值集合。 enum Color {Red, Green, Blue};
let c: Color = Color.Blue;
console.log(c); // 输出 2 |
| void | void | 用于标识方法返回值的类型，表示该方法没有返回值。 function hello(): void {
alert("Hello Runoob");
} |
| null | null | 表示对象值缺失。 |
| undefined | undefined | 用于初始化变量为一个未定义的值 |
| never | never | never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。 |
注意：TypeScript 和 JavaScript 没有整数类型。
Any 类型
任意值是TypeScript针对编程时类型不明确的变量使用的一种数据类型，它常用于以下三种情况。
1.变量的值会动态改变时，比如来自用户的输入，任意值类型可以让这些变量跳过编译阶段的类型检查，示例代码如下：
let x: any = 1; // 数字类型
x = 'I am who I am'; // 字符串类型
x = false; // 布尔类型改写现有代码时，任意值允许在编译可选择地包含或移除类型检查，示例代码如下：
let x:any =4;
x.ifItExists();//正确，ifItExists方法在运行时可能存在，但这里并不会检查
x.toFixed(); //正确定义存储各种类型数据的数组时，示例代码如下：
let arrayList:any[] =[1,false,'fine'];
arrayList[1]=100;Null 和 Undefined
null
在JavaScript中null表示“什么都没有”。
null值是一个只有一个值的特殊类型。表示一个空对象引用。
用typeof检测null返回的是object
undefined
在JavaScript中，undefined是一个没有设置值的变量。
typeof一个没有值的变量会返回undefined。
Null和Undefined是其他任何类型（包括void）的子类型，可以赋值给其他类型，如数字类型
，此时，赋值后的类型会变成null或undefined。而在TypeScript中启用严格的空校验（--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;//编译正确更多内容可以查看：JavaScript typeof, null, 和 undefined
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')})();
// 返回值为 never 的函数可以是抛出异常的情况
function error(message: string): never {
throw new Error(message);
}
// 返回值为 never 的函数可以是无法被执行到的终止点的情况
function loop(): never {
while (true) {}
}
本文参考了有关TypeScript相关文章