typescript 静态分析-TypeScript 创建一个简单的 Web 应用程序

bendan520 typescript

2023-08-23 0 920 百度已收录

立即下单

进入商城

进不了网站？换个网络试试！

TypeScript 创建一个简单的 Web 应用程序

安装 TypeScript

获取以下形式的 TypeScript 工具：

通过 npm（Node.js 包管理器）

npm install -g typescript

构建您的第一个 TypeScript 文件

创建项目文件夹

mkdir typescript_demo && cd typescript_demo

创建文件greeter.ts

touch greeter.ts

将以下代码写入greeter.ts

function greeter(person) {
    return "Hello, " + person;
}
let user = "Durban Zhang";
document.body.innerHTML = greeter(user);

编译代码

这里使用了 .ts 扩展名，但这段代码只是 JavaScript。您可以直接从现有 JavaScript 应用程序复制/粘贴此代码。

在命令行上运行 TypeScript 编译器：

tsc greeter.ts

输出是一个greeter.js 文件，其中包含与输入文件相同的JavsScript 代码。

一切准备就绪，我们可以运行这个用 TypeScript 编写的 JavaScript 应用程序了！

让我们看一下 TypeScript 工具带来的中级功能。

在person函数的参数上添加：string类型注解，如下：

function greeter(person:string) {
    return "Hello, " + person;
}
let user = "Durban Zhang";
document.body.innerHTML = greeter(user);

类型注释

TypeScript 中的类型注释是向函数或变量添加约束的轻量级形式。

在本例中，我们希望greeter 函数接受一个字符串参数。

然后尝试更改对greeter的调用以传递字段：

function greeter(person:string) {
    return "Hello, " + person;
}
let user = "Durban Zhang";
document.body.innerHTML = greeter(user);

重新编译，你会看到如下的错误。

greeter.ts:7:35 - error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.
7 document.body.innerHTML = greeter(user);

同样typescript 静态分析，尝试删除greeter 调用的所有参数。

TypeScript 会告诉您该函数是使用意外数量的参数调用的。

在这两种情况下，TypeScript 都提供静态代码分析，可以剖析代码结构并提供类型注释。

请注意，尽管出现错误，但还是创建了greeter.js 文件。即使代码中有错误typescript 静态分析，您也可以随时使用 TypeScript。但在这些情况下，TypeScript 会警告您代码可能无法按预期执行。

界面

这里我们使用套接字来描述一个具有firstName 和lastName 数组的对象。在 TypeScript 中，只有当两种类型的内部结构兼容时，它们才是兼容的。

这使得我们可以确保在实现套接字时包含套接字所需的结构，而无需显式使用implements语句。

interface Person {
    firstName: string;
    lastName: string;
}
function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}
let user = { firstName: "Durban", lastName: "Zhang" };
document.body.innerHTML = greeter(user);

种类

最后，让我们使用类重写这个示例。 TypeScript 支持 JavaScript 的新功能，例如支持基于类的面向对象编程。

让我们创建一个带有构造函数和一些公共数组的 Student 类。请注意，类和套接字可以一起工作，并且程序员可以决定表示的级别。另请注意，在构造函数参数上使用 public 相当于创建同名的成员变量。

class Student {
    fullName:string;
    constructor (
        public firstName: string,
        public middleName: string,
        public lastName: string) {
        this.fullName = firstName + " " + middleName + " " + lastName;
        
    }
}
interface Person {
    firstName: string;
    lastName: string;
}
function greeter(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}
let user = new Student("Durban", "M.", "Zhang");
document.body.innerHTML = greeter(user);

重新运行 tscgreeter.ts，您将看到生成的 JavaScript 代码与之前相同。 TypeScript 中的类只是 JavaScript 中常用的基于原型的面向对象编程的缩写。

运行 TypeScript Web 应用程序

创建greeter.html并在其中输入以下内容：