【前端】你好，我叫TypeScript 02──变量和接口

TS变量与接口

变量声明

其实TS中的变量声明和JS中是一样的，所以你会JS就会TS，无外乎var、let和const，记住以下的表格内容就能解决绝大多数场景问题。

接口在面向对象语言中，接口是个比较核心的概念，其作用就是对类型命名和代码定义契约，其实就是对行为的抽象，对对象的形状进行描述。在TS中就是对值所具有的结构进行类型检查。

 
 
 
 
      
  
  
  
  1. // 原始方法 
    2.   
  
  
  
  2. function printLabel(labelObj: {label:string}){ 
    3.   
  
  
  
  3.   console.log(labelObj.label); 
    4.   
  
  
  
  4. } 
    5.   
  
  
  
  5. let myObj = {name:"wenbo",label:"size 110"}; 
    6.   
  
  
  
  6. printLabel(myObj); 
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8. // 接口方法 
    9.   
  
  
  
  9. interface LabelValue { 
    10.   
  
  
  
  10.   label: string; 
    11.   
  
  
  
  11. } 
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13. function printLabel2(labelValue:LabelValue){ 
    14.   
  
  
  
  14.   console.log(labelValue.label); 
    15.   
  
  
  
  15.    
    16.   
  
  
  
  16. } 
    17.   
  
  
  
  17. printLabel2(myObj); 
    18.

上述代码表明，printLabel中传入对象labelObj有string类型的label属性。而传入的对象参数实际会包含很多属性，但是编译器智慧检查那些必须的属性是否存在、类型是否匹配。printLabel2接口其实就是对printLabel中传入对象类型的抽象，定义它的参数行为，类型检查器不会关注属性的顺序。

接口对象的声明方式

接口对象的声明方式很简单，就是在接口名前加上interface即可。

 
 
 
 
      
  
  
  
  1. interface myObj { 
    2.   
  
  
  
  2.   name:string; 
    3.   
  
  
  
  3.   label:string; 
    4.   
  
  
  
  4. } 
    5.

接口对象的基本属性

接口对象的属性无外乎默认属性、可选属性和只读属性等。

  • 默认属性：表示该属性必须存在，可读可改
  • 可选属性：表示该属性可有可无、可读可改，只需要在属性名后加上?符号即可，如：name?:string;。可以对可能存在的属性进行预定义，捕获引用了不存在属性时的错误。
  • 只读属性：表示该属性只能读取、不可修改，只需要在对象创建时对指定属性名前加上readonly即可，可以确保创建后不被修改。
 
 
 
 
      
  
  
  
  1. interface LabelValue{ 
    2.   
  
  
  
  2.   readonly id: number;//只读属性，表示该属性只能读取、不可修改 
    3.   
  
  
  
  3.   name?: string;//可选属性，表示该属性可有可无 
    4.   
  
  
  
  4.   label: string;//默认属性，表示该属性必须存在 
    5.   
  
  
  
  5. } 
    6.   
  
  
  
  6. function printLabel(labelValue:LabelValue){ 
    7.   
  
  
  
  7.   console.log(labelValue); 
    8.   
  
  
  
  8. } 
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10. let myObj: LabelValue = {name:"yichuan",id:100,label:"size 110"}; 
    11.   
  
  
  
  11. printLabel(myObj);//{ name: 'yichuan', id: 100, label: 'size 110' } 
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13. myObj.id = 200;// 报错: Cannot assign to 'id' because it is a constant or a read-only property. 
    14.   
  
  
  
  14.  
    15.   
  
  
  
  15. let myObj2: LabelValue ={id:100}; 
    16.   
  
  
  
  16. // Type '{ id: number}' is not assignable to type 'LabelValue'. 
    17.   
  
  
  
  17. // Property 'label' is missing in type '{ id: number}'. 
    18.   
  
  
  
  18. // 报错: 缺少 label 属性 
    19.

接口对象的函数类型

接口能够描述JavaScript中对象拥有的各种各样的外形。 除了描述带有属性的普通对象外，接口也可以描述函数类型。

使用接口表示函数类型，需要给接口定义一个调用签名，是一个只有参数列表和返回值类型的函数，其中参数列表的每个参数都得有属性名和类型。

 
 
 
 
      
  
  
  
  1. interface myFun{ 
    2.   
  
  
  
  2.   (name:string, age:number): void;//()中的是函数类型，void是否有返回值 
    3.   
  
  
  
  3. } 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. let iFun: myFun; 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. iFun = function (name:string,age:number){ 
    8.   
  
  
  
  8.   console.log(`my name is ${name}, my age is ${age}`) 
    9.   
  
  
  
  9. } 
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11. iFun("yichuan",18);//my name is yichuan, my age is 18 
    12.

