Skip to content
微信公众号

类和接口

接口

在TypeScript中接口最直观的体现就是约定一个对象当中具体有哪些成员,以及成员的类型是什么样的。

ts
interface Post {
    title: string
    content: string
}

function printPost(post:Post){
    console.log(post.title);
    console.log(post.content);
}

在接口成员后面添加?,表示接口成员可有可无。在接口成员前添加readonly表示只读成员不可修改。

ts
interface Post {
    title: string
    content: string
    subtitle?: string
    readonly summary: string
}

当我们定义接口的时候不知道具体有哪些成员,这时候无法定义具体的成员名称。而是使用[属性名称:成员名类型]:string作为动态属性。

ts
interface Cache{
    [prop:string]: string
}
const cache:Cache ={}
cache.foo = "value1"
cache.bar = "value2"

在TypeScript中,我们除了可以使用ECMAScript的类的相关功能,还添加了一些额外的功能和用法,例如类成员的访问修饰符、抽象类等概念。

ts
class Person{
    public name: string;
    private age: number;
    protected gender: boolean;

    constructor(name:string,age:number){
        this.name = name;
        this.age = age;
        this.gender = true;
    }

    sayHi(msg:string): void{
        console.log(`I am ${this.name},${msg}`);
    }
}

class Student extends Person{
    constructor(name: string,age:number){
        super(name,age)
        console.log(this.gender);
    }
}

const tom = new Person('tom',18);
console.log(tom.name);

类的访问修饰符可以使用public、private、protected,它的作用是控制类成员的可访问级别。默认为public,private不能在声明它的类的外部访问,public可以在类的外部访问,protected成员可以在派生类中访问。

除了类的访问修饰符,还可以使用readonly只读属性来限制属性的修改。

其余的像抽象类、泛型等等的使用可以参考TypeScript中文网来学习使用。

类型声明

在实际开发过程中,我们难免会用到第三方的Npm模块,而这些npm模块并不一定都是由TypeScript编写的,所以它提供的成员不会有强类型的体验。

例如我们使用lodash缺少类型声明没有任何的提示,那么我们可以写上单独类型声明。有了声明之后就会发现使用函数就有类型限制了。这种用法存在的原因就是为了兼容一些JS模块。

ts
import { camelCase } from 'lodash'

declare function camelCase(input:string): string

const res = camelCase('hello typed')

由于TypeScript社区很强大,现在很多JS模块提供了类型声明模块库。例如lodash对应的@types/lodash,这些模块中都是.d.ts文件,这种文件就是TypeScript专门做类型声明的文件。

本站总访问量次,本站总访客数人次
Released under the MIT License.