Typescript 学习 - 类
<h3 id="class">class</h3><p>class 并不是一种新的数据结构，只是在函数原型基础上的语法糖</p>
<pre><code>class People {
hand: number;
constructor(hand: number) {
this.hand = hand;
}
getHandNum(): void {
console.log(this.hand)
}
}
</code></pre>
<p>转为 js</p>
<pre><code>var People = /** @class */ (function () {
function People(hand) {
this.hand = hand;
}
People.prototype.getHandNum = function () {
console.log(this.hand);
};
return People;
}());
</code></pre>
<h3 id="extends-派生类">extends 派生类</h3>
<p>派生类包含了一个构造函数，它 必须调用 <code>super()</code>，它会执行基类的构造函数。 而且，在构造函数里访问 this 的属性之前，我们 一定要调用 <code>super()</code>。 这个是TypeScript强制执行的一条重要规则。</p>
<h3 id="publicprivateprotected-区别">public、private、protected 区别</h3>
<ul>
<li>public 是默认值，公有的</li>
<li>private 是私有的，继承或者实例化都不能访问</li>
<li>protected 是保护类型的，继承可以访问，实例化不行</li>
</ul>
<pre><code>class Animal {
private hand: string;
constructor(hand) {
this.hand = hand;
}
}
let dog = new Animal('abc');
// 会报错 Property 'hand' is private and only accessible within class 'Animal'.
dog.hand;
</code></pre>
<h3 id="存取器">存取器</h3>
<p>自定义原型上方法的 get 和 set ，如果只定义 get 的话，会被 ts 推断为 readonly</p>
<pre><code>let passcode = "secret passcode";
class Employee {
private _fullName: string;
get fullName(): string {
return this._fullName;
}
set fullName(newName: string) {
if (passcode && passcode == "secret passcode") {
this._fullName = newName;
}
else {
console.log("Error: Unauthorized update of employee!");
}
}
}
let employee = new Employee();
employee.fullName = "Bob Smith";
if (employee.fullName) {
alert(employee.fullName);
}
</code></pre>
<p>转为js</p>
<pre><code>var passcode = "secret passcode";
var Employee = /** @class */ (function () {
function Employee() {
}
// 重写函数原型上的 get 和 set
Object.defineProperty(Employee.prototype, "fullName", {
get: function () {
return this._fullName;
},
set: function (newName) {
if (passcode && passcode == "secret passcode") {
this._fullName = newName;
}
else {
console.log("Error: Unauthorized update of employee!");
}
},
enumerable: true,// 属性是否可枚举
configurable: true// 属性是否可配置
});
return Employee;
}());
var employee = new Employee();
employee.fullName = "Bob Smith";
if (employee.fullName) {
alert(employee.fullName);
}
</code></pre>
<p>属性描述符 MDN</p>
<h3 id="静态属性-static-关键字">静态属性 static 关键字</h3>
<pre><code>class Grid {
static origin = {x: 0, y: 0};
calculateDistanceFromOrigin(point: {x: number; y: number;}) {
let xDist = (point.x - Grid.origin.x);
let yDist = (point.y - Grid.origin.y);
return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale;
}
constructor (public scale: number) { }
}
</code></pre>
<p>转为 js</p>
<pre><code>var Grid = function(){
this.origin = {x: 0, y: 0};
}
Grid.prototype.calculateDistanceFromOrigin = () => {
let xDist = (point.x - Grid.origin.x);
let yDist = (point.y - Grid.origin.y);
return Math.sqrt(xDist * xDist + yDist * yDist) / this.scale;
}
Grid.origin = {x: 0, y: 0};
</code></pre>
<h3 id="抽象类-abstract">抽象类 abstract</h3>
<pre><code>abstract class ParentClass {
// 抽象类中定义的抽象方法，必须在子类中实现
abstract ParentFun(): void;
}
</code></pre>
<h3 id="实例的类型">实例的类型</h3>
<pre><code>class Greeter {
greeting: string;
constructor(greeting: string) {
this.greeting = greeting
}
onGreet() {
console.log(this.greeting);
}
}
// 实例的类型是 Greeter 类
let greet: Greeter;
greet = new Greeter('hello');
greet.onGreet();
</code></pre>
<h3 id="把类当作接口使用">把类当作接口使用</h3>
<pre><code>class Point {
x: number;
y: number;
}
interface Point3d extends Point {
z: number;
}
let point3d: Point3d = { x: 1, y: 2, z: 3 };
</code></pre>
<p>类可以创造出类型，所以可以在接口中使用类</p>
<p>什么情况用类或接口表示类型？？？<br>
类ts转换代码是会转为function...<br>
接口只是在编译的时候做的类型约定，不会转成任何代码</p>
<pre><code>interface Point {
x: number;
y: number;
}
interface Point3d extends Point {
z: number;
}
let point3d: Point3d = { x: 1, y: 2, z: 3 };
</code></pre>
<p>转为 js</p>
<pre><code>var point3d = { x: 1, y: 2, z: 3 };
</code></pre>
<blockquote>
<p>参考文档<br>
https://www.tslang.cn/docs/handbook/classes.html<br>
https://www.tslang.cn/play/index.html</p>
</blockquote><br><br>
来源：https://www.cnblogs.com/ubuntugx/p/11492169.html
頁:
[1]