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 Java Android开发
uniapp通过蓝牙传输数据 (安卓)
uniapp通过蓝牙传输数据 (安卓)
784 1
|
JavaScript
Vue中的v-for中:key是必须的吗?为什么?
Vue中的v-for中:key是必须的吗?为什么?
756 0
|
存储 安全 API
阿里云oss存储简介和如何使用
阿里云OSS存储服务是一种安全、稳定、高效的云存储服务,适用于各种规模的应用和业务场景。它具备出色的持久性和可用性,可以为用户提供高可靠、低成本的存储解决方案。阿里云OSS存储具有广泛的应用场景
4540 0
|
存储 缓存 移动开发
uinapp的setStorageSync和setStorage的区别
uinapp的setStorageSync和setStorage的区别
|
5月前
|
Web App开发 前端开发 JavaScript
前端性能优化利器:图片懒加载实战解析
前端性能优化利器:图片懒加载实战解析
ts中interface和type的区别
ts中interface和type的区别
841 61
|
6月前
|
JavaScript 前端开发 API
Vue 2 与 Vue 3 的区别:深度对比与迁移指南
Vue.js 是一个用于构建用户界面的渐进式 JavaScript 框架,在过去的几年里,Vue 2 一直是前端开发中的重要工具。而 Vue 3 作为其升级版本,带来了许多显著的改进和新特性。在本文中,我们将深入比较 Vue 2 和 Vue 3 的主要区别,帮助开发者更好地理解这两个版本之间的变化,并提供迁移建议。 1. Vue 3 的新特性概述 Vue 3 引入了许多新特性,使得开发体验更加流畅、灵活。以下是 Vue 3 的一些关键改进: 1.1 Composition API Composition API 是 Vue 3 的核心新特性之一。它改变了 Vue 组件的代码结构,使得逻辑组
1721 0
|
JavaScript
TS中 type和interface的区别
TS中 type和interface的区别
2143 0
|
移动开发 前端开发 JavaScript
说说JSBridge的原理?
本文首发于微信公众号“前端徐徐”,作者徐徐。文章介绍了 JSBridge 的背景、核心原理及其在 Android 和 iOS 平台上的实现方式,探讨了其应用场景、安全性和性能考量,并提供了优化建议。JSBridge 作为混合开发的关键技术,允许网页应用调用原生功能,结合了两者的优点。
730 2
说说JSBridge的原理?