TypeScript

299 阅读2分钟
//1. interface 定义对象 定义函数
interface Person {
    name: string,
    readonly age: number, // 只读
    degree?: string   // 可有可无
}

const getPersonName = (person: Person):void => {
    console.log(person.name)
}

const person1 = {
    name: 'dell',
    sex: 'male'
};

getPersonName(person1)   // 不会存在警告
getPersonName({
    name: 'dell',
    sex: 'male'
})                      // 会报错误, sex是多余的属性


// 2
interface Person {
    name: 'dell',
    [propName: string]: any  // 允许有其他属性
    say(): string            // say是一个方法, 返回值是sting
}

// 3 User类应用Person接口
class User implements Person {
    name = 'dell';
    say() {
        return 'hello'
    }
}


// 4 接口继承 Teacher 接口继承Person
interface Teacher extends Person {
    teacher(): 'hello every'
}

// 5. 接口 代表一个函数声明
interface SayHi {
    (word: string): string  // word 参数
}

const say:SayHi = (word: string) => {
    return word
}

// 类的定义

class Person {
    name = 'dell';
    getName() {
        return this.name;
    }
}

class Teacher extends Person {
    getTeacherName() {
        return 'Teacher'
    }
    
    getName() { // 重写父类的getName
        return 'mangoyi'
    }
}

const teacher = new Teacher();
teacher.geTeacherName();
teacher.getName();

class Doctor extends Person {
    getTeacherName() {
        return 'Doctor'
    }
    
    getName() {
        return super.getName() + 'lxx' // super调用父类的getName方法
    }
}

// private protected public  访问类型
// public 允许在类的内外被调用
class Person {
    name: string; // 默认隐藏了public访问类型
    sayHi() {
        console.log('hi')
    }
}

const person = new Person()
person.name = 'mangoyi'
person.sayHi();

// private 允许在类的内部使用
class Person {
    private name: string
}

const person = new Person();
person.name = 'mangoyi'; // 这是错误的
// protected 允许在类的内部及继承的子类中使用
class Person {
    protected name: string;
    public sayHi() {
        this.name;
        console.log('hi');
    }
}

class Teacher extends Person {
    public sayBye() {
        this.name;      // 来自父类的name
    }
}

// constructor 构造器

// 第一种写法
class Person {
    public name: string;

    constructor(name: string) { // 创建实例的过程中执行
        this.name = name;
    }
}

// 第二种写法
class Person {
    constructor(public name: string) {}
}

const person = new Person('mangoyi');
console.log(person.name);           // mangoyi

class Person {
    constructor (public name: string) {}
}

class Teacher extends Person {
    // 如果子类使用构造器
    constructor(age: number) {
        // 子类中需要使用super, 并且给父类的构造器传递参数(如果父类构造器没有参数,直接super())
        super('mangoyi');
    }
}

const teacher = new Teacher(28);
console.log(teacher.age);   // 28
console.log(teacher.name); // mangoyi

// 类中的getter, setter

class Person {
    // 私有属性 _    
    // 不直接将私有属性暴露给外部,采用方法加密方式暴露出去
    constructor(private _name: string) {}
    get name() {
        return this._name + 'secret';
    }
    set name(name: string) {
        this._name = name + 'do'
    }
}

const person = new Person('mangoyi');
person.name = 'lemon'
console.log(person.name)   //lemondosecret

// 单例设计模式

class Demo {
    private static instance: Demo;
    private constructor() {}   // 构造函数私有化
    
    static getInstance() {  // getInstance 直接挂载在Demo类,而不是挂载在实例上
        if (!this.instance) {
            this.instance = new Demo();
        }
        return this.instance;
    }    
}

const demo1 = Demo.getInstance();

// readonly 限制public属性只能读不能改
class Person {
    public readonly name: string;
    constructor(name: string) {
        this.name = name;
    }
}

const person = new Person('dell');
person.name = 'mangoyi';    // 错误的写法

// 抽象类
// 多个类存在同样的方法

abstract class Geom {       // 定义抽象类
    abstract getArea(): number;     // 定义抽象方法
}


class Circle extends Geom {     // Circle是Geom抽象类的实现类
    getArea() {
        return 123;
    }
}

class Square extends Geom {
    getArea() {                 // 具体的实现
        return 456;
    }
}

// 在ts文件中引用js的库第三方库
// superagent 是js实现的第三方库

demo.ts

import superagent from 'superagent';        // 直接引用,ts会报错

// 解决方法

yarn add @types/superagent      // 安装翻译文件, 主文件index.d.ts 相当于将js的声明补全

// 这样项目中ts就可以识别js文件了