水果商城网站模板,台州建设局招标投标网站,怎么用ps做京东网站模板,学生个人网页制作html报告前言 在面向对象语言中#xff0c;接口是一个很重要的概念#xff0c;它是对行为的抽象#xff0c;而具体如何行动需要由类去实现。 TypeScript 中的接口是一个非常灵活的概念#xff0c;除了可用于 对类的一部分行为进行抽象 以外#xff0c;也常用于对「对象的形状…前言在面向对象语言中接口是一个很重要的概念它是对行为的抽象而具体如何行动需要由类去实现。TypeScript 中的接口是一个非常灵活的概念除了可用于 对类的一部分行为进行抽象 以外也常用于对「对象的形状Shape」进行描述。​TypeScript 的核心原则之一是对值所具有的结构进行类型检查并且只要两个对象的结构一致属性和方法的类型一致则它们的类型就是一致的。​在TypeScript里接口的作用就是为这些类型命名和为代码或第三方代码定义契约。简单点说在 TypeScript中接口是一个很重要的特性它让 TypeScript 具备了 JavaScript 所缺少的、描述较为复杂数据结构的能力。引入主题其实在 JavaScript 日常开发中很多时候都需要接口来 “规范” 程序。假设在 JavaScript 中定义一个函数用来获取一个用户的姓名和年龄的字符串functiongetUserInfo(user){returnname:${user.name}, age:${user.age}}函数调用getUserInfo({name:koala,age:18})您可能会问我们写 JavaScript 的时候这个再正常不过了吧但请注意如果这个getUserInfo()在多人开发过程中如果它是个公共函数多个开发者都会调用如果不是每个人点进来看函数对应注释可能会出现以下错误的调用// 1: 直接调用,不知道还需要传参数getUserInfo()// Uncaught TypeError: Cannot read property name of undefined// 2: 只传递一个参数,不知道还有其他参数console.log(getUserInfo({name:王佳斌}))// name: 王佳斌, age: undefined// 3: 参数知道传递多少个,但不知键名getUserInfo({name:王佳斌,width:560})// name: 王佳斌, age: undefined// ...由于 JavaScript 是弱类型的语言所以并不会对我们传入的代码进行任何的检测 有些错你自己都说不清楚但是就出了问题。那么如何解决呢有请 Typescript 接口登场。创建接口指定的接口名称最好与普通变量名 “有所区分” 比如接口名首字母大写、首字母前缀In_xxx等。在 Typescript 中使用interface关键字来定义一个接口其中name就是接口名称。interfacename{}基础使用Typescript 接口可以规定函数的 “形状”也可以规定变量的 “形状”下面有两个示例。以下 JavaScript 例子前面已经提到了忘记的话往前翻functiongetUserInfo(user){returnname:${user.name}, age:${user.age}}这个所存在的问题大家已经知道了下面用 Typescript 接口进行函数重构。// 规定形状interfaceInfo{name:string;age:number;}// 函数(冒号后跟上 接口名)functiongetUserInfo({name,age}:Info){returnname:${name}, age:${age}}// 正常都传递console.log(getUserInfo({name:王佳斌,age:123}))// 结果OKname: 王佳斌, age: 123// 少传递一个console.log(getUserInfo({name:王佳斌}))// Property age is missing in type { name: string; } but required in type Info.// 类型“name:string”中缺少属性“age”但类型“Info”中需要该属性。// 都不传递console.log(getUserInfo())// Expected 1 arguments, but got 0.// 应为1个参数但得到了0个。你看这些都是在编写代码时 TypeScript 提示的错误信息这样就避免了在使用函数的时候传入不正确的参数。注意在定义接口时不要把它理解为是在定义一个对象{}括号包裹的是一个代码块里面是声明语句只不过声明的不是变量的值而是类型。声明也不用等号赋值而是冒号指定类型。每条声明之前用换行分隔即可也可以使用分号或者逗号。另外接口还可以被变量所使用继承接口的 “形状”如下代码所示// 规定形状interfaceInfo{name:string;age:number;}// 变量 继承 接口conststudent:Info{name:小王,age:15}// 测试变量console.log(student)//{name: 小王, age: 15}// 错误用法(比如写一个 Info 接口不存在的参数)consterr:Info{a:1}// Object literal may only specify known properties, and a does not exist in type Info.// 对象文字只能指定已知的财产类型“Info”中不存在“a”。可选属性当然TypeScript 中也允许不 “必传” 某些参数有这个字段就做处理没有就忽略。如下代码所示message参数可以不传递。// 使用 ? 表示此参数非必传interfaceLog{message?:string;}// 函数functionprint({message}:Log){console.log(message||该参数没有传递~)}// 传递参数print({message:hello})//hello// 不传递print({})//该参数没有传递~很好理解。只读属性TypeScript 支持将某些参数设置为 “只读”用于限制只能在对象刚刚创建的时候修改其值后续无法再修改。如下代码所示age参数不可后期修改。// 使用 readonly 关键字表示此参数只读interfaceInfo{name:string;readonlyage:number;}// 创建变量(age只能初始的时候赋值一次)conststudent:Info{name:小王,age:15}// 测试修改只读属性 agestudent.age50// Cannot assign to age because it is a read-only property.// 无法分配给“age”因为它是只读属性。此外 TypeScript 还提供了ReadonlyArrayT类型它与ArrayT相似只是把所有可变方法去掉了因此可以确保数组创建后再也不能被修改。// 创建一个 绝对不可修改 的数组(number类型)letarr:ReadonlyArraynumber[1,2,3,4]// 测试赋值arr[0]10// Index signature in type readonly number[] only permits reading.// 类型为“只读数字[]”的索引签名只允许读取。// 测试添加数组项arr.push(5)// Property push does not exist on type readonly number[].// 类型“只读数字[]”上不存在属性“push”。// 测试赋值数组长度arr.length99// Cannot assign to length because it is a read-only property.// 无法分配给“length”因为它是只读属性。任意属性有时候我们希望一个接口中除了包含必选和可选属性之外还允许有其他的任意属性这时我们可以使用索引签名的形式来满足上述要求。如下代码所示除了name必传外后面你可以随意传递参数。// 使用 [propName: string]: any 支持任意类型interfacePerson{name:string;[propName:string]:any;}// 只传递必填,其他参数不要consta:Person{name:小王}console.log(a)//{name: 小王}// 传递必填,其他参数随意传递constb:Person{name:小王,age:15,sex:男}console.log(b)//{name: 小王, age: 15, sex: 男}很好理解。