【TypeScript】超详细的笔记式教程!进阶!!【下】(1)

简介: 类型别名类型别名顾名思义,即字面意思,其实断言也是字面意思,就是断定类型的方法,你说是什么类型就是什么类型,推翻约定,扯远了,继续说类型别名,举个🌰吧:

类型别名

类型别名顾名思义,即字面意思,其实断言也是字面意思,就是断定类型的方法,你说是什么类型就是什么类型,推翻约定,扯远了,继续说类型别名,举个🌰吧:

type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
    if(typeof n === 'string') {
        return n
    } else {
        reutrn n()
    }
}
复制代码

类型Name其实就是string的别名,类型() => string,一个函数返回一个字符串,这种格式就是类型NameResolverNameOrResolver是一个联合类型,之前说过。

字符串字面量类型

字符串字面量类型,用来约束取值职能是某几个字符串其中的一个字符串,举个🌰:

type EventSupport = 'click' | 'scroll' | 'mouseEnter'
function handleEvent(ele: Element, event: EventSupport): void {
    // do something
}
handleEvent(document.getElementById('app'), 'scroll') // 完全ok
handleEvent(document.getElementById('app'), 'dbclick') // 完全不ok
复制代码

元组(Tuple)

元组用来合并不同类型的项,举个🌰:

let tom: [string,number] = ['tom', 25]
复制代码

注意:

  • 元组在定义赋值时,你定义的什么类型,初始赋值时,就得添加什么类型的值,必须全部添加完,不能多,也不能少
  • 可以利用下标修改值,但是值必须是相同类型的
  • 元组可以越界,越界的元素只能是你定义元组的时候的联合类型,不能是其他类型,越界的元素不能修改

.. 元组不是很好用,如果你真的不确定你的[]里有啥,其实最好就用let tom: any[] = ['tom', 12]

枚举(Enum)

枚举一般用来做映射,举个栗子:

enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat}
复制代码

上面这段Ts编译成Js是这样:

var Days;
(function (Days) {
    Days[Days["Sun"] = 0] = "Sun";
    Days[Days["Mon"] = 1] = "Mon";
    Days[Days["Tue"] = 2] = "Tue";
    Days[Days["Wed"] = 3] = "Wed";
    Days[Days["Thu"] = 4] = "Thu";
    Days[Days["Fri"] = 5] = "Fri";
    Days[Days["Sat"] = 6] = "Sat";
})(Days || (Days = {}));
复制代码

枚举成员会被赋值为从0开始递增的数字,同事也会对枚举值到枚举名进行反向映射:

console.log(Days[0]); // Sun
console.log(Days["Sun"]) // 0
复制代码

自定义枚举

enum Days {
  Sun = <any>"Sun",
  Mon = <any>"Mon",
  Tue = <any>"Tue",
  Wed = <any>"Wed",
  Thu = <any>"Thu",
  Fri = <any>"Fri",
  Sat = <any>"Sat",
}
console.log(Days["Sun"]); // Sun
复制代码

注意:这儿需要使用断言,让tsc无视类型检查

其实在JS在ES6发布之前从来都没有类的概念,都是通过构造函数去模拟类,ES6发布了class,但是大部分Js程序员对类的概念还是比较模糊的,这我解释一下什么是类、对象、OOP、封装、集成、多态、修饰符、抽象类、接口

类的概念

其实可以理解为一件事物的抽象,包含了这个事务的一些属性与方法举个简单的🌰,比如人,人就是一个大类,我们可以抽象出来他的一些特点,比如:这是人的行为,智商情商性别等是人的属性。

对象

对象其实就是类的实例化,是一个抽象,对象就是让他变得现实,一个类可以实例化多个对象,类似我们可以根据这个类,制造很多人。

面向对象 OOP

面向对象开发的三大特性:封装、继承、多态

封装

封装的意思就是我们知道的意思,我们需要通过一些代码实现一个函数,这个函数就是一个封装,再通俗一点说,我们需要实现这个方法,细节呢?我们只需要封装起来,比如先下蹲一点,双腿发力,向上用力等等,把这些细节封装起来,就可以直接调用这个方法进行,同时呢外界也不能直接去修改内部的数据。

继承

子承父业,儿子继承老爹的所有方法&属性,但除了拥有父类所有用的特性外,还有一些别具一格的特性。

多态

由于继承产生了很多相关的不同类,很多儿子继承了同一个老爹,子类对同一个方法可以有不同的响应。比如小王小李都继承老爹老张,但是分别实现了自己getMoney的方法,此时针对一个实例,我们无需了解他是小王还是小李,就可以直接调用getMoney方法,程序会自动判断出来应该如何执行getMoney

修饰符

修饰符是一些关键字,用于限定成员或者类型的性质,比如public表示公有属性or方法

抽象类

抽象类是供其他类继承的基类,抽象类不允许被实例化,抽象类中的抽象方法必须在子类中被实现

接口

不同类之间共有的属性和方法,可以抽象成一个接口,接口可以被类实现,一个类职能继承自另外一个类,但是可以实现多个接口。

ES6中类的用法

类的定义

使用class定义类,使用constructor定义构造函数,通过new生成新实例的时候,会自动调用构造函数。

class Person {
    public IQ;
    publick name;
    constructor(IQ, name) {
        this.IQ = IQ
        this.name = name
    }
    saySomething() {
        return `hello, im ${this.name}, IQ: ${this.IQ}`
    }
}
let alice = new Person("Alice", 120)
console.log(alice.saySomething())
复制代码

类的继承

现在有了人的类,我们现在实现一个Cop类,Cop也属于人,也有名字&IQ,子类中用super关键字来调用父类的构造函数与方法:

