typescript中的类型type与接口interface

10,126次阅读
没有评论

共计 1410 个字符,预计需要花费 4 分钟才能阅读完成。

typescript 中的 type 相当于是给类型起一个新的名字

基本用法:
比如我想声明一个类型为 number 的年龄 age,刚开始学 typescript,我们可能会这样写

let age:number = 10

接触到 type 也可以这样写


type second = number

let b:second = 20

关键字:《1》pick:挑选指定的类型

interface Person {
  name: string;
  age: number;
  id: number;
  sex: 0 | 1;
}


type Woman = PickPerson, "name" | "id">;


woman:{
	name: string;
	id: number;
}

《2》K extends keyof T:“或”匹配所有可能的类型
如下式代码

interface person {
    name:string,
    sex:string,
    age:number
}



{
    name:string,
}

{
    name:string,
    sex:string,
}

{
    name:string,
    sex:string,
    age:number
}
等等

《3》type 可以使用 in 关键字生成映射类型,这里的 key 获取的是

type Keys = "name" | "sex"

type DulKey = {
    [key in Keys]: string    
}

let stu: DulKey = {
    name: "wang",
    sex: "man"
}

类型 type 其实和接口 interface 有些像,但是两者区别在哪:
(1)extends 和 &
接口 interface 可以通过 extends 拓展
其实 extends 相当于一个加好 +,将 personage 和 personall 键值对进行合并

interface personage {
    age:number
}

interface personall extends personage {
    name:string
}

let person:personall = {
    name:"xiaoming",
    age:14
}
console.log(person)

类型 type 可以通过 & 实现类型的交叉

type personage = {
    age:number
}

type personname = {
    name:string
}

let personall:personage&personname = {
    age:13,
    name:"xiaoming"
}

console.log(personall)

(2)两者关联:


type Name = {
    name: string;
}
interface User extends Name {
    age: number;
}
let stu:User={name:'wang',age:1}


interface Name {
    name: string;
}
type User = Name & {
    age: number;
}
let stu:User={name:'wang',age:1}

(3)接口 interface 可以声明多次,声明多次相当于扩展,如下式代码,这个 person 声明了 3 次,那么它所应该具有的属性是 3 个,如果少写了,ts 就会报错;type 不可以定义多次

interface person {
    name:string
}

interface person {
    age:number
}

interface person {
    sex:string
}



let stu:person = {
    name:"xiaoming",
    age:12,
    sex:"男"
}

原文地址: typescript 中的类型 type 与接口 interface

    正文完
     0
    Yojack
    版权声明:本篇文章由 Yojack 于2024-10-07发表,共计1410字。
    转载说明:
    1 本网站名称:优杰开发笔记
    2 本站永久网址:https://yojack.cn
    3 本网站的文章部分内容可能来源于网络,仅供大家学习与参考,如有侵权,请联系站长进行删除处理。
    4 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。
    5 本站所有内容均可转载及分享, 但请注明出处
    6 我们始终尊重原创作者的版权,所有文章在发布时,均尽可能注明出处与作者。
    7 站长邮箱:laylwenl@gmail.com
    评论(没有评论)