手摸手一起学习Typescript第二天,interface接口和readonly属性

简介: 手摸手一起学习Typescript第二天,interface接口和readonly属性

Typescript 文档地址:Interface


Duck Typing 概念:


如果某个东西长得像鸭子,像鸭子一样游泳,像鸭子一样嘎嘎叫,那它就可以被看成是一只鸭子。


概念:可以用来约束一个函数,对象,以及类的结构和类型


// 我们定义了一个接口 Person
interface Person {
  name: string;
  age: number;
}
// 接着定义了一个变量 viking,它的类型是 Person。这样,我们就约束了 viking 的形状必须和接口 Person 一致。
let viking: Person ={
  name: 'viking',
  age: 20
}
//有时我们希望不要完全匹配一个形状,那么可以用可选属性:
interface Person {
    name: string;
    age?: number;
}
let viking: Person = {
    name: 'Viking'
}
//接下来还有只读属性,有时候我们希望对象中的一些字段只能在创建的时候被赋值,那么可以用 readonly 定义只读属性
interface Person {
  readonly id: number;
  name: string;
  age?: number;
}
viking.id = 9527
复制代码


1. 对象类型的接口



interface arrList {
    id: number
    name: string
}
interface arr {
    data: arrList[]
}
function getArrayList(data: arr) {
    data.data.forEach(item => {
         console.log('id=', item.id, 'name=', item.name)
    })
}
//允许传入的list有除了接口定义的其他值,但接口中规定的值必须要有
const arr = {
    data: [{ id: 1, name: 'xiaosheng', age: 26 }]
}
/*若直接传人对象内容(对象字面量),ts会对其余的值进行类型检查
解决方法
1:将内容赋值给一个变量  
2.添加类型断言 as+对象类型 
3.给接口添加[x:string]:any  */
getArrayId({
    data: [{ id: 1, name: 'xiaosheng', age: 26 }]
} as arr)
复制代码


2. 函数类型的接口



// 两种定义方式
// 第一种
interface one { ( x: number, y: number ): number }
// 第二种
//type two = ( x: number, y: number) => number
const two: one = (a, b) => { return a + b }
console.log(two(1, 2))
复制代码


3. 混合类型的接口(一个接口既可以定义一个函数,也可以定义一个对象)



//混合类型接口
interface MixItf {
    ():void;
    msg:string;
    dosomething():void
}
function getMix(){
    let lib:MixItf = (() => {}) as MixItf;
    lib.msg = 'rose';
    lib.dosomething = () => {}
    return lib;
}
let getMix1 = getMix()
console.log(getMix1.msg) //rose
复制代码


个人总结:interface就是约束了一种整体类型,让后面的函数等根据对应的类型去操作

只读属性  readonly xx: 类型

相关文章
|
18小时前
|
JavaScript
​​​​Typescript 接口 和继承 数组处理
ts的基础数据类型,可用来处理一般数据,但是碰到后台传入的复杂对象数组的时候,我们可以使用ts中的接口来定义处理
32 0
|
18小时前
|
JavaScript 前端开发 C++
Typescript.中文.接口声明.lib.es5.d.ts
Typescript.中文.接口声明.lib.es5.d.ts
23 0
|
18小时前
|
JavaScript 前端开发 编译器
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
TypeScript【泛型1、泛型2、声明合并、命名空间 、模块1、模块2、声明文件简介】(五)-全面详解(学习总结---从入门到深化)
69 0
|
18小时前
|
编解码 JavaScript 前端开发
TypeScript【第三方声明文件、自定义声明文件、tsconfig.json文件简介、tsconfig.json 文件结构与配置】(六)-全面详解(学习总结---从入门到深化)
TypeScript【第三方声明文件、自定义声明文件、tsconfig.json文件简介、tsconfig.json 文件结构与配置】(六)-全面详解(学习总结---从入门到深化)
73 0
|
18小时前
|
JavaScript
react+typescript通过window.xxx挂载属性报错的解决方案
react+typescript通过window.xxx挂载属性报错的解决方案
47 0
|
18小时前
|
JavaScript 前端开发 开发者
【Web 前端】TypeScript 中的接口是什么?
【5月更文挑战第1天】【Web 前端】TypeScript 中的接口是什么?
|
18小时前
|
JavaScript 前端开发 开发者
【TypeScript技术专栏】TypeScript类型系统与接口详解
【4月更文挑战第30天】TypeScript扩展JavaScript,引入静态类型检查以减少错误。其类型系统包括基本类型、数组等,而接口是定义对象结构的机制。接口描述对象外形,不涉及实现,可用于规定对象属性和方法。通过声明、实现接口,以及利用可选、只读属性,接口继承和合并,TypeScript增强了代码的健壮性和维护性。学习和掌握TypeScript的接口对于大型项目开发至关重要。
|
18小时前
|
JavaScript 开发者 索引
【亮剑】探讨了在TypeScript中为对象动态添加属性的三种方式
【4月更文挑战第30天】本文探讨了在TypeScript中为对象动态添加属性的三种方式:1) 使用索引签名允许添加任意属性,如`[key: string]: any`;2) 通过接口和类型别名提供编译时类型检查,例如`interface Person { name: string; age: number; }`;3) 利用类创建具有属性的对象,如`class Person { name: string; age: number; }`。每种方法有其适用场景,开发者可根据需求选择。
|
18小时前
|
JavaScript 安全 前端开发
【亮剑】TypeScript 由于其强类型的特性,直接为对象动态添加属性可能会遇到一些问题
【4月更文挑战第30天】本文探讨了在 TypeScript 中安全地为对象动态添加属性的方法。基础方法是使用索引签名,允许接受任何属性名但牺牲了部分类型检查。进阶方法是接口扩展,通过声明合并动态添加属性,保持类型安全但可能导致代码重复。高级方法利用 OOP 模式的类继承,确保类型安全但增加代码复杂性。选择哪种方法取决于应用场景、代码复杂性和类型安全性需求。
|
18小时前
|
JavaScript 前端开发 索引
【HarmonyOS 4.0 应用开发实战】TypeScript入门之接口详讲
【HarmonyOS 4.0 应用开发实战】TypeScript入门之接口详讲
46 0