关于什么是打字稿，您可以在互联网上找到很多文章。例如，如果您想学习打字稿，则GitHub是一个不错的平台。在文章“ Github上的最爱7个流行的打字稿项目”中介绍了几个好的开源项目。本文将使用TypeScript创建单个页面应用程序（SPA）示例，示例，天气查询。
要完成示例项目，您需要安装Node.js和Angular CLI（Angular的命令行接口）：
创建一个Angular项目以运行以下命令以生成一个新的Angular项目（项目名称）：
安装所有必需的软件包和Angular基本应用程序，项目结构如下：
运行应用程序：
默认情况下，该过程在端口4200上启动。您可以运行命令以指定运行端口号。
打开浏览器并输入。运行结果显示在图中，该结果表明该应用程序已启动，运行和准备。项目代码的任何修改都会自动重新启动项目。
在模块组件代码的中间，第16行显示了AppModule模块的语句。
这
创建项目时将自动生成此处的代码。
该模块仅包含一个组件
组件的内部结构是文件中主应用程序组件的内容。
这是文件中主要应用程序组件的内容：
金属数据使用修饰符附加元数据接收必要的配置对象，该对象包含Angular创建的信息，并显示了组件及其视图。
@component中的代码配置了3个选项：
组件模板位置模板是一个HTML文件，可以告诉角度如何显示组件。该属性指向名称的视图。
组件中的数据绑定数据绑定用于告诉Angular如何显示组件。在app.component.ts文件中，标题的值在类中设置为app.component.html file.data binting binting binting opp compon。可以是一个或两个或两个路。在此示例中，如果在双花括号中提到了变量，则映射为一个 - 路。该值从类传递到HTML文件。
自定义组件和路由基本应用程序具有模块，组件，类，模板，元数据和数据绑定 - 但它仍然缺少其他4个重要部分：
接下来，将创建这些自定义组件。
执行执行后，将添加4个组件的内容：
创建路由以允许Angular在组件之间导航并需要创建路由。内容的内容已涵盖，因此HTML包含所有组件的正确菜单。
接下来，将URL路径映射到组件。在根模块的文件夹中，创建的配置文件如下。
修改内容，代码如下：
在文件中添加路由信息，如下：
再次运行应用程序：运行结果如下：
创建服务以运行以下命令来创建服务
如果您需要申请Appid，则可以访问Weather API网站申请。编码显示如下：
以下代码将被替换：
更新文件并加入这些服务：
现在，组件视图需要在外部修改HTML文件并添加这些服务的调用。
运行该应用程序以运行该应用程序，而深圳的天气是根据默认值执行的
该函数已实现，并优化了UI。在这里，我们介绍Bootstrap并将样式文件添加到根目录的文件中：
它立即变得美丽！