我们可以看到：首先创建了一个函数类型的接口myFun，再创建了一个函数类型的变量iFun，并将同类型的函数赋值给这个变量。

对于函数类型检查而言，函数的参数名不需要与接口定义的名字匹配。类型检查器会对函数参数进行逐个检查，判断对应位置的参数类型是否匹配。当然，如果你在函数中没有指定参数类型，那么TS类型系统会根据接口进行推断，并执行检查是否匹配。

 
 
 
 
      
  
  
  
  1. interface myFun{ 
    2.   
  
  
  
  2.   (name:string, age:number): void; 
    3.   
  
  
  
  3. } 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. let iFun: myFun; 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. iFun = function (name,age){ 
    8.   
  
  
  
  8.   console.log(`my name is ${name}, my age is ${age}`) 
    9.   
  
  
  
  9. } 
    10.   
  
  
  
  10.  
    11.   
  
  
  
  11. iFun("yichuan",18);////my name is yichuan, my age is 18 
    12.

接口对象的可索引类型

与使用接口描述函数类型差不多，只不过可索引类型时通过描述对象索引类型和索引返回值类型的「索引签名」。

 
 
 
 
      
  
  
  
  1. //定义一个学生列表接口 
    2.   
  
  
  
  2. interface StudentList{ 
    3.   
  
  
  
  3.   id: number; 
    4.   
  
  
  
  4.   name: string; 
    5.   
  
  
  
  5. } 
    6.   
  
  
  
  6.  
    7.   
  
  
  
  7. // 定义一个班级接口 
    8.   
  
  
  
  8. interface ClassList{ 
    9.   
  
  
  
  9.   classname: string; 
    10.   
  
  
  
  10.   students: StudentList[]; 
    11.   
  
  
  
  11.   [index: string]: any;//可以用任意的string类型去索引声明的对象, 值是any类型 
    12.   
  
  
  
  12. } 
    13.   
  
  
  
  13.  
    14.   
  
  
  
  14. function printLabel(data:ClassList){ 
    15.   
  
  
  
  15.   return data; 
    16.   
  
  
  
  16. } 
    17.   
  
  
  
  17.  
    18.   
  
  
  
  18. printLabel({ 
    19.   
  
  
  
  19.   classname:"class 1", 
    20.   
  
  
  
  20.   numbers:30, 
    21.   
  
  
  
  21.   students:[{ 
    22.   
  
  
  
  22.     id:2001, 
    23.   
  
  
  
  23.     name:"yichuan" 
    24.   
  
  
  
  24.   }] 
    25.   
  
  
  
  25. }) 
    26.

可索引接口的类型只可以使用string和number进行定义索引签名。可以同时使用两种类型的索引，但是数字索引的返回值必须是字符串索引返回值类型的子类型。当使用 number来索引时，JavaScript会将它转换成string然后再去索引对象。

  • 字符串定义索引签名
  • 数字定义索引签名
  • 混合类型定义索引签名
 
 
 
 
      
  
  
  
  1. class Animal { 
    2.   
  
  
  
  2.     name: string; 
    3.   
  
  
  
  3. } 
    4.   
  
  
  
  4. class Dog extends Animal { 
    5.   
  
  
  
  5.     breed: string; 
    6.   
  
  
  
  6. } 
    7.   
  
  
  
  7.  
    8.   
  
  
  
  8. // 错误：使用数值型的字符串索引，有时会得到完全不同的Animal! 
    9.   
  
  
  
  9. interface NotOkay { 
    10.   
  
  
  
  10.     [x: number]: Animal; 
    11.   
  
  
  
  11.     [x: string]: Dog; 
    12.   
  
  
  
  12. } 
    13.

字符串索引签名能够很好的描述dictionary模式，并且它们也会确保所有属性与其返回值类型相匹配。因为字符串索引声明了obj.property和obj["property"]两种形式都可以。

为防止给索引赋值，可以将其索引签名定义为只读类型。

 
 
 
 
      
  
  
  
  1. interface ReadonlyStringArray { 
    2.   
  
  
  
  2.     readonly [index: number]: string; 
    3.   
  
  
  
  3. } 
    4.   
  
  
  
  4. let myArray: ReadonlyStringArray = ["Alice", "Bob"]; 
    5.   
  
  
  
  5. myArray[2] = "Mallory"; // error! 
    6.

类接口