class Cop extends Person {
    public job;
    constructor(IQ, name, job) {
        super(IQ, name)
        this.job = job;
    }
    saySomething() {
        return super.saySomething() + 'my job js ${this.job}'
    }
}
let tom = new Cup('tom', 100, 'cop')
console.log(tom.saySomething())
复制代码

存取器

使用 getter 和 setter可以改变属性的赋值和读取行为:

class FakerCop extends Person {
    constructor(IQ, name, job) {
        super(IQ, name)
        this.job = job
    }
    get job() {
        return 'fakerCop'
    }
    set job(val) {
        console.log('u want my job is' + value + '?')
    }
}
let tony = new FakerCop("Tony", 200, 'fakerCop');
tony.job = 'realCop'
console.log(tony.job) // fakerCop
复制代码

静态方法

使用static修饰符修饰的方法成为静态方法,不需要被实例化,直接通过类来调用,举个🌰,定义一个判断真假cop的方法:

class Cop extends Person {
    public job;
    constructor(IQ, name, job) {
        super(IQ, name)
        this.job = job;
    }
    static isCop(c) {
        return c instanceof Cop;
    }
    saySomething() {
        return super.saySomething() + 'my job js ${this.job}'
    }
}
console.log(Cop.isCop(tom)) // true
console.log(Cop.isCop(tony)) // false
复制代码

TypeScript中类的用法

public private protected

  • public 修饰的属性或者方法是公有的,可以在任何地方被访问,默认所有的方法和属性都是public
  • private 修饰的属性或者方法是私有的,不能再声明他的类的外部访问
  • protected 修饰的属性或者方法是受保护的,他和private类似,不同的是,它在子类中是可以访问的

public 举个栗子:

class Animal {
    public name;
    public constructor(name) {
        this.name = name
    }
}
let a = new Animal('Jack')
console.log(a.name) // Jack
a.name = 'Tom'
console.log(a.name) // Tom
复制代码

private 举个栗子:

class Animal {
    private name
    public constructor(name) {
        this.name = name
    }
}
let a = new Animal('Jack')
console.log(a.name)
a.name = 'Tom'
复制代码

ts 会提示属性“name”为私有属性,只能在类“Animal”中访问。

网络异常,图片无法展示
|

子类中也不能访问,这里就不说了;

protected 举个栗子:

class Animal {
    protected name;
    public constructor(name) {
        this.name = name
    }
}
class Cat extends Animal {
    constructor(name) {
        super(name);
        console.log(this.name)
    }
}
复制代码

子类可以访问父类的protected属性

当构造海曙为protected时,这个类只能继承,不能被实例化:

class Animal {
    protected name;
    protected constructor(name) {
        this.name = name
    }
}
class Cat extends Animal {
    constructor(name) {
        super(name)
    }
}
let a = new Animal('Jack')
复制代码

网络异常,图片无法展示
|

参数属性

修饰符和readonly还可以在构造函数参数中使用,等同于类中定义该属性同时给该属性赋值,代码看上去会更简洁:

class Animal {
    // public name: string;
    public constructor(public name) {
        // this.name = name
    }
}
复制代码

readonly

只读关键字

class Animal {
    public constructor(readonly name) {
    }
}
let a = new Animal('Jack')
console.log(a.name)
a.name = 'Tony' // Error
复制代码

网络异常,图片无法展示
|

需要注意的是,如果readonly与其他修饰符同时出现的时候,需要写在最后,改造上面的栗子:

class Animal {
    public constructor(public readonly name: string) {}
}
复制代码


目录
相关文章
|
1月前
|
JavaScript 前端开发
TypeScript【类型别名、泛型】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第11天】TypeScript【类型别名、泛型】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
1月前
|
JavaScript 前端开发 Java
TypeScript【接口】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第10天】TypeScript【接口】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
1月前
|
JavaScript 前端开发 安全
TypeScript【基础类型】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第9天】TypeScript【基础类型】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
1月前
|
JavaScript 索引
TypeScript(TS)安装指南与基础教程学习全攻略(二)
TypeScript(TS)安装指南与基础教程学习全攻略(二)
53 0
|
1月前
|
JavaScript 前端开发 安全
TypeScript(TS)安装指南与基础教程学习全攻略(一)
TypeScript(TS)安装指南与基础教程学习全攻略(一)
29 0
|
3月前
|
JavaScript 前端开发 编译器
TypeScript教程(一)在vscode中的配置TypeScript环境
本文是一篇TypeScript入门教程,介绍了在VS Code中配置TypeScript环境的步骤,包括安装Node.js、使用npm安装TypeScript、配置npm镜像源、安装VS Code的TypeScript扩展,以及创建和运行一个简单的TypeScript "Hello World"程序。
TypeScript教程(一)在vscode中的配置TypeScript环境
|
3月前
|
资源调度 JavaScript 前端开发
TypeScript实战教程(一):表单上传与后端处理
本文是TypeScript实战教程的第一部分,介绍了使用TypeScript进行表单上传和后端处理的完整流程,包括环境配置、前端表单创建、使用TypeScript和Express框架搭建服务端、处理表单数据,并提供了详细的代码示例和运行测试方法。
TypeScript实战教程(一):表单上传与后端处理
|
3月前
|
存储 JavaScript 前端开发
深入浅出TypeScript | 青训营笔记
深入浅出TypeScript | 青训营笔记
34 0
|
4月前
|
JavaScript 前端开发 程序员
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
80 0
|
5月前
|
JavaScript 编译器
31.【TypeScript 教程】混入(Mixins)
31.【TypeScript 教程】混入(Mixins)
40 3
下一篇
无影云桌面