好,欢迎回来,在本课中, 我们将引导您完成安装TypeScript的过程 在你的项目中 并确保其他一切 您可能想正确使用运行。 如您所知, 如果您看过我的其他任何视频, 我是Visual Studio的用户, 所以我要用它来设置。 这样,我将创建一个全新的项目 它将是一个ASP.NET Core Web应用程序。 我给它起个名字 我将在这里使用MVC模板, 未配置HTTPS。 我正在使用Core 3.1。 这应该可以在任何其他版本中使用 您正在使用Core。 我想做的第一件事 能够使用TypeScript 我要把那个包裹加进去, 所以我要用NuGet来做 和类似的,这是Microsoft版本 节点程序包管理器。 我需要这个包裹 将我的TypeScript内置到JavaScript中。 所以我只是将其添加到项目中。 还有任何依赖关系 就像npm一样,任何依赖项都应该安装 同时。 接下来要做的一件事 我要添加TypeScript配置文件。 所以我可以在Visual Studio中做到这一点 只需执行"添加新项"即可。 我想在这里寻找TypeScript, 搜索它,这样我就不必走遍整个地方。 好了 Tsconfig.json。 因此,您可以将其保留为该名称。 现在,您将获得一组默认选项 当你把它放在那里 我有一组非常典型的其他选项 我喜欢做的 这是地方 您可以在其中配置方式 TypeScript编译器可以工作。 请注意,例如,在这里, 我的目标是ECMAScript 6。 我有可以理解ES2017的库 并能够操纵DOM。 最重要的是,至少 我想说我的输出目录是什么 将用于我的TypeScript文件 成为JavaScript。 因此,在这种情况下,它们位于wwwroot / js下。 所以,请确保我有。 好了 我已经有那个文件夹了。 很好,到目前为止非常好。 我也需要一个地方 我将要存储我的TypeScript脚本。 所以我要在这里添加一个名为Scripts的新文件夹。 不在wwwroot下。 这是存在之外的。 让我们在这里添加一个TypeScript文件 看看我们是否可以使某些事情起作用。 因此,TypeScript文件仅以ts结尾。 我们到了,我将其称为main.ts。 那这里会发生什么 是我们要做我们的TypeScript吗 然后每次我建立这个专案时 在Visual Studio中,每次编译时, 这将变成常规的,良好的旧JavaScript。 这样您就可以马上了解事物 有点不同。 例如,我们在这里输入内容。 我们可以说这是一个字符串 并在定义之前使用。 我在这里得到这些绿色的波浪状线条。 这就是Visual Studio的功能, 而是TypeScript在这里 将这些东西显示为错误和警告。 因此,例如,在这种情况下, 我在那里有名字 从字符串文字中推断出来的 所以我实际上并不需要 所以这会标记我这种事情。 然后在定义之前就使用了这个调用者 但我认为我们会没事的。 您可以将其视为提示。 如果这让您讨厌 您可以打开一个文件eslintrc, 并且通常会在您的用户目录中找到它, 直接在用户目录的根目录下。 你可以在那里看到 您可以更改某些选项。 因此,如果将其设置为零, 这将使它成为虚假的。 因此,一致性类型的断言。 这些只是其中的一些 我通常会改变 因为再次,它们在大多数情况下都是提示 如果你知道哪种 您在此处创建的JavaScript中, 那很好,那就更好了。 所以我应该能够 仍然以此来建立专案 因为我相信这只是一个警告。 因此,我们在这里进行构建 看看是否可行。 确实成功了,所以我应该有, 我们去了,这是我的主文件 在wwwroot中 再一次,没有必要的证据 这是来自TypeScript的。 这只是旧的常规JavaScript。 所以如果我走了,让我们进入这里 然后我将创建一个页面 让我们测试一下并确保 确实有效。 现在,其中一些功能 我们稍后再添加。 就目前而言,我所拥有的只是主要的 我将调用我的tsHello函数。 因此,这只是常规的JavaScript。 我在那里有我的脚本链接。 我叫tsHello,它最终出现在我的主JavaScript文件中。 我将能够提出来 然后单击该按钮即可看到该值 那至少应该给我们一个好主意 从这里的工作开始。 请注意,我们还没有看到任何东西, 因此,让我们检查一下我们的控制台 我们可以看到那里,好吧, 这是因为我们在页面上有一些JQuery 并且尚不支持JQuery。 因此,我们将其内置 然后我们回去,我们将做整个事情。 所以我们接下来要做的是 是添加对JQuery的支持。 我们将其添加到我们的package.json文件中 而且我们还没有 所以在Visual Studio中,我将再次执行该操作 作为添加新项目。 这就是npm配置文件在此处的列表中。 我们可以将其保留为package.json 我要在那里添加我的开发依赖项 我依赖于JQuery 我相信我使用的版本是3.5.1。 所以我要在那里添加 那应该让我 现在使用JQuery,实际上, 我想我可以添加另一个TypeScript文件。 并在该文件中实际使用JQuery。 让我们来看看,所以我们会做的 我们将其称为库。 我们就去抢 不管这里的JQuery版本是什么。 好的,所以我要在那里运行一个小功能。 再次说找不到名字 但它应该能够 等我们再建的时候 并在我们运行该页面时。 而且,我们刚刚有了任何不必要的标志。 所以我们页面上的ts-example-2 让我们回到tsHello, 只是一点点跨度 我们要坚持一些东西 我们将从这里调用该显示版本。 好吧,让我们尝试一下 看看我们是否工作。 我们会再试一次,什么也看不到。 好的,我们仍然没有定义$。 因此,请确保它确实在适当的位置。 好吧,所以我从Node模块中引用了它 而不是来自wwwroot。 所以这只是我这里的项目中的一个特殊问题。 因此,我们将其包括在内。 好了 我们将在这里再尝试一次。 现在,如果您仍然对此有疑问 和你可能遇到的麻烦 是JQuery无法识别。 您可能需要做一件事。 在我的特定情况下,我使用npm添加了JQuery。 因此,如果您运行此小语句, 这应该使支持 的JQuery仍可在您的应用程序中使用, 我会为您增加一点。 因此,如果您添加了JQuery, 如果您将其用作模板的一部分 那已经在那里 您可能不需要这个。 但是在这种情况下,我已经链接到它了 在我的页面上使用npm。 因此,应该使其起作用。 让我们打招呼,重新建立世界。 有时候,你好,世界不是那么容易,对吗? 我们将其备份 看看是否可行。 啊,现在我们有了样式表。 好了 所以我打招呼, 然后,我的JQuery版本是3.5.1。 因此,在本课程中,我们学习了如何安装JQuery 在我们的Web应用程序中。 以及如何确保我们有支持 用于第三方库。 敬请期待,在我们的下一课中, 我们将在视图中做我们的第一个功能 TypeScript的第一部分。