后端的React之路(四)

69 阅读2分钟

开启掘金成长之旅!这是我参与「掘金日新计划 · 12 月更文挑战」的第5天,点击查看活动详情

前言

今天继续来学TypeScript的相关比较有特点的语法

接口(interface)

TypeScript是面向对象语言,所以他自然有接口这个概念,不过接口的概念只存在于TS中,接口并不会转换为JS代码,他只是用于让编译器做出限制。

// 接口声明
interface interfaceName { 
}

同时在TS的接口中不仅仅只是抽象方法声明的一个集合,它还能够声明变量属性,例如下面的例子

interface Sayer{
    name:string
    hello(word:string):string
}

可选属性

如果要实现该Sayer接口,则必须要创建对应的属性和方法。不过TS也提供了?符号来实现可选属性实现,以方便我们对未来可能存在的属性进行一个预定义的效果。

class Student implements Sayer {
    name: string = "Tom";
​
    hello(word: string): string {
        return "";
    }
    
}
// 属性可选
interface Sayer{
    name:string
    age?:number
    hello(word:string):string
}

只读属性

在接口中也可以使用readonly来实现类似const关键字的效果,即被其修饰的属性只能在对象创建时修改其值

let reader:Reader = {
    age:18,
    name:"Tom"    
}
reader.name = "Jerry" // TS2540: Cannot assign to 'name' because it is a read-only property.

接口可以继承类

在大多数面向对象语言中,接口只可以继承接口,但在TS中接口也可以继承一个类。

它会继承类的所有成员,包括private、protectd等所有成员,但不会包括他们的实现值,这意味着如果一个接口继承了一个类,那么这个接口只能被该类或者其子类所实现。

函数(function)

在TS中一个函数类型被分为两部分:参数类型和返回值类型,即如果我们要声明一个函数类型时,这两者都是需要定义的(即使返回值为void),而不像JS中直接声明参数名即可。

function(x:number,y:number)=>void

可选参数和默认值

正如上面接口的可选属性一样,我们也可以使用?对某个方法入参表示其可选,当没有传参数给他时,他的值就是undefined。

function hello(str?:string) {
    // TODO
}

同时有时候,我们也想当用户没有传递方法入参时为参数设置一个默认值,这时可以使用=来设置默认值

function hello(str?:string="Hello")=>void {
    // TODO
}

箭头函数

TS中也提供了类似Java8中的lambda函数一样,简化函数声明同时解决this指向问题

const helloLambda = (hello)=>void{
    // TODO
}

学习资料