沁心崖 沁心崖

TypeScript-类、继承、接口、泛型、tsconfig

/

一、类

何为类？简而言之就是程序之中所有的操作都需要通过对象来完成。

  1. class Person {
  2.   // 在属性前使用 static 关键字，可以定义静态属性(类属性)，不需要创建对象就可以使用 实例对象没有静态属性
  3.   static age: number = 18;
  4.   // 实例属性 readonly表示只读属性，不能修改
  5.   // readonly name: string = "孙悟空";
  6.   name = "孙悟空";
  8.   // 定义方法 加上static 变成静态方法
  9.   sayHello() {
  10.     console.log("大家好");
  11.   }
  12. }
  14. const per = new Person();
  15. console.log("per: ", per);
  17. console.log(Person.age);
  18. // console.log(per.age); 实例对象没有静态属性
  19. console.log(per.name);
  20. // per.name = "齐天大圣";
  21. console.log(per.name);
  23. // 方法
  24. per.sayHello();
  25. // Person.sayHello();

1.1 构造函数

在实例化一个类的时候，会自动调用该方法。

  1. class Dog {
  2.   name: string;
  3.   age: number;
  5.   constructor(name: string, age: number) {
  6.     this.name = name;
  7.     this.age = age;
  8.   }
  10.   bark() {
  11.     console.log("汪汪汪");
  12.   }
  13. }
  15. const dog1 = new Dog("阿喵", 9);
  16. const dog2 = new Dog("阿呆", 6);
  18. console.log(dog1);
  19. console.log(dog2);

1.2 继承

作用是：共享父类的属性和方法

  1. (function () {
  2.   // 定义公共类
  3.   class Animal {
  4.     name: string;
  5.     age: number;
  7.     constructor(name: string, age: number) {
  8.       this.name = name;
  9.       this.age = age;
  10.     }
  12.     sayHello() {
  13.       console.log("动物在叫");
  14.     }
  15.   }
  17.   // 使用继承后，子类中将拥有父类的所有属性和方法
  18.   class Dog extends Animal {
  19.     run() {
  20.       console.log(`${this.name}在跑~~~`);
  21.     }
  22.     // 子类覆盖父类的方法 => 重写父类方法
  23.     sayHello() {
  24.       console.log("汪汪汪");
  25.     }
  26.   }
  28.   class Cat extends Animal {
  29.     sayHello() {
  30.       console.log("喵喵喵");
  31.     }
  32.   }
  34.   const dog = new Dog("阿呆", 8);
  35.   const cat = new Cat("阿喵", 3);
  36.   console.log("cat: ", cat);
  37.   cat.sayHello();
  39.   console.log("dog: ", dog);
  40.   dog.sayHello();
  41.   dog.run();
  42. })();

1.3 super 关键字

可通过super关键字调用父类的方法。

  1. // super 表示当前类的父类
  2. (function () {
  3.   class Animal {
  4.     name: string;
  5.     constructor(name: string) {
  6.       this.name = name;
  7.     }
  8.     sayHello() {
  9.       console.log("大家好");
  10.     }
  11.   }
  13.   class Dog extends Animal {
  14.     age: number;
  15.     constructor(name: string, age: number) {
  16.       // 如果在子类中写了构造函数，相当于重写了父类的构造函数，此时需要对父类的构造函数进行调用
  17.       super(name); // 相应的参数也要传入进去
  18.       this.age = age;
  19.     }
  20.     sayHello() {
  21.       // super 表示当前类的父类
  22.       super.sayHello();
  23.     }
  24.   }
  26.   const dog = new Dog("旺财", 3);
  27.   dog.sayHello();
  28. })();

