⑴TypeScript是一个绿色安全免费开源的用于应用程序级JavaScript的语言程序,TypeScript通过添加类型来扩展JavaScript,可通过对JavaScript的理解节省用户在运行代码之前捕捉错误和提供修复的时间,该源码程序支持任何浏览器任何操作系统进行使用,可以在任意程序编程软件上的JavaScript进行运行;TypeScript经常作为一种用于浏览器的简单脚本语言,该程序源码兼容性强内置多种特色代码程序,可以有效减少用户对代码的编写,从而提高用户代码的编写效率,非常方便实用,有需要的用户可以自行下载使用。
⑵接口能够描述JavaScript对象可以采用的各种形状。除了使用属性描述对象外,接口还可以描述函数类型。
⑶为了描述带有接口的函数类型,我们给接口一个调用签名。这就像只声明参数列表和返回类型的函数声明。参数列表中的每个参数都需要名称和类型。
⑷定义后,我们可以像使用其他接口一样使用此函数类型的接口。在这里,我们展示了如何创建函数类型的变量并为其分配相同类型的函数值。
⑸为使函数类型正确键入检查,参数名称不需要匹配。例如,我们可以这样编写上面的示例:
⑹一次检查一个功能参数,每个对应参数位置的类型相互检查。如果您根本不想指定类型,那么TypeScript的上下文类型可以推断参数类型,因为函数值直接分配给type变量SearchFunc。同样,在这里,函数表达式的返回类型也由其返回的值(此处false和true所隐含。
⑺如果函数表达式返回数字或字符串,则类型检查器将产生一个错误,指示返回类型与SearchFunc接口中描述的返回类型不匹配。
⑻与我们可以使用接口描述函数类型的方法类似,我们还可以描述可以“索引”到的类型,例如a[]或ageMap["daniel"]。可索引类型具有索引签名,该签名描述了可用于索引对象的类型以及建立索引时对应的返回类型。让我们举个例子:
⑼上面,我们有一个StringArray带有索引签名的接口。该索引签名指出,当用aStringArray索引a时number,它将返回a
⑽支持两种类型的索引签名:字符串和数字。可以同时支持两种类型的索引器,但是从数字索引器返回的类型必须是从字符串索引器返回的类型的子类型。这是因为当使用编制索引时number,JavaScript实际上会在将其string编入对象之前将其转换为。这意味着,与索引(一number是同样的事情,与索引""(一string,所以这两个要一致。
⑾最基本的数据类型是简单的true / false值,JavaScript和TypeScript将该boolean值称为值。
⑿与JavaScript中一样,TypeScript中的所有数字都是浮点值或BigIntegers。这些浮点数获取类型number,而BigIntegers获取类型bigint。除了十六进制和十进制文字,TypeScript还支持ECMAScript
⒀中引入的二进制和八进制文字。
⒁使用JavaScript为网页和服务器创建程序的另一个基本部分是使用文本数据。与其他语言一样,我们使用类型string来引用这些文本数据类型。
⒂像JavaScript一样,TypeScript允许您使用值数组。数组类型可以用以下两种方法之一编写。
⒃元组类型允许您用固定数量的元素表示数组,这些元素的类型是已知的,但不必相同。
⒄JavaScript是对标准数据类型集的有用补充enum。与C#等语言一样,枚举是一种为数字值集赋予更友好名称的方法。
⒅安装ASP. Core和TypeScript
⒆首先,如果需要,请安装ASP. Core。本快速入门指南需要Visual Studio 或。
⒇接下来,如果您的Visual Studio版本尚未具有最新的TypeScript,则可以安装它。
⒈选择新项目(Ctrl + Shift + N
⒉在项目搜索栏中搜索. Core
⒊选择ASP. Core Web应用程序,然后按“下一步”按钮
⒋为您的项目和解决方案命名。选择创建按钮后
⒌在最后一个窗口中,选择“空”模板,然后按“创建”按钮
⒍运行该应用程序,并确保它可以运行。
⒎打开依赖关系>管理NuGet软件包>浏览。搜索并安装Microsoft.AspCore.StaticFiles并Microsoft.TypeScript.MSBuild:
⒏打开Startup.cs文件并编辑Configure函数,如下所示:
⒐您可能需要重新启动VS下面的弯弯曲曲的红线UseDefaultFiles和UseStaticFiles消失。
⒑接下来,我们将添加一个新文件夹并将其命名scripts。
⒒添加TypeScript代码
⒓右键单击,scripts然后单击新建项目。然后选择TypeScript File并命名该文件app.ts
⒔将以下代码添加到app.ts文件中。
⒕配置TypeScript编译器
⒖首先,我们需要告诉TypeScript如何构建。右键单击,scripts然后单击新建项目。然后选择TypeScript配置文件并使用默认名称tsconfig.json
⒗将tsconfig.json文件内容替换为:
⒘noEmitOnError :如果报告了任何错误,请不要发出输出。
⒙noImplicitAny:在隐any式类型的表达式和声明上引发错误。
⒚sourceMap:生成相应的.map文件。
⒛target :指定ECMAScript目标版本。
①注意:"ESNext"定位最新支持
②"noImplicitAny"每当您编写新代码时,这都是一个好主意-您可以确保不要误写任何未键入的代码。"pileOnSave"使您可以轻松地在正在运行的Web应用程序中更新代码。
③我们需要设置NPM,以便可以下载JavaScript软件包。右键单击项目,然后选择“新建项目”。然后选择NPM配置文件,并使用默认名称package.json。
④在文件"devDependencies"部分中package.json,添加gulp和del
⑤保存文件后,Visual Studio应该立即开始安装gulp和del。如果没有,请右键单击package.json,然后单击“还原软件包”。
⑥在您应该npm在解决方案资源管理器中看到一个文件夹之后
⑦右键单击该项目,然后单击“新建项目”。然后选择“ JavaScript文件”并使用名称gulpfile.js
⑧第一行告诉Visual Studio在构建完成后运行任务“默认”。当您要求Visual Studio清理生成时,它还将运行“清理”任务。
⑨现在,右键单击gulpfile.js并单击Task Runner Explorer。
⑩如果未显示“默认”和“清理”任务,请刷新浏览器:
Ⅰ编写HTML页面
Ⅱ右键单击该wwwroot文件夹(如果看不到该文件夹,请尝试构建项目,然后在其中添加一个名为New
ⅢItem的项目index.html。使用以下代码index.html
Ⅳ在框上键入内容时,您应该会看到消息出现/更改!
Ⅴ在Edge中,按F,然后单击“调试器”选项卡。
Ⅵ在第一个localhost文件夹中查找,然后在scripts / app.ts中查找
Ⅶ在带有return的行上放置一个断点。
Ⅷ在框中键入内容,并确认断点命中TypeScript代码,并且检查工作正常。
Ⅸ恭喜,您已经使用TypeScript前端构建了自己的. Core项目。