发表于: 2021-12-29 21:19:55

0 730


今天完成的事情:

看知识点
明天计划的事情:

继续看知识点

遇到的问题:

 Angular问题
收获:

最后,让我们使用类来改写这个例子。 TypeScript支持JavaScript的新特性,比如支持基于类的面向对象编程。

让我们创建一个Student类,它带有一个构造函数和一些公共字段。 注意类和接口可以一起共作,程序员可以自行决定抽象的级别。

还要注意的是,在构造函数的参数上使用public等同于创建了同名的成员变量。

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

重新运行tsc greeter.ts,你会看到生成的JavaScript代码和原先的一样。 TypeScript里的类只是JavaScript里常用的基于原型面向对象编程的简写。

运行TypeScript Web应用

greeter.html里输入如下内容:

<!DOCTYPE html><html>
    <head><title>TypeScript Greeter</title></head>
    <body>
        <script src="greeter.js"></script>
    </body></html>

在浏览器里打开greeter.html运行这个应用!

可选地:在Visual Studio里打开greeter.ts或者把代码复制到TypeScript playground。 将鼠标悬停在标识符上查看它们的类型。 注意在某些情况下它们的类型可以被自动地推断出来。 重新输入一下最后一行代码,看一下自动补全列表和参数列表,它们会根据DOM元素类型而变化。 将光标放在 greeter函数上,点击F12可以跟踪到它的定义。 还有一点,你可以右键点击标识,使用重构功能来重命名。



返回列表 返回列表
评论

    分享到