typescript这个东西说实在的，真的是容易忘记，一段时间不用就感觉特别陌生，但是回过头来看看，又有一种熟悉的感觉,有句话这么说的ts越用越香,它确实能够规范我们的书写的格式，语法校验和类型校验等。之前写过react+ts的一个demo，但是时间久了就忘记了，现在也是趁着热度再回顾一下ts的内容，以及一些高阶语法，现在我们回顾一下ts中常见的类和接口，如果喜欢的可以点赞,评论,关注公众号让更多的人看到。如果有问题也可以评论留言，我们一起相互学习，一起进步。
class
首页我们要清楚的一点是typescript中类和javascript中ES6语法类的区别,千万不要混淆。ts中相比于js添加了声明属性的类型和参数的类型以及返回结果类型。这个地方一看就会一写就不对，如果不声明ts会报错。
复制
![[[343370]]](https://s2.51cto.com/oss/202009/23/13aaf5e1a3c75de334c86ab79c97ebe8.jpg){kind=link}
class Person{ name:string; constructor(name:string){ this.name = name; } getName():void{ console.log(this.name); } }
1.
2.
3.
4.
5.
6.
7.
8.
9.
复制
class Person{ constructor(name){ this.name = name; } getName(){ console.log(this.name); } }
1.
2.
3.
4.
5.
6.
7.
8.
ES5编辑后的结果
复制
var Person = /** @class */ (function () { function Person(name) { this.name = name; } Person.prototype.getName = function () { console.log(this.name); }; return Person; }());
1.
2.
3.
4.
5.
6.
7.
8.
9.
类的get和set
ts在编译get和set的时候默认是es3编译，vscode编辑器会报错error TS1056: Accessors are only available when targeting ECMAScript 5 and higher需要编译到版本ES5或以上,解决办法:$ tsc xxx.ts -t es5。
复制
class User{ myname:string; constructor(myname:string){ this.myname = myname } get name(){ return this.myname } set name(newName:string){ this.myname = newName } }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
ES5编译后的结果
复制
var User = /** @class */ (function () { function User(myname) { this.myname = myname; } Object.defineProperty(User.prototype, "name", { get: function () { return this.myname; }, set: function (newName) { this.myname = newName; }, enumerable: false, configurable: true }); return User; }());
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
这里有几个思考问题,答案见文末:
复制
var u = new User("a"); console.log(u); console.log(u.myname); u.myname = 'b'; console.log(u.myname); console.log(u.hasOwnProperty("name")); console.log(Object.getPrototypeOf(u)); console.log(Object.getPrototypeOf(u).hasOwnProperty("name"));
1.
2.
3.
4.
5.
6.
7.
8.
抽象类
abstract关键字表示抽象类，抽象类是不能被实例化即new,只能被继承,抽象类一般是用来封装一些公共的，提供给子类使用的方法和属性的
复制
abstract class Animal{ public readonly name:string; protected age:number = 38; private money:number = 10; constructor(name:string){ this.name = name } } class Dog extends Animal{ static className = 'Dog' static getClassName(){ console.log(this.className) } getName(){ console.log(this.name) } getAge(){ console.log(this.age) } } let a = new Animal("ss");
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
这里打印看一下继承的结果:
复制
console.log(a); //Dog { age: 38, money: 10, name: 'ss' }
1.
这里顺便说一下访问修饰符 public protected private
public 里里外外都能访问,包括自己、自己的子类、其他类都能
protected 自己和子类能访问但是其他地方不能访问
private 私有的(只有自己能访问,子类的其他都不能访问）
接口表示对象的属性
复制
interface Rectangle { width: number; height: number } let r: Rectangle = { width: 100, height: 10 } interface Speakable { speak(): void; name?: string } let speaker: Speakable = { //name:"bdt", speak() { } }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
接口用来描述抽象的行为
复制
interface AnimalLink { eat(): void; move(): void }
1.
2.
3.
4.
接口可以实现继承
复制
interface PersonLike extends AnimalLink { speak(): void } class Person2 implements PersonLike { speak() { }; eat() { }; move() { } }
1.
2.
3.
4.
5.
6.
7.
8.
通过接口约束变量类型
复制
interface Person3 { readonly id: number; name: string; [PropName: string]: any } let p1: Person3 = { id: 1, name: "sss" }
1.
2.
3.
4.
5.
6.
7.
8.
9.
通过接口约束(规范)函数
复制
interface DiscountInterface{ (price:number):number } let discount:DiscountInterface = function (price: number): number { return price * .8 }
1.
2.
3.
4.
5.
6.
通过索引约束数组和对象
复制
interface UserInterface{ [index:number]:string } let arr:UserInterface = ['aa','bb'] interface UserInterface2{ [index:string]:string } let obj:UserInterface2 = {name:"sss"}
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
通过接口约束构造函数
复制
class Animal3{ constructor(public name:string){} } interface WithClassName{ new (name:string):Animal3 } function createClass(clazz:WithClassName,name:string){ return new clazz(name) } let a3 = createClass(Animal3,"别抖腿"); console.log(a3)
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
class和interface的区别
class 类声明并实现方法
interface 接口声明，但是不能实现方法
复制
abstract class Animal{ name:string="111"; abstract speak():void; //抽象类和方法不包含具体实现 必须在子类中实现 } //接口里的方法都是抽象的 interface Flying{ fly():void } interface Eating{ eat():void } class Dog extends Animal{ speak(){ console.log("汪汪汪") //重写:子类重写继承自父类中的方法 } } class Cat extends Animal implements Flying,Eating{ speak(){ //继承抽象类的方法必须实现 console.log("喵喵喵") } fly(){ console.log("我是一只飞货") } eat(){ console.log("我是一只吃货") } }
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
写在最后
文中答案
复制
User { myname: 'a' } a b false User { name: [Getter/Setter] } true
1.
2.
3.
4.
5.
6.