目录
一:语言特性
二: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<number> = [1, 2]; |
元组 | 无 | 元组类型用来表示已知元素数量和类型的数组,各元素的类型不必相同,对应位置的类型需要相同。 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相关文章