typescript 接口_typeScript

typescript 接口_typeScript介绍TypeScript的核心原则之一是对值所具有的结构进行类型检查。我们使用接口(Interfaces)来定义对象的类型。接口是对象的状态(属性)和行为(方法)的抽象(描述)接口初探声明接口

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

介绍

TypeScript 的核心原则之一是对值所具有的结构进行类型检查。我们使用接口(Interfaces)来定义对象的类型。接口是对象的状态(属性)和行为(方法)的抽象(描述)

接口初探

声明接口需要使用关键字interface,接下来我们定义一个接口,需求如下
需求: 创建人的对象, 需要对人的属性进行一定的约束

id是number类型, 必须有, 只读的
name是string类型, 必须有
age是number类型, 必须有
sex是string类型, 可以没有

 
第一步:创建人的对象

const person: Person = {
    id: 1,
    name: 'tom',
    age: 20,
    sex: '男'
}

我们创建了一个类型为Person的person对象,里面的属性有id、name、age、sex
 

第二步:给person对象声明类型,第一步的时候我们声明了类型Person,但是这个类型具体是什么,我们还没定义,所以接下来我们定义一个接口Person,来声明是person对象的类型

interface Person {
    id: number
    name: string
    age: number
    sex: string
}

此时呢,就已经创建好一个没有约束的对象person,他的类型声明是接口Person,接下来加上约束就完整了。
 

第三步:添加约束,id属性只能是只读,sex属性为可选属性
要将一个属性设置为只读很简单,只需要在属性前面增加关键字readonly,设置属性为可选属性也很简单,只需在属性后面添加符号?,最后完整的代码如下

interface Person {
    readonly id: number
    name: string
    age: number
    sex?: string
}

const person: Person = {
    id: 1,
    name: 'tom',
    age: 20,
    sex: '男'
}

console.log(person)

 

第四步:测试我们定义的对象,首先我们在浏览器中查看是否打印了这个对象
typescript 接口_typeScript
由于id是只读的,我们测试修改id是否报错
typescript 接口_typeScript
很明显,这里报错了,说id是个只读属性
又由于sex是可选属性,所以我们不设置sex,看看是否成功

const person: Person = {
    id: 1,
    name: 'tom',
    age: 20,
}

console.log(person)

typescript 接口_typeScript
可以看到也是能打印出来的
 

可选属性

接口里的属性不全都是必需的。 有些是只在某些条件下存在,或者根本不存在。

interface IPerson {
  id: number
  name: string
  age: number
  sex?: string
}

带有可选属性的接口与普通的接口定义差不多,只是在可选属性名字定义的后面加一个 ? 符号。
好处:

  • 可以对可能存在的属性进行预定义
  • 可以捕获引用了不存在的属性时的错误。
     
const person2: IPerson = {
  id: 1,
  name: 'tom',
  age: 20,
  // sex: '男' // 可以没有
}

 

只读属性

一些对象属性只能在对象刚刚创建的时候修改其值。 你可以在属性名前用 readonly 来指定只读属性:

interface Person {
  readonly id: number
  name: string
  age: number
  sex?: string
}

一旦赋值后再也不能被改变了。

const person2: IPerson = {
  id: 2,
  name: 'tom',
  age: 20,
  // sex: '男' // 可以没有
  // xxx: 12 // error 没有在接口中定义, 不能有
}
person2.id = 2 // error

readonly vs const
最简单判断该用 readonly 还是 const 的方法是看要把它做为变量使用还是做为一个属性。 做为变量使用的话用 const,若做为属性则使用 readonly
 

函数类型

接口能够描述JavaScript中对象拥有的各种各样的外形。 除了描述带有属性的普通对象外,接口也可以描述函数类型。
 
为了使用接口表示函数类型,我们需要给接口定义一个调用签名。 它就像是一个只有参数列表和返回值类型的函数定义。参数列表里的每个参数都需要名字和类型。

interface SearchFunc {
  (source: string, subString: string): boolean;
}

这样定义后,我们可以像使用其它接口一样使用这个函数类型的接口。 下例展示了如何创建一个函数类型的变量,并将一个同类型的函数赋值给这个变量。

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
  let result = source.search(subString);
  return result > -1;
}

对于函数类型的类型检查来说,函数的参数名不需要与接口里定义的名字相匹配。 比如,我们使用下面的代码重写上面的例子:

let mySearch: SearchFunc;
mySearch = function(src: string, sub: string): boolean {
  let result = src.search(sub);
  return result > -1;
}

函数的参数会逐个进行检查,要求对应位置上的参数类型是兼容的。 如果你不想指定类型,TypeScript的类型系统会推断出参数类型,因为函数直接赋值给了 SearchFunc类型变量。 函数的返回值类型是通过其返回值推断出来的(此例是 false和true)。 如果让这个函数返回数字或字符串,类型检查器会警告我们函数的返回值类型与 SearchFunc接口中的定义不匹配。

