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 支持打印 支持编译时决策 ( 在输写代码时就会自动报错 而不是等到运行才会显示报错 )

相关文章
|
Java 数据库连接 mybatis
mybaits报错:The content of element type “resultMap“ must match “(constructor?,id*,result*,associati。。。
mybaits报错:The content of element type “resultMap“ must match “(constructor?,id*,result*,associati。。。
561 0
|
3月前
ts中interface和type的区别
ts中interface和type的区别
137 21
|
6月前
|
JavaScript 前端开发 编译器
在ts中const和readonly区别?
在ts中const和readonly区别?
73 1
Warning: To load an ES module, set “type“: “module“ in the package.json or use the .mjs extension.
Warning: To load an ES module, set “type“: “module“ in the package.json or use the .mjs extension.
|
7月前
|
JavaScript
TS中 type和interface的区别
TS中 type和interface的区别
836 0
|
Java
【ES异常】mapper [sortNum] of different type, current_type [long], merged_type [keyword]
【ES异常】mapper [sortNum] of different type, current_type [long], merged_type [keyword]
156 0
|
7月前
|
JavaScript 编译器
TS中const和readonly的区别
TS中const和readonly的区别
152 0
|
7月前
|
前端开发 开发者
TS7031: Binding element ‘role‘ implicitly has an ‘any‘ type.
TS7031: Binding element ‘role‘ implicitly has an ‘any‘ type.
95 1
|
7月前
|
JavaScript API
Property ‘proxy‘ does not exist on type ‘ComponentInternalInstance | null‘.ts
Property ‘proxy‘ does not exist on type ‘ComponentInternalInstance | null‘.ts
【TS】ts中的类:class
【TS】ts中的类:class
141 0
【TS】ts中的类:class