1.4 抽象类与抽象方法

  • 抽象类：即一种专门被其他类继承的类，生下来就是用来给别人继承的(即抽象类是父类)，而且在抽象类当中可以添加抽象方法
  • 抽象方法：没有方法体的方法，子类必须实现父类的抽象方法
  1. (function () {
  2.   /**
  3.    * 以 abstract 开头的是抽象类,和其他类区别是:
  4.    *  1.不能被创建实例
  5.    *  2.抽象类可以添加抽象方法
  6.    */
  7.   abstract class Animal {
  8.     name: string;
  9.     constructor(name: string) {
  10.       this.name = name;
  11.     }
  12.     /**
  13.      * abstract 定义一个抽象方法
  14.      *    1.没有方法体
  15.      *    2.抽象方法只能定义在抽象类中
  16.      *    3.子类必须对抽象方法进行重写
  17.      */
  18.     abstract sayHello(): void;
  19.   }
  21.   class Dog extends Animal {
  22.     sayHello() {
  23.       // super 表示当前类的父类
  24.       console.log("汪汪汪~");
  25.     }
  26.   }
  27.   // 非抽象类“Cat”不会实现继承自“Animal”类的抽象成员“sayHello”。
  28.   class Cat extends Animal {
  29.     sayHello() {
  30.       console.log("喵喵喵~");
  31.     }
  32.   }
  34.   const dog = new Dog("旺财");
  35.   const cat = new Cat("阿喵");
  37.   dog.sayHello();
  39.   // const an = new Animal() // 报错:无法创建抽象类的实例。
  40. })();

二、接口

接口就是一组规范

接口与抽象类的区别：

  • 接口：
    1. 都是抽象方法
    2. 属性不能有值，只定义属性类型
    3. interface定义 implements 实现接口
  • 抽象类：
    1. 可以有抽象方法，也可以有普通方法
    2. class定义 extends 实现继承
  1. (function () {
  2.   // type 描述一个对象的类型
  3.   type myType = {
  4.     name: string;
  5.     age: number;
  6.   };
  7.   /* 类型声明不可重复声明 */
  8.   // type myType = {
  9.   //   name: string;
  10.   //   age: number;
  11.   // };
  13.   /**
  14.    * 接口：用来定义一个类的结构
  15.    *    1.用来定义一个类中，应该包含那些属性和方法
  16.    *    2.同时也可以当成类型声明去使用
  17.    */
  18.   interface myInterface {
  19.     name: string;
  20.     age: number;
  21.   }
  22.   /* 接口可以重复声明 */
  23.   interface myInterface {
  24.     gender: string;
  25.   }
  27.   const obj: myInterface = {
  28.     name: "sss",
  29.     age: 111,
  30.     gender: "男",
  31.   };
  33.   /**
  34.    *  接口可以在定义类的时候去限制类的值
  35.    *    1.接口中的所有属性都不能有实际的值 属性不能有值，方法不能有方法体
  36.    *    2.接口只定义对象的结构，而不考虑实际的值。
  37.    *    3.接口中所有的方法都是抽象方法
  38.    */
  40.   interface myInter {
  41.     name: string;
  42.     sayHello(): void;
  43.   }
  44.   // 实现接口 => 使类满足接口的要求
  45.   class MyClass implements myInter {
  46.     name: string;
  47.     constructor(name: string) {
  48.       this.name = name;
  49.     }
  50.     sayHello(): void {
  51.       console.log("大家好");
  52.     }
  53.   }
  54. })();

三、get set 及 public protected private

3.1 get And set

