Installing & Using TypeScript
来自 Maximilian Schwarzmüller 的免费视频教程
AWS certified, Professional Web Developer and Instructor
70 门课程
3795501 名学生
讲座描述
Time to get started! Learn how to install TypeScript globally on your system and how to use it in your first little demo project.
通过完整课程学习更多知识
Understanding TypeScript
Boost your JavaScript projects with TypeScript: Learn all about core types, generics, TypeScript + React or Node & more!
22:19:42的随选视频 • 更新于 April 2026
Use TypeScript and its Features like Types, ES6 Support, Classes, Modules, Interfaces and much more in any of their Projects
Understand what TypeScript really is about and how it works
Why TypeScript offers a real advantage over vanilla JavaScript
Learn about basic and advanced features (e.g., "infer", "as const", "satisfies" & much more!)
Explore Classes, Interfaces, Generic Types, Derived Types & Other Crucial Concepts
Learn TypeScript both in theory as well as applied to real use-cases and projects
Learn how to combine TypeScript with ReactJS or NodeJS / Express
简体中文 [自动]
讲师:所以, TypeScript 可以帮助你更早地发现错误。 然而, TypeScript 有一个很大的缺点, 那就是这些代码, 这些存储在 .NET Framework 中的 TypeScript 代码, 可能会在运行时出现问题。 ts 文件无法在浏览器中运行。 您可以在项目中编写 TypeScript 代码, 但不能在浏览器中这样运行。 现在, 如果你是为 Node.NET 开发后台, 情况就不同了。 js, 因为有些工具和运行时确实可以让您运行 TypeScript 代码, 而无需任何额外的构建步骤。 但在浏览器中运行时, 却无法正常工作。 相反, 像这样的 TypeScript 代码要想在浏览器中运行, 需要对其进行编译。 您需要将此代码从 TypeScript 代码转换为纯 JavaScript 代码。 需要一个编译步骤。 因此, TypeScript 不仅仅是编写 TypeScript 代码, 还需要编译 TypeScript 代码。 这就是为什么官方文档页面也有一个下载区, 在那里可以找到如何下载 TypeScript 编译器的说明, 这是一个将 TypeScript 代码转换为 JavaScript 代码的工具。 现在, 您只需按照本页面上的说明进行操作即可。 我将按照这条指令在系统中全局安装 TypeScript。 或者准确地说, 在我的系统中全局安装 TypeScript 编译器, 这样我就可以在任何项目中使用它。 在课程的稍后部分, 我还将向你展示如何将 TypeScript 添加到单个项目中, 以及如何在更一般的项目构建过程中实施这一编译步骤。 不过, 目前我们还是把重点放在这种全球方法上。 现在, 这种方法使用 npm 将 TypeScript 作为全局工具安装到系统中。 npm 是与 Node 配套的软件包管理器。 js. 因此, 您应该访问 nodejs。 org, 并从那里下载最新的 LTS 版本的 Node。 js, 因为这将包括这个软件包管理器、 这个 npm 工具。 一旦您安装了 Node.NET Framework, 您就可以使用 Node.NET Framework 的所有功能。 js 和 npm, 你可以在系统命令提示符或终端中运行这条命令, 在系统中全局安装 TypeScript。 在 Mac OS 上, 我打开了终端, 然后运行 npm install -g 在全局范围内安装 typescript。 在 Windows 系统中, 命令完全相同, 只需使用默认的命令提示符运行即可。 现在, 您需要确保 Node. 在 Mac OS analytics 上, 可能需要在该命令前添加 sudo, 以赋予其正确的权限。 在 Windows 系统中, 如果没有 sudo, 可能会出现权限错误, 这将不起作用, 也不需要。 现在, 系统可能会提示你输入密码, 但随后就会继续安装 TypeScript, 准确地说, 是将 TypeScript 编译器安装到你的系统上。 安装后, 你就可以进入使用 TypeScript 的项目, 打开系统终端。 你可以使用集成在代码编辑器中的终端, 就像我在这里使用集成在 Visual Studio Code 中的终端一样;也可以使用编辑器之外的默认命令提示符或终端, 然后通过 CD 命令导航到项目文件夹。 无论如何, 你都必须确保已打开终端, 并将其导航至此项目文件夹, 这样就可以在其中开始此计算器的编译过程。 ts文件, 然后是包含待编译代码的 TypeScript 文件的文件名。 tsc 是一个可用的命令, 因为你现在全局安装了 TypeScript。 这将调用 TypeScript 编译器, 并生成一个计算器。 js 文件。 如果你检查这个文件, 并将它与 TypeScript 文件进行比较, 你会发现代码几乎是一样的, 只有一些小的改动。 最重要的是, TypeScript 的这些特性, 比如这里的显式类型赋值, 已经被移除, 因为那是非标准的 JavaScript 代码。 这不是能在浏览器或其他 JavaScript 环境中运行的代码。 然后将这个编译过的 JavaScript 文件导入到 HTML 文件中。 例如, 由于该文件现在确实包含可执行代码。 顺便说一下, 如果你的 TypeScript 代码中出现了错误。 例如, 如果删除这里的加号, 你就不会在集成开发环境中只看到警告和错误, 这非常方便, 因为这可以帮助你及早发现错误。 相反, 如果保存此文件, 尝试编译此 TypeScript 文件时也会出现错误。 那么您在这里也会收到这样的错误信息。 不过, 由于您也可以在编辑器中获得这些信息, 因此通常情况下, 您甚至无需启动编译过程就可以发现并解决这些问题, 非常方便。 但就是这样, 你才能编译并在没有内置 TypeScript 支持的环境中运行 TypeScript 代码。 如前所述, 稍后我还将向你展示如何为由多个 TypeScript 文件组成的更复杂的项目自动执行这一编译步骤, 因为你不想一步一步、 一个文件一个文件地手动编译这些文件。 但我们稍后再去。