TS中可以对类设置强制执行的类型约定，即类接口。

 
 
 
 
      
  
  
  
  1. interface FatherInterface{ 
    2.   
  
  
  
  2.   firstName: string; 
    3.   
  
  
  
  3. } 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. class Son implements FatherInterface{ 
    6.   
  
  
  
  6.   firstName!: String; 
    7.   
  
  
  
  7.   constructor(lastName:string,age:number){}; 
    8.   
  
  
  
  8. } 
    9.

注意：

  • 接口只描述类的公共部分，而不是公共和私有两部分。它不会帮你检查类是否具有某些私有成员。
  • 类实现接口时，必须实现接口所有的属性
  • 接口无法约束类的构造函数，类型检查器只会对实例部分进行检查

我们知道类具有两种类型：静态部分的类型和实例的类型。当你用构造器签名去定义一个接口并试图定义一个类去实现这个接口时会得到一个错误：只对其实例部分进行类型检查，而constructor存在于类的静态部分，所以不在检查的范围内。

 
 
 
 
      
  
  
  
  1. interface FatherInterface{ 
    2.   
  
  
  
  2.   new (firstName:string); 
    3.   
  
  
  
  3. } 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. class Son implements FatherInterface{ 
    6.   
  
  
  
  6.   constructor(firstName:string,lastName:string,age:number){}; 
    7.   
  
  
  
  7. } 
    8.

继承接口

和类一样，接口也可以相互继承。可以将一个接口成员复制到另一个接口，灵活地分割接口到可复用模块中。

 
 
 
 
      
  
  
  
  1. interface DogInterface{ 
    2.   
  
  
  
  2.   type:string; 
    3.   
  
  
  
  3. } 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. interface Erha extends DogInterface{ 
    6.   
  
  
  
  6.   name:string; 
    7.   
  
  
  
  7.   age:number; 
    8.   
  
  
  
  8. } 
    9.   
  
  
  
  9.  
    10.   
  
  
  
  10. let erha = {}; 
    11.   
  
  
  
  11. erha.type = "dog"; 
    12.   
  
  
  
  12. erha.name = "bobo"; 
    13.   
  
  
  
  13. erha.age = 2; 
    14.

同样的，接口也可以实现多继承。

 
 
 
 
      
  
  
  
  1. class Son implements FatherInterface{ 
    2.   
  
  
  
  2.   constructor(firstName:string,lastName:string,age:number){}; 
    3.   
  
  
  
  3. } 
    4.   
  
  
  
  4.  
    5.   
  
  
  
  5. interface AnimalInterface{ 
    6.   
  
  
  
  6.   foal:string; 
    7.   
  
  
  
  7. } 
    8.   
  
  
  
  8.  
    9.   
  
  
  
  9. interface DogInterface{ 
    10.   
  
  
  
  10.   type:string; 
    11.   
  
  
  
  11. } 
    12.   
  
  
  
  12.  
    13.   
  
  
  
  13. interface Erha extends DogInterface, AnimalInterface{ 
    14.   
  
  
  
  14.   name:string; 
    15.   
  
  
  
  15.   age:number; 
    16.   
  
  
  
  16. } 
    17.   
  
  
  
  17.  
    18.   
  
  
  
  18. let erha = {}; 
    19.   
  
  
  
  19. erha.type = "dog"; 
    20.   
  
  
  
  20. erha.name = "bobo"; 
    21.   
  
  
  
  21. erha.age = 2; 
    22.   
  
  
  
  22. erha.foal = "分娩"; 
    23.

小结

interface接口的定义其实很简单，和定义对象一样的形式。接口对象的基本属性包括：默认属性、可选属性以及只读属性，其可索引类型的定义只有string和number两种形式，类接口进行继承的形式和类的继承大同小异。

参考文章

  • 阿宝哥的《重学TS》
  • 《ts中文文档》
  • 《大话 Typescript 接口》

本文转载自微信公众号「前端万有引力」，可以通过以下二维码关注。转载本文请联系前端万有引力公众号。

分享名称：【前端】你好，我叫TypeScript 02──变量和接口
文章地址：http://www.shufengxianlan.com/qtweb/news11/318161.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

网站收录知识

分类信息网站

全网营销　　 　四川内江电信机房　　 　软文发稿　　 　关键词优化　　 　成都西信机房托管　　 　H5建站　　 　网站建设报价方案　　 　青年旅行社　　 　成都主机托管　　 　重庆水土双线托管　　 　华川商务　　 　信衡房屋鉴定　　 　成都集团网站建设　　 　网站建设　　 　做移动网站　　 　网站seo优化　　 　成都网站设计　　 　成都免费网站建设公司　　 　成都机柜租用　　 　成都网站改版公司