TypeScript 入门到精通

Posted 2022-02-16 sp42a

TypeScript 简介

TypeScript （下文简称 ts）是微软推出的 javascript （下文简称 js）的超集，ts 兼容 js，可以载入 js 代码然后运行，最终通过工具编译生成 js。

• 官方网址：http://www.typescriptlang.org/
• 中文网：http://www.tslang.cn/
• GitHub：https://github.com/Microsoft/TypeScript

为什么会有 TypeScript?

JavaScript 一如其名写的是脚本而非程序，并非设计用于开发大型 Web 应用。为了支持开发大规模浏览器前端应用， ts 在 js 上进行扩展。ts 主要特点包括：

• 相比 js 增加了可选类型、类 Class 和模块 Module，提供了强力的类型检查能力和面向对象特性1
• ts 保证编译后的 js 代码兼容性，更接近 js 语法，同时解决了很多js的问题
• 举一个不太恰当的例子，ts 就是 C++ 语言, js 就是 C语言, ams.js 是汇编语言
• 尽管 ts 是微软开发的语言，但是属于开源软件，使用 Apache 授权协议。因此 ts 也就无所谓的主机和平台，可以在 Win32/Mac/Linux 上运行。

TypeScript 最大的特点就是类型化，因此才叫做 TypeScript。比起弱类型的 js，类型化的 ts 显得更加容易维护。

TypeScript的JavaScript 兼容性不错，首先是 ts 基于 js 的语法，你可以无须修改一行 js 代码就可以放在 ts 环境中运行，也就是说已有的 js 代码可直接与 ts 一起运行无需更改，重用性强，甚至把源代码文件从js后缀改为 ts 后缀（ts 其扩展名为.ts ），就可以开始享受 ts 带来的好处了；其次是 ts 扩展了 js 的语法，但仍然最终编译成可读的、标准的 js 文件，是能够在任意浏览器、Node.js 或甚至只是兼容 EcmaScript 3 的环境上运行的；最后是对现有 js 库友好，可以调用当前流行的 js 库，方便了无数的JavaScript开发者。

总之一句话，“始于JavaScript，归于JavaScript——Starts from JavaScript, Ends with JavaScript”。

和 ECMAScript 5/6 的关系

Ts 语言是在 ECMAScript 5/6 基础上演化并吸收了生成 js 类型和接口的一些特性，因此新特性会比较快得到实现，而且最终编译成简洁的 ECMAScript3（或更新版本）的 JavaScript，因此无须考虑浏览器兼容问题。

如何获取？

可通过以下两个方法来安装 ts：

• 通过 Node.js NPM 包管理器
• 通过 Visual Studio 集成 IDE 环境

编辑器可以选择你喜欢的编辑进行 ts 开发（例如 SublimeText、Eclipse），只需要下载安装特定的 ts 插件即可。微软的 Visual Studio 提供了 ts 良好支持，但是 VS 体积实在太重了，所以推荐亦是微软旗下的 Visual Studio Code 来学习开发 ts，又因为 Ts 也是作为node.js的一个工具包发布的，所以推荐一般用户使用 Node.js 环境 + VSC。

如果是 NodeJS 环境可以直接以安装 NPM 包方式来安装 ts 编辑器。

npm install -g typescript

其中 -g 参数表示此 npm 包允许全局调用的。如果不加这个参数就调用很麻烦，建议一点加上。

要在应用中使用 ts 必须先编译，编译的结果是生成 js 文件，你可通过 ts 编译器 tsc 命令来完成这个过程。如要编译 test.ts()，可用如下命令：

tsc test.ts

编译完成后就会在当前目录生成名为 test.js 的文件。

如何编译 TypeScript

要在应用中使用 TypeScript 必须先编译，编译的结果是生成 js 文件，你可通过编译器 tsc 来完成这个过程。如果你在 Visual Studio 2012 中使用 TypeScript，它会自动将 ts 文件编译成 js 文件。

TypeScript 编译器模板被安装在如下路径：

C:\\Program Files (x86)\\Microsoft SDKs\\TypeScript\\0.8.0.0

或者是：

C:\\Program Files\\Microsoft SDKs\\TypeScript\\0.8.0.0

要编译 TypeScript 文件，可使用如下命令：

tsc filename.ts

一旦编译成功，就会在相同目录下生成一个同名 js 文件，你也可以通过命令参数来修改默认的输出名称。.

class Person 
    name: string;
    constructor(message: string) 
        this.name = message;
    
    getName() 
        return console.log("Hello, " + this.name);
    

var hello = new Person("World !");
hello.getName();