发表于: 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可以跟踪到它的定义。 还有一点,你可以右键点击标识,使用重构功能来重命名。
评论