区别

类型别名和 接口类似，但最关键的区别还是在于 接口可以通过集成扩展，而别名确定后无法添加新的属性，只能通过并集类型去扩展

接口的定义
  1. //声明类型的两种方式
  3. //通过type定义
  4. // type InfoType = {name:string,age:number}
  6. //通过intetface接口定义 可以定义可读属性 以及可选属性
  7. interface InfoType{
  8.     name?:string
  9.     readonly age:number
  10. }
  12. const info:InfoType = {
  13.     name:'why',
  14.     age:18
  15. }
  18. interface LabelValue{
  19.     label:string
  20. }
  22. let myObj = { size: 10, label: '123' };
  24. function printLabel(labelObj: LabelValue) {
  25.     console.log(labelObj.label);
  26. }
  28. printLabel(myObj);
索引类型和额外属性
  1. //通过interface 定义索引类型
  2. interface IndexLanguage{
  3.     [index:number]:string|number
  4. }
  6. const frontLanguage:IndexLanguage = {
  7.     0:"HTML",
  8.     1:"abc"  //索引必须number
  9. }
  12. interface ILanguageYear{
  13.     [index:string]:number
  14. }
  15. const languageYear:ILanguageYear  = {
  16.     "C":1972,
  17.     "Java":1995,
  18.     "Javascript":1996
  19. }
  21. interface SquareConfig {
  22.     color?: string;
  23.     width?: number;
  24.     [propName: string]: any;
  25. }
  27. let newObj: SquareConfig = {
  28.     color: "123",
  29.     abc: 456,
  30. };
函数类型接口
  1. interface Fc{
  2.     (source:string,subString:string):boolean
  3. }
  4. //接口函数相当于是函数的一个签名
  5. //只要参数数量和类型一致，甚至类型都可以不写有类型推导
  6. let mySearch:Fc = function(src:string,sub:string):boolean{
  7.     let result = src.search(sub)
  8.     return result > -1
  9. }
接口的继承
  1. //接口的继承
  2. interface ISwim{
  3.     swimming:()=>void
  4. }
  6. interface IFly{
  7.     flying:()=>void
  8. }
  10. //多继承
  11. interface IAction extends ISwim,IFly{
  13. }
  15. const action:IAction = {
  16.     swimming(){
  18.     },
  19.     flying(){
  21.     }
  22. }
  25. interface Shape {
  26.     color: string;
  27. }
  29. interface PenStroke {
  30.     penWidth: number;
  31. }
  33. interface Square extends Shape, PenStroke {
  34.     sideLength: number;
  35. }
  37. let squre = {
  38.     color: "blue",
  39.     sideLength: 10,
  40.     penWidth: 5.0,
  41. } as Square;
交叉类型
  1. interface ISwim{
  2.     swimming:()=>void
  3. }
  4. interface IFly{
  5.     flying:() => void
  6. }
  8. //联合类型  有其中一个就行
  9. type myType1 = ISwim | IFly
  10. //交叉类型  必须都有
  11. type myType2 = ISwim & IFly
  14. const obj1:myType1 = {
  15.     flying(){
  17.     }
  18. }
  20. const obj2:myType2 = {
  21.     flying(){
  23.     },
  24.     swimming(){
  26.     }
  27. }
面向接口实现
  1. interface IEat{
  2.     eating:()=>void
  3. }
  5. interface Swim{
  6.     Swiming:()=>void
  7. }
  10. //类实现接口
  11. class Animal{
  13. }
  15. //继承只能单继承
  16. //实现接口可以多个
  17. class Fish extends Animal implements IEat,Swim{
  18.     eating(){
  20.     }
  21.     Swiming(){
  23.     }
  24. }
  25. class Person extends Animal implements Swim{
  26.     Swiming(){
  28.     }
  29. }
  31. //实现场景  一些公共的API  面向接口编程
  32. //通过类来实现接口的 方法
  33. function swimAction(swimable:Swim){
  34.     swimable.Swiming()
  35. }
  37. //所有实现了Swim接口的类对应的对象 都是可传入的
  38. swimAction(new Fish())
  39. swimAction(new Person())