如需使用 getter、setter，TS中已帮我们内置了关键字 get、set 可直接跟上属性名，即可像正常对象的属性一样读取或设置该属性值。

  1. (function () {
  2.   class Person {
  3.     // TS可以在属性前添加修饰符
  4.     /**
  5.      * public 公共属性，可以在任意位置访问或修改 默认值，包括子类和实例
  6.      * protected 受保护的属性，只能在当前类和当前类的子类中使用，不能在实例上访问
  7.      * private 私有属性，只能在类内部访问或修改，不能在子类中访问
  8.      */
  10.     private _name: string;
  11.     private _age: number;
  12.     constructor(name: string, age: number) {
  13.       this._name = name;
  14.       this._age = age;
  15.     }
  16.     // 普通做法
  17.     // getName() {
  18.     //   return this.name;
  19.     // }
  20.     // setName(value: string) {
  21.     //   this.name = value;
  22.     // }
  23.     // getAge() {
  24.     //   return this.age;
  25.     // }
  26.     // setAge(value: number) {
  27.     //   if (value >= 0) {
  28.     //     this.age = value;
  29.     //   } else {
  30.     //     throw new Error("年龄必须大于等于0");
  31.     //   }
  32.     // }
  34.     // TS中做法
  35.     get name(): string {
  36.       return this._name;
  37.     }
  38.     set name(value: string) {
  39.       this._name = value;
  40.     }
  41.     get age(): number {
  42.       return this._age;
  43.     }
  44.     set age(value: number) {
  45.       if (value >= 0) {
  46.         this._age = value;
  47.       } else {
  48.         throw new Error("年龄必须大于等于0");
  49.       }
  50.     }
  51.   }
  53.   const person = new Person("孙悟空", 18);
  54.   // 普通做法
  55.   // console.log(person.getName());
  56.   // person.setName("猪八戒");
  57.   // console.log(person.getName());
  58.   // person.setAge(-5);
  59.   // console.log(person);
  61.   // TS做法
  62.   console.log(person.name);
  63.   person.name = "猪八戒";
  64.   console.log(person.name);
  65.   // person.age = -5;
  66.   console.log(person.age);
  67. })();

3.2 public protected private

  1.   class A {
  2.     public name: string;
  3.     protected age: number;
  4.     private num: number;
  6.     constructor(name: string, num: number, age: number) {
  7.       this.name = name;
  8.       this.age = age;
  9.       this.num = num;
  10.     }
  11.   }
  13.   class B extends A {
  14.     test() {
  15.       console.log(this.name);
  16.       console.log(this.age);
  17.       // console.log(this.num); // 属性“num”为私有属性，只能在类“A”中访问
  18.     }
  19.   }
  20.   const b = new B("阿喵", 1, 3);
  21.   console.log(b.name);
  22.   // console.log(b.age); // 属性“age”受保护，只能在类“A”及其子类中访问。
  23.   // console.log(b.num); // 属性“num”为私有属性，只能在类“A”中访问。
  26.   /**
  27.    * 语法糖，简写了属性的定义及赋值
  28.    */
  29.   class C {
  30.     // 可以直接将属性定义在构造函数中
  31.     constructor(public name: string, protected age: number) {}
  32.   }
  34.   const c = new C("阿呆", 8);
  35.   console.log(c);

四、泛型

在定义函数或者类时，如果遇到类型不明确的，就可以使用泛型。
泛型就是一个不确定的类型。
在我们类型不明确的时候，整一个变量，用这个变量来表示类型(泛型)

  1. /**
  2.  * 在定义函数或者类时，如果遇到类型不明确的，就可以使用泛型
  3.  *    => 泛型就是一个不确定的类型。
  4.  *    泛型的作用就是，在我们类型不明确的时候，整一个变量，用这个变量来表示类型(泛型)
  5.  */
  7. // 这个T是什么类型呢？谁都不知道，只有在函数执行的时候才能确定
  8. // 能体现出传入的参数类型，与返回的参数类型是同一类型
  9. function fn<T>(a: T): T {
  10.   return a;
  11. }
  13. // 直接调用具有泛型的函数
  14. let result = fn(2); // TS会自动推断出参数类型
  15. let result2 = fn<string>("hello"); // 手动指定
  16. console.log("result: ", result);
  17. console.log("result2: ", result2);
  19. function fn2<T, K>(a: T, b: K): T {
  20.   console.log(b);
  21.   return a;
  22. }
  24. fn2<number, string>(123, "hello");
  26. interface Inter {
  27.   length: number;
  28. }
  30. // T extends Inter 表示泛型T必须实现Inter接口，即必须是Inter实现类(子类)
  31. function fn3<T extends Inter>(a: T): number {
  32.   return a.length;
  33. }
  35. fn3("123");
  36. // fn3(456); // 类型“number”的参数不能赋给类型“Inter”的参数。
  37. fn3({ name: "good", length: 5 });
  38. fn3([1, 2, 3, 4, 5, 6, 7, 8, 9]);
  40. class MyClass<T> {
  41.   name: T;
  42.   constructor(name: T) {
  43.     this.name = name;
  44.   }
  45. }
  46. const mc = new MyClass<string>("孙悟空");

