首页 前端知识 typescript中的类型type与接口interface

typescript中的类型type与接口interface

2024-09-29 22:09:11 前端知识 前端哥 88 530 我要收藏

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

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

let age:number = 10

接触到type也可以这样写

//这里的second其实代表的就是number
type second = number

let b:second = 20

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

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

// 问女生年纪不太礼貌,所以我们不需要 age 这个属性
type Woman = Pick<Person, "name" | "id">;

//返回值:
woman:{
	name: string;
	id: number;
}

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

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

// K extends keyof person
// 这里的k可能是
{
    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    // 类似for...in
}

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)两者关联:

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

// type 与 interface 交叉
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:"男"
}
转载请注明出处或者链接地址:https://www.qianduange.cn//article/18772.html
标签
评论
发布的文章

jQuery QueryBuilder 教程

2024-10-29 23:10:44

水球图 及各种参数设置

2024-10-29 23:10:13

大家推荐的文章
会员中心 联系我 留言建议 回顶部
复制成功!