let mySearch: SearchFunc;
mySearch = function(src, sub) {
    let result = src.search(sub);
    return result > -1;
}

 

类类型

 

类实现接口

与 C# 或 Java 里接口的基本作用一样,TypeScript 也能够用它来明确的强制一个类去符合某种契约。

// 定义一个接口,里面有个空方法run
interface IRun {
    run()
}

// 定义一个类,实现接口IRun
class Person implements IRun{
    run() {
        console.log('我正在跑步')
    }
}

// 穿改进类对象person
const person = new Person()
// 运行run方法
person.run()

typescript 接口_typeScript
 

一个类实现多个接口

interface IRun {
    run()
}
interface Swim {
    swim()
}

// 定义一个类,这个类可以实现IRun和Swim接口(当前这个类可以实现多个接口,一个类同时也可以被多个接口进行约束)
class Person2 implements IRun, Swim{
    run() {
        console.log('我正在跑步2')
    }
    swim() {
        console.log('我正在游泳2')
    }
}

const person2 = new Person2()
person2.run()
person2.swim()

typescript 接口_typeScript
总结:类可以通过接口的方式,来定义当前这个类的类型,类可以实现一个接口,也可以实现多个接口,要注意:接口中的内容要真正的实现
 

接口继承接口

// 定义了一个接口,继承了其他多个接口
interface IRun {
    run()
}
interface Swim {
    swim()
}

// 接口runSwim继承了IRun和Swim
interface runSwim extends IRun, Swim{}

// 类实现接口runSwim,因为继承关系,类可以调用继承接口中的方法
class Person3 implements runSwim{
    run() {
        console.log('我正在跑步3')
    }
    swim() {
        console.log('我正在游泳3')
    }
}

const person3 = new Person3()
person3.run()
person3.swim()
版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/165340.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)


相关推荐

  • 项目复盘/总结模板

    项目复盘/总结模板复盘会议的安排、步骤及意义什么是复盘?为何要复盘?WHAT?复盘,是行动后的深刻反思和经验总结,是一个不断学习、总结、反思、提炼和持续提高的过程。复盘是企业文化、是行动学习、是提升组织智慧的重

  • 建立友好城市有什么用_中国国际友好城市联合会

    建立友好城市有什么用_中国国际友好城市联合会原题连接Palmia国有一条横贯东西的大河,河有笔直的南北两岸,岸上各有位置各不相同的N个城市。北岸的每个城市有且仅有一个友好城市在南岸,而且不同城市的友好城市不相同。每对友好城市都向政府申请在河上开辟一条直线航道连接两个城市,但是由于河上雾太大,政府决定避免任意两条航道交叉,以避免事故。编程帮助政府做出一些批准和拒绝申请的决定,使得在保证任意两条航线不相交的情况下,被批准的申请尽量多。输入格式第1行,一个整数N,表示城市数。第2行到第n+1行,每行两个整数,中间用1个空格隔开,分别表示南岸和

  • 二维图形旋转公式的推导

    二维图形旋转公式的推导

  • 华为、深圳、十年Android程序员:“我不干了!!!!”

    华为、深圳、十年Android程序员:“我不干了!!!!”前言我的大学室友将他深圳60平的房子卖了800万,然后花260万在成都买了130平的精装房,40万买了一辆奥迪,还剩500万存到了银行,正式从特区又杀回了四川。室友说,我的10年青春,换来的真金白银,就是这500万的现金。从今年开始,我一定可以过真真正正的生活,享受生活,而绝不再是被生活鞭打着向前走。我和室友的母校,是一所以电信工程闻名的985大学。2011年本科毕业,我留在了成都,室友则南下深圳入职华为,当年起薪15万。室友如何挣下一套房2015年7月,工作4年后,室友攒下了50万元,其中有近.

  • ProgressDialog 使用

    ProgressDialog 使用ProgressDialog[功能]ProgressDialog也是一种Dialog一般在出现ProgressDialog后台都会再开辟Thread来做一些耗时的工作我演示的是从100数到0这段时间既不太长不用浪费时间等待同时也能明显地看出效果[代码]1.ProgressDialog使用[code="java"]public…

  • 优惠券设计及流程_优惠券怎么设计

    优惠券设计及流程_优惠券怎么设计在整个APP开发产品发展的整个周期中,运营活动必不可少,而发放优惠券已成为运营活动的一种基本形式,而关于优惠券设计的整体流程尤为重要。接下来,分享一下自己的经验,希望对大家有帮助,感谢支持!整体架构

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号