手摸手一起学习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: 类型

相关文章
|
4月前
|
JavaScript
typeScript基础(5)_对象的类型-interfaces接口
本文介绍了TypeScript中接口(interfaces)的基本概念和用法,包括如何定义接口、接口的简单使用、自定义属性、以及如何使用`readonly`关键字定义只读属性。接口在TypeScript中是定义对象形状的重要方式,可以规定对象的必有属性、可选属性、自定义属性和只读属性。
48 1
|
3月前
|
JavaScript 前端开发 Java
TypeScript【接口】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第10天】TypeScript【接口】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
4月前
|
数据采集 JavaScript 前端开发
使用 TypeScript 接口优化数据结构
使用 TypeScript 接口优化数据结构
|
4月前
|
JavaScript
typeScript基础(1)_原始数据类型学习
本文介绍了TypeScript中的原始数据类型,包括布尔型、数值型、字符串型、`void`、`null`和`undefined`,并展示了如何在TypeScript中声明和使用这些类型。同时,还介绍了如何通过`tsc`命令编译TypeScript文件。
61 4
|
3月前
|
JavaScript 索引
TypeScript(TS)安装指南与基础教程学习全攻略(二)
TypeScript(TS)安装指南与基础教程学习全攻略(二)
64 0
|
3月前
|
JavaScript 前端开发 安全
TypeScript(TS)安装指南与基础教程学习全攻略(一)
TypeScript(TS)安装指南与基础教程学习全攻略(一)
39 0
|
3月前
|
JavaScript 前端开发 安全
深入理解TypeScript:增强JavaScript的类型安全性
【10月更文挑战第8天】深入理解TypeScript:增强JavaScript的类型安全性
68 0
|
3月前
|
JavaScript 前端开发 开发者
深入理解TypeScript:类型系统与实用技巧
【10月更文挑战第8天】深入理解TypeScript:类型系统与实用技巧
|
2月前
|
设计模式 JavaScript 安全
TypeScript性能优化及代码质量提升的重要性、方法与策略,包括合理使用类型注解、减少类型断言、优化模块导入导出、遵循编码规范、加强代码注释等
本文深入探讨了TypeScript性能优化及代码质量提升的重要性、方法与策略,包括合理使用类型注解、减少类型断言、优化模块导入导出、遵循编码规范、加强代码注释等,旨在帮助开发者在保证代码质量的同时,实现高效的性能优化,提升用户体验和项目稳定性。
48 6
|
2月前
|
开发框架 JavaScript 前端开发
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势
TypeScript 是一种静态类型的编程语言,它扩展了 JavaScript,为 Web 开发带来了强大的类型系统、组件化开发支持、与主流框架的无缝集成、大型项目管理能力和提升开发体验等多方面优势。通过明确的类型定义,TypeScript 能够在编码阶段发现潜在错误,提高代码质量;支持组件的清晰定义与复用,增强代码的可维护性;与 React、Vue 等框架结合,提供更佳的开发体验;适用于大型项目,优化代码结构和性能。随着 Web 技术的发展,TypeScript 的应用前景广阔,将继续引领 Web 开发的新趋势。
46 2