typescript语法精讲三(笔记)

- 静态成员

在类中定义的成员和方法都属于对象级别的,在实际的开发场景中,我们也需要去定义类级别的成员和方法。
通过关键字static来定义

class Student {
    static call: string = 'kychen';
    static attendClass() {
        console.log('类中的方法...');   
    }
}

console.log(Student.call);  // kychen

Student.attendClass();  // 类中的方法...

- 抽象类abstract

父类不需要对某些方法进行具体的实现,因此,在父类中定义的方法,我们可以定义为抽象方法。

抽象方法的特征:

  • 抽象方法指的是没有具体实现的方法,也就是抽象方法。
  • 抽象方法,必须存在于抽象类中
  • 抽象类是使用abstract声明的类
  • 抽象类的特征
  • 抽象类是不能被实例化的
  • 抽象方法必须被子类实现,否则这个类必须是一个抽象类

- 抽象类的测试

abstract class Person {
    abstract getInfo(): string; // 定义抽象类公共的获取信息的方法
}

// 子类继承抽象类,实现抽象类中的抽象方法
// 学生类
class Student extends Person {
    private _name: string = '';
    constructor(sname: string) {
        super();
        this._name = sname;
    }

    getInfo() {
        return 'student-name: ' + this._name;
    }
}

// 教师类
class Teacher extends Person {
    private _salary: number = 0;
    private _post: string = '';
    constructor(salary: number, post: string) {
        super();
        this._salary = salary;
        this._post = post;
    }

    getInfo() {
        return 'teacher-salary: ¥' + this._salary + 'teacher-post: ' + this._post;
    }
}

function printInfo(person: Person) {
    console.log(person.getInfo());
}

const stu = new Student('kychen');
const tec = new Teacher(8000, '中级教师');
printInfo(stu);  // student-name: kychen 
printInfo(tec);  //  teacher-salary: ¥8000teacher-post: 中级教师

- 接口定义可选属性

interface Person {
    name: string;
    age?: number;
    info?: {
        name: string;
    }
}

const p: Person = {
    name: 'stu',
    age: 20
}

- 接口定义只读属性

interface Person {
    name: string;
    age?: number;
    readonly info?: {
        name: string;
    }
}

const p: Person = {
    name: 'stu',
    age: 20,
    info: {
        name: 'stu2'
    }
}

p.info = {};  // 报错,Cannot assign to 'info' because it is a read-only property.

- 索引类型

使用interface定义对象类型时,其中的属性名、类型、方法都是确定的

interface TagLabel {
    [index: number]: string;
}

const tag: TagLabel = {
    1: 'first',
    2: 'second',
    3: 'three'
}

console.log(tag['1']); // first


interface DevelopTime {
    [name: string]: number;
    java: number
}

const dev: DevelopTime = {
    'javascript': 1996,
    'java': 1995
}

console.log(dev['javascript']);

- 函数类型

// 接口
interface CalcFunc {
    (num1: number, num2: number): number
}

const add: CalcFunc = (n1, n2) => {
    return n1 + n2;
}

const sub: CalcFunc = (n1, n2) => {
    return n1 - n2;
}

console.log(add(1, 5));
console.log(sub(3, 2));

接口可以定义函数的类型,但是除非个别情况,最好还是使用类型别名来定义函数

// 类型别名
type CalcFunc = (num1: number, num2: number) => number;

const add: CalcFunc = (n1, n2) => {
    return n1 + n2;
}

const sub: CalcFunc = (n1, n2) => {
    return n1 - n2;
}

console.log(add(1, 5));
console.log(sub(3, 2));

- 接口继承

接口和类一样是可以进行继承的,使用extends关键字,但是接口支持多继承,而类不支持多继承。

interface Student {
    name: string;
    eating: () => void;
    studing: () => string;
}

interface Teacher {
    driver: () => void;
    write: () => void;
}

interface Examinee extends Student, Teacher {
    sno: number
}

const exam: Examinee = {
    sno: 0,
    name: 'exam',
    eating: () => { console.log('eating'); },
    studing: () => { return 'studing' },
    driver: () => { console.log('driver'); },
    write: () => { console.log('write'); }
}

exam.eating();   // eating

- 接口的实现与使用

interface Student {
    studing: () => void;
}

interface Teacher {
    teaching: () => void;
}

class Parent implements Student, Teacher {
    studing = () => {
        console.log('studing');
    }

    teaching = () => {
        console.log('teaching');
    };
}

function teach(teacher: Teacher) {
    teacher.teaching();
}

// 创建对象
const p = new Parent();
teach(p);  // teaching

- 交叉类型

联合类型表示多个类型中的一个即可

type Alignment = 'left' | 'right' | 'center'

还有另外一种类型合并,就是交叉类型,交叉类型表示需要满足多个类型的条件,交叉类型使用&符号;

- 交叉类型的应用

在实际的开发场景中,通常是针对对象类型进行交叉的



©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,271评论 5 476
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,275评论 2 380
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,151评论 0 336
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,550评论 1 273
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,553评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,559评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,924评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,580评论 0 257
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,826评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,578评论 2 320
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,661评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,363评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,940评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,926评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,156评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 42,872评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,391评论 2 342

推荐阅读更多精彩内容