章节索引 :

TypeScript

TypeScript 是 JavaScript 的超集。
TypeScript 是 JavaScript 类型的超集,它可以编译成纯 JavaScript。
TypeScript 可以在任何浏览器、任何计算机和任何操作系统上运行,并且是开源的。

TypeScript 包含了 JavaScript 所有的特性,同时做出了扩展,实现了许多还处于提案的或非 ECMAScript 的内容。(以下对 TypeScript 简称为 TS)。

除了实现 ES 的标准外,TS 最主要的就是加入了类型,通过提供静态类型,这个特性在使得代码变得更健壮外,也可以让 IDE 或者编辑器更容易推导出类型。

1. 安装 TypeScript

TS 可以使用 npm 安装。

首先在空目录初始化一个 package.json

npm init -y

npm i typescirpt -D

图片描述

由于 TS 也是在开发过程中才会使用,上线前都会编译成 JavaScript,所以作为开发环境下的依赖。

然后修改 package.jsonscripts 配置项:

// package.json
"scripts": {
  "ts": "tsc ./index.ts"
}

tsc ./index.ts 命令回去当前目录下找到 index.ts 文件,并编译成 .js 文件

2. 使用 TS

首先创建一个 index.ts

const PI: number = 3.1415926535;

这是一个数字类型常量,通过 npm run ts 进行编译:

npm run ts

这样就把 .ts 文件变成了可以运行在浏览器的 .js 文件。

类型是 TS 最重要的特性之一,特别是在开发过程中,这一特性会帮助开发工具进行类型推断:

图片描述

3. 配置文件

TS 提供了一套配置来描述编译行为,如编译到哪个标准的代码,排除哪些代码不编译,是否开启某些规则,如不允许隐式的出现 any 等。

官方对配置文件进行了详细说明,通常也会采用配置文件的形式来使用。

4. 小结

TypeScript 可以说是现阶段前端的必备技能,许多开源框架也采用 TypeScript 来编写,如 AngularVue 等。

TypeScript 不单单提供了静态类型,还扩充了 的能力,提供了非常多的特性,具体内容可以参阅TypeScript Wiki,相信看完会有更多收获。

前置知识
什么是JavaScript 开发与学习环境准备 调试方案
基础
JavaScript 变量 JavaScript 数据类型 JavaScript if 语句 JavaScript for 语句 JavaScript 算数运算符 JavaScript 比较运算符 JavaScript 逻辑运算符 JavaScript 表达式 JavaScript 函数 JavaScript 对象 JavaScript 字符串 JavaScript 数字 JavaScript 数组 JavaScript switch 语句 JavaScript while 语句 JavaScript break与continue JavaScript with document.cookie
内置对象
JavaScript Function JavaScript Math JavaScript Date JavaScript RegExp JavaScript JSON
JavaScript 与 DOM
什么是DOM DOM和JavaScript的关系 获取和操作 DOM 节点 JavaScript DOM与事件 JavaScript DOM 事件绑定 JavaScript DOM 事件对象 JavaScript DOM 事件流 JavaScript DOM 事件优化 JavaScript DOM 自定义事件
表单处理
使用 JavaScript 校验表单
BOM
BOM window 对象 常用的 BOM 相关对象 BOM 常用属性和方法
AJAX
JavaScript AJAX
进阶知识
JavaScript 异常处理 JavaScript 三元运算符 JavaScript 逗号操作符 JavaScript void JavaScript typeof JavaScript delete JavaScript debugger JavaScript getter &setter JavaScript 原型 JavaScript new操作符和构造函数 JavaScript instanceof JavaScript this JavaScript 严格模式 JavaScript 作用域 JavaScript 闭包 JavaScript 变量提升 JavaScript 对象包装器
常用库
jQuery Lodash moment.js swiper
进阶指南
ECMAScript6 Node.js Babel CSS 预处理器 代码规范 TypeScript Web Components 小程序 Vue / React / Angular JavaScript 关键字
常见疑点与误区
分号问题 对象属性访问问题 this 使用问题 浮点数精度问题 独一无二的 NaN 避免全局污染 控制台观察对象问题 根据环境选择语言特性
扩展
相关资源