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

相关文章
|
15小时前
|
JavaScript
TS中 type和interface的区别
TS中 type和interface的区别
12 0
|
15小时前
|
JavaScript 编译器
TS中const和readonly的区别
TS中const和readonly的区别
14 0
|
15小时前
Angular启动/node_modules/@types/node/index.d.ts (20,1): Invalid ‘reference‘ directive syntax.
Angular启动/node_modules/@types/node/index.d.ts (20,1): Invalid ‘reference‘ directive syntax.
22 2
|
7月前
|
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]
52 0
|
15小时前
|
JavaScript API
Property ‘proxy‘ does not exist on type ‘ComponentInternalInstance | null‘.ts
Property ‘proxy‘ does not exist on type ‘ComponentInternalInstance | null‘.ts
|
8月前
|
JavaScript Java
ts - 接口
在 TypeScript 中,我们使用接口(Interfaces)来定义对象的类型。
|
10月前
|
JavaScript 索引
TS接口
TypeScript 中的接口是一种抽象结构,用于定义对象的类型。接口定义了对象应该包含的属性和方法,但不提供实现。
|
11月前
【TS】ts中的类:class
【TS】ts中的类:class
73 0
【TS】ts中的类:class
|
11月前
|
存储 JavaScript
【TS】object类型
【TS】object类型
52 0
|
11月前
|
JavaScript
【TS】ts的使用和类型注解
【TS】ts的使用和类型注解
98 0