五、tsconfig.js 配置文件解析

  1. {
  2.   // include 包含
  3.   // 一个(*)任意文件，两个(*)任意目录
  4.   "include": ["./src/**/*"],
  5.   // exclude 不包含 默认值：["node_modules","bower_components","jspm_packages"]
  6.   // "exclude": ["./src/hello/**/*"],
  7.   // 定义被继承的配置文件
  8.   // "extends": "",
  11.   // compilerOptions 编译选项
  12.   "compilerOptions": {
  13.     // 打包代码生成的格式
  14.     // 'es3', 'es5', 'es6', 'es2015', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'es2021', 'esnext'
  15.     "target": "ES3",
  16.     // 支持的模块化格式 'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020', 'esnext'.
  17.     "module": "system",
  18.     // 用来指定项目中要使用的库,为空的话则没有document这些代码提示，以此区分代码提示是在浏览器环境还是Node
  19.     // 'es5', 'es6', 'es2015', 'es7', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'es2021', 'esnext', 'dom', 'dom.iterable', 'webworker', 'webworker.importscripts', 'webworker.iterable', 'scripthost', 'es2015.core', 'es2015.collection', 'es2015.generator', 'es2015.iterable', 'es2015.promise', 'es2015.proxy', 'es2015.reflect', 'es2015.symbol', 'es2015.symbol.wellknown', 'es2016.array.include', 'es2017.object', 'es2017.sharedmemory', 'es2017.string', 'es2017.intl', 'es2017.typedarrays', 'es2018.asyncgenerator', 'es2018.asynciterable', 'es2018.intl', 'es2018.promise', 'es2018.regexp', 'es2019.array', 'es2019.object', 'es2019.string', 'es2019.symbol', 'es2020.bigint', 'es2020.promise', 'es2020.sharedmemory', 'es2020.string', 'es2020.symbol.wellknown', 'es2020.intl', 'es2021.promise', 'es2021.string', 'es2021.weakref', 'esnext.array', 'esnext.symbol', 'esnext.asynciterable', 'esnext.intl', 'esnext.bigint', 'esnext.string', 'esnext.promise', 'esnext.weakref'.
  20.     // "lib": ['a'],
  21.     // 指定输出文件目录
  22.     "outDir": "./dist",
  23.     // 全局作用域中的代码会合并到同一个文件中
  24.     "outFile": "./dist/main.js",
  25.     // 是否对 JS 文件进行编译：default:false
  26.     "allowJs": true,
  27.     // 检查 JS 代码是否符合 TS语法规范。检查强类型
  28.     "checkJs": true,
  29.     // 是否移除注释 
  30.     "removeComments": true,
  31.     // 不生成编译后的文件 default:false
  32.     "noEmit": false,
  33.     // 有错误不生成编译文件 default:false
  34.     "noEmitOnError": true,
  35.     // strict 所有严格检查的总开关 default:false
  36.     "strict": true,
  37.     // 编译后的文件是否使用严格模式。 default:false
  38.     "alwaysStrict": true,
  39.     // 不允许隐式 any 类型 default:false(即默认可以使用 隐式 any)
  40.     "noImplicitAny": false,
  41.     // 不允许不明确类型的 this
  42.     "noImplicitThis": false,
  43.     // 严格的检查空值
  44.     "strictNullChecks": true,
  45.   }
  46. }

转载请注明作者和出处，并添加本页链接。
原文链接: //www.v2ci.com/32.html

下一篇：webpack模块化实现原理

上一篇：TypeScript 在开发应用中的实践总结