06.TypeScript面向对象特性

最新推荐文章于 2024-09-25 00:15:16 发布

skyandairchild

最新推荐文章于 2024-09-25 00:15:16 发布

阅读量211

点赞数

CC 4.0 BY-SA版权

分类专栏： TypeScript 文章标签： TypeScript

本文链接：https://blog.youkuaiyun.com/skyandairchild/article/details/84916490

TypeScript 专栏收录该内容

6 篇文章

订阅专栏

本文介绍了 TypeScript 中类的声明、构造函数、继承及接口的使用方法，并通过具体实例展示了如何利用类和接口进行面向对象编程。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

类

1.1类的声明，Person.ts文件内容如下

class Person{
    /**默认访问控制符为public
     * private控制符修饰的变量或方法只能在本类内部使用，外部不可调用
     * protected控制符修饰的变量或方法在本类内部和继承的子类调用
    */
    name;
    eat() {
       console.log("I'm eating");
    }
} 


var p1 = new Person();
p1.name = "batman";
p1.eat();

var p2 = new Person();
p2.name = "superman";
p2.eat();

编译后的Person.js文件内容如下

var Person = /** @class */ (function () {
    function Person() {
    }
    Person.prototype.eat = function () {
        console.log("I'm eating");
    };
    return Person;
}());
var p1 = new Person();
p1.name = "batman";
p1.eat();
var p2 = new Person();
p2.name = "superman";
p2.eat();

1.2类的构造函数，Person2.ts文件内容如下

class Person{
    /**以下构造函数的写法等价于
     * name;
     *  constructor(name: string) {
     *   this.name = name;
     *  }
    */
    constructor(public name: string) {
        
    }
    sayHello() {
       console.log(`Hello,my name is ${this.name}`);
    }
} 

var p1 = new Person("batman");
p1.sayHello();
var p2 = new Person("superman");
p2.sayHello();

编译后的Person2.js文件内容如下

var Person = /** @class */ (function () {
    /**以下构造函数的写法等价于
     * name;
     *  constructor(name: string) {
     *   this.name = name;
     *  }
    */
    function Person(name) {
        this.name = name;
    }
    Person.prototype.sayHello = function () {
        console.log("Hello,my name is " + this.name);
    };
    return Person;
}());
var p1 = new Person("batman");
p1.sayHello();
var p2 = new Person("superman");
p2.sayHello();

1.3类的继承，Person3.ts文件内容如下

class Person{
    constructor(public name: string) {
        
    }
    eat() {
       console.log(`eating!!!`);
    }
} 

class Employee extends Person{
    code;
    work() { 
        console.log('working!!!');
    }
}

var e1 = new Employee('lisi');

子类调用父类的构造函数和方法，Person4.ts文件内容如下

class Person{
    constructor(public name: string) {
        console.log('new Person');
    }
    eat() {
       console.log(`eating!!!`);
    }
} 

class Employee extends Person{
    code;
    constructor(name: string, code: string) {
        /**必须先调用父类的构造函数 */
        super(name);
        console.log('new Employee');
        this.code = code;
    }
    work() { 
        super.eat();
        this.dowork();
    }
    private dowork() {
         console.log('working!!!');
    }
}

var e1 = new Employee('lisi', '123');
e1.work();

泛型

Person5.ts文件内容如下

class Person{
    constructor(public name: string) {
        console.log('new Person');
    }
    eat() {
       console.log(`eating!!!`);
    }
} 

class Employee extends Person{
    code;
    constructor(name: string, code: string) {
        super(name);
        console.log('new Employee');
        this.code = code;
    }
    work() { 
        super.eat();
        this.dowork();
    }
    private dowork() {
         console.log('working!!!');
    }
}

/**泛型为Person */
var worker: Array<Person> = [];
worker[0] = new Person('liling');
worker[1] = new Employee('heliang', '133');

接口

方法参数的接口Person6.ts文件内容如下

interface IPerson{
    name: string;
    age: number;
}

class Person{
    constructor(public config: IPerson) {
        
    }
}

var p1 = new Person({
    age:18,
    name:'lining'
});

编译后Person6.js的代码如下

var Person = /** @class */ (function () {
    function Person(config) {
        this.config = config;
    }
    return Person;
}());
var p1 = new Person({
    age: 18,
    name: 'lining'
});

类的接口Person7.ts文件的代码如下

interface Animal{
    eat();
}

class Sheep implements Animal{
    eat() {
        console.log('I eat grass');
   }
}

class Tiger implements Animal{
    eat() {
        console.log('I eat meat');
   }
}

编译后Person7.js的代码如下

var Sheep = /** @class */ (function () {
    function Sheep() {
    }
    Sheep.prototype.eat = function () {
        console.log('I eat grass');
    };
    return Sheep;
}());
var Tiger = /** @class */ (function () {
    function Tiger() {
    }
    Tiger.prototype.eat = function () {
        console.log('I eat meat');
    };
    return Tiger;
}());

模块

文件即模块，a模块a.ts代码如下

/**export向外暴露的资源*/
export var prop1;
var prop2;

export function func1() {
}
function func2(){	
}

export class Clazz1{	
}
class Clazz2{
}

b模块b.ts代码如下

/**引用的资源*/
import { prop1, func1, Clazz1 } from './a'

console.log(prop1);
func1();
new Clazz1();

/**向外暴露的资源 */
export function func3(){	
}

注解
为类、方法和变量加上直观明了的说明，这些说明信息与程序的业务逻辑无关，供指定的工具或框架使用
类型定义文件
*.d.ts文件，帮助开发者在TypeScript中使用已用的JavaScript包
搜索JavaScript包的类型定义文件工具https://github.com/typings/typings
类型定义文件下载地址https://github.com/DefinitelyTyped/DefinitelyTyped/tree/master/types/jquery