TypeScript 安装、基础使用与自动编译完整指南

1. 初识 TypeScript

此前文章已介绍过 TypeScript 的安装、使用及自动编译方法，感兴趣者可查阅往期内容。

TypeScript 简介

TypeScript 是由微软开发的开源、跨平台编程语言，作为 JavaScript 的超集，最终会被编译为 JavaScript 代码执行。

微软于 2012 年 10 月发布首个公开版本，历经一个预览版后，于 2013 年 6 月 19 日正式发布 TypeScript 正式版。

TypeScript 由 C# 首席架构师安德斯·海尔斯伯格开发，是一款开源且跨平台的编程语言。

TypeScript 扩展了 JavaScript 的语法，因此任何现有的 JavaScript 程序均可在 TypeScript 环境中运行。

TypeScript 专为大型应用开发设计，并可编译为 JavaScript。

TypeScript 是 JavaScript 的超集，主要提供类型系统和对 ES6+ 的支持，由 Microsoft 开发，代码在 GitHub 上开源。

TypeScript 是 JavaScript 的超集，主要提供类型系统和对 ES6+ 的支持，由 Microsoft 开发，代码在 GitHub (opens new window)上开源。

TypeScript 特点

TypeScript 主要具备三大特点：

源于 JavaScript，回归 JavaScript TypeScript 可编译出纯净、简洁的 JavaScript 代码，并可在任何浏览器、Node.js 环境或支持 ECMAScript 3（及更高版本）的 JavaScript 引擎中运行。

强大的类型系统 类型系统允许 JavaScript 开发者在开发应用程序时使用高效的开发工具和常用操作，例如静态检查和代码重构。

先进的 JavaScript TypeScript 提供最新的和不断发展的 JavaScript 特性，包括来自 2015 年 ECMAScript 和未来提案（如异步功能和 Decorators）的特性，以协助构建健壮的组件。

总结

TypeScript 在社区中的流行度日益提升，它非常适合大型项目以及基础库的开发，能显著提升开发效率和体验。

2. 安装 TypeScript

在命令行中执行以下命令，进行 TypeScript 的全局安装：

npm install -g typescript

安装完成后，在控制台运行以下命令以验证安装是否成功（适用于 3.x 版本）：

tsc -V

3. 第一个 TypeScript 程序

编写 TS 程序

src/helloworld.ts

//str这个参数是string类型的
 function aa(str:string){
        return "你好啊" + str
    }
    let text='小可爱'
    console.log(aa(text))

src/index.html

//直接引入了ts的文件，浏览器是会报错的（如果ts文件中只有单词的js的语法，是可以正常引入及使用的）
  <script src="./helloworld.ts"></script>

手动编译代码

虽然使用了 .ts 扩展名，但该段代码本质上仍是 JavaScript。

在终端中运行 TypeScript 编译器：

tsc helloworld.ts

输出结果为一个 helloworld.js 文件，其中包含与输入文件中相同的 JavaScript 代码。

在终端中，通过 Node.js 运行这段代码：

node helloworld.js

修改 src/index.html

<script src="./helloworld.js"></script>

控制台输出：

Hello, Yee

接下来查看 helloworld.js 中的代码

 function aa(str) {
        return "你好啊" + str;
    }
    var text = '小可爱';
    console.log(aa(text));

总结

• 若 ts 文件中仅书写 js 语法的代码，则可在 html 文件中直接引入 ts 文件，在谷歌浏览器中可直接使用。
• 如果 ts 文件中包含 ts 特有的语法代码，则需要将该 ts 文件编译为 js 文件，并在 html 文件中引用 js 文件来使用。
• ts 文件函数中的形参若使用了类型修饰，最终编译生成的 js 文件中将不包含该类型信息。
• ts 文件中使用 let 修饰的变量，在编译生成的 js 文件中修饰符会变为 var。

vscode 自动编译

1). 生成配置文件 tsconfig.json

步骤： 新建文件夹，打开终端，输入命令，系统将自动生成 tsconfig.json 配置文件。

tsc --init

2). 打开该文件并修改 tsconfig.json 配置

 "outDir": "./js",
    "strict": false,

3). 启动监视任务：

终端 -> 运行任务 -> 显示所有任务 -> 监视 tsconfig.json

再次修改并保存代码后，系统将自动生成对应的 js 文件。

以上即为 TypeScript 安装、使用及自动编译教程的详细内容，更多关于 TypeScript 安装使用自动编译的资料请关注本站其它相关文章！