TS - interface和type的区别

简介: TS - interface和type的区别

                    1. type 可以定义变量/对象 需要写 等号  


                               type numType = num:number


                                let num:numType = 123


                               type numType2 = {  name:string , sex:string , classname:string   }


                               let obj : numType2  = { name:' 123 ' , sex:' 男 ' classname: ' 2210A ' }


                     interface 可以只能定义对象 不用写 等号


                               interface InterType = { name:string, age:number }


                               let obj:InterType = { name:' 123 ', age:18 }

463b9e6979a248ecaec5ca69215a4172.png

                2. interface可以写重复别名且会自动继承上一级 type不能写重复别名

de3015ca45284fb89eea79ce3ae25e11.png

898c64ff8717408cbe03d5dae5609f96.png

                3.interface通过 extends实现继承     type通过 &交叉实现继承 并且 type和interface并不独立 可以


               type继承interface  interface继承type  但是必须都是对象 如果type是属性 而interface是对象 则不能继承

4f142a06723942b5b47d846411c11942.png

a52bcb2f6f1c46aa9f7186b001e9c9c2.png

 4. interface的implements 可以实现接口的方法继承 并且可以同时继承多个

724c52eced2545c091f2cfb8ff54912c.png

在继承时 书写相同的变量 类型必须一致

7fad6b23afee445e86be77ce6a492ddf.png

 可索引类型:格式为 【index:number 或者 string 这两种】:(返回值)

c874e25a765349d187fb8a16a3f3f211.png

TypeScript: 演练场 - 一个用于 TypeScript 和 JavaScript 的在线编辑器 (typescriptlang.org)


这个地址是ts的演练场可以在这个里面去测试ts代码 支持切换版本 支持配置 支持转成js 支持打印 支持编译时决策 ( 在输写代码时就会自动报错 而不是等到运行才会显示报错 )

相关文章
|
JavaScript
Vue中的v-for中:key是必须的吗?为什么?
Vue中的v-for中:key是必须的吗?为什么?
736 0
|
存储 安全 API
阿里云oss存储简介和如何使用
阿里云OSS存储服务是一种安全、稳定、高效的云存储服务,适用于各种规模的应用和业务场景。它具备出色的持久性和可用性,可以为用户提供高可靠、低成本的存储解决方案。阿里云OSS存储具有广泛的应用场景
4468 0
|
缓存 网络协议 前端开发
【前端面试知识点】- 1. http&https
http: 是互联网上应用最为广泛的一种网络协议,是一个客户端和服务器端请求和应答的标准(TCP),用于从 WWW 服务器传输超文本到本地浏览器的超文本传输协议。
【前端面试知识点】- 1. http&https
|
存储 缓存 移动开发
uinapp的setStorageSync和setStorage的区别
uinapp的setStorageSync和setStorage的区别
ts中interface和type的区别
ts中interface和type的区别
804 61
|
JavaScript
TS中 type和interface的区别
TS中 type和interface的区别
2103 0
|
JavaScript 前端开发 持续交付
构建现代Web应用:Vue.js与Node.js的完美结合
【10月更文挑战第22天】随着互联网技术的快速发展,Web应用已经成为了人们日常生活和工作的重要组成部分。前端技术和后端技术的不断创新,为Web应用的构建提供了更多可能。在本篇文章中,我们将探讨Vue.js和Node.js这两大热门技术如何完美结合,构建现代Web应用。
543 4
|
前端开发 JavaScript 开发工具
前端项目增加eslint全过程
如何在前端项目中安装并配置ESLint和Prettier,包括VSCode插件的安装、npm包的全局安装、.eslintrc.js配置文件的生成以及编辑器设置的调整。
239 6
|
缓存 开发框架 安全
【Uniapp 专栏】详解 Uniapp 的网络请求功能特性
【5月更文挑战第13天】Uniapp是一款跨平台开发框架,提供便捷的网络请求功能,支持HTTP/HTTPS协议及GET/POST等多种请求方法。它允许设置请求参数、处理响应数据,并有超时时间、缓存策略及错误处理机制。还能与状态管理、页面交互结合,确保数据安全并进行性能优化。通过案例和比较,展现了Uniapp在网络请求上的优势,为开发高质量移动应用奠定基础。理解和掌握这些特性对于创建出色应用体验至关重要。
497 1
【Uniapp 专栏】详解 Uniapp 的网络请求功能特性
|
前端开发 JavaScript
前端 css 经典:transition 过渡和 animation 动画
前端 css 经典:transition 过渡和 animation 动画
239 2