TS —— 1、定义、泛型、类、枚举、元组、抽象

悠悠 2022-10-19 05:40 333阅读 0赞

目录

42、TypeScript

（1）JavaScript 与 TypeScript 的区别

（2）优势、缺点

（4）安装

（5）查看版本

（6）编译

（7）写法

（8）为什么要用到TS

（9）定义

1.类型定义

（1）联合类型

（2）任意类型

2.数组类型

（1）方式一：数组

（2）方式二：泛型

3.面向对象—接口类型

（1）接口的定义：

（2）可选属性：

（3）任意属性 ：（一个接口允许随便加）

（4）泛型（常用）

4.函数类型

（1）参数默认值

（2）可选参数

（3）接口在函数中的运用

（4）注意：length

（10）泛型

1.泛型类

2.什么时候需要定义泛型函数

3.泛型约束

（1）接口（常用）

（2）数组

（3）类

（4）多个类型参数

（11）类型别名

（12）类

1.定义类

（1）ES5（构造函数）

（2）ES6

2.类的继承

3.修饰符

4.类的类型

5.类实现接口

6.一个类可以实现多个接口

（13）枚举

（14）元组

（15）抽象类abstract

42、TypeScript

TypeScript是.ts文件，与.js相似，但只是用来编写代码，运行还是在.js中（下面优势与缺点）

TypeScript 是一种由微软开发的自由开源的编程语言，他是JavaScript的一个超集，扩展了JavaScript的 语法，主要提供了类型系统和对 ES6 的支持。

TypeScript 设计目标是开发大型应用，它可以编译成纯 JavaScript，编译出来的 JavaScript 可以运行在任何浏览器上。

（1）JavaScript 与 TypeScript 的区别

TypeScript 是 JavaScript 的超集，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与

TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。

TypeScript 可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译。

（2）优势、缺点

优点：

强大的IDE支持：体现在三个特性上：

1.类型检查，在TS中允许你为变量指定类型（js文件不会）

2.语法提示（js文件不会）

3.重构Angular2、vue3的开发语言

20210710001106205.png //分别在两个文件中

缺点：

有一定的学习成本，需要理解

接口（Interfaces）、

泛型（Generics）、

类（Classes）、

枚举类型（Enums）等前端开发可能不是很熟悉的知识点

（3）编辑器

TypeScript 最大的优势之一便是增强了编辑器和 IDE 的功能，包括代码补全、接口提示、跳转到定义、重构等。

主流的编辑器都支持 TypeScript，推荐使用 Visual Studio Code。

获取其他编辑器或 IDE 对 TypeScript 的支持：

Sublime Text

Atom

WebStorm

Vim

Emacs

Eclipse

Visual Studio 2015

Visual Studio 2013

（4）安装

npm install -g typescript

以上命令会在全局环境下安装 tsc 命令，安装完成之后，我们就可以在任何地方执行 tsc 命令了

（5）查看版本

tsc -v

（6）编译

编译一个 TypeScript 文件

tsc hello.ts

使用 TypeScript 编写的文件以 .ts 为后缀

（7）写法

使用 :**（冒号）指定变量的类型，:** 的前后有没有空格都可以

也就是说 :**（冒号）**后面的是类型

  1. let num:number = 15;
  2.     num(变量名）:number(类型） = 15（具体值）
  3.     // 表示定义一个变量num，指定类型为number;
  4.     let str:string = 'abc';
  5.     // 表示定义一个变量str，指定类型为string;

20210710001233294.png //在.ts文件中这样写不会报错

20210710001239806.png

20210710001241731.png //自动生成一个同名的.js文件

（8）为什么要用到TS

  1. //定义一个函数计算二个数据的合计
  2.     function sum(x, y) {
  3.         if (typeof x != 'number') { //对于形参的类型要添加转换
  4.             x = parseInt(x);
  5.         }
  6.         return x + y
  7.     };
  8.     sum('1', 2);    //3
  9.     //TS的方式，直接约束了类型

20210710001307601.png

（9）定义

1.类型定义

  1. let flag: boolean = false; //布尔类型
  2.     let num: number = 15; //数值类型
  3.     let str: string = 'abc'; //字符串类型
  4.     let str2: string = `hello,${str}`;
  5.     let msg: string = `hello,${str},${num}`;
  6.     let u: undefined = undefined;
  7.     let n: null = null;

（1）联合类型

表示取值可以为多种类型中的一种

  1. let a4: string | number;    //a4为多个类型
  2.     a4 = 'seven';
  3.     a4 = 7;

20210710001442714.png //提示错误（布尔类型）

  1. function getLength(str: string | number): number {    //第二个number是返回类型
  2.         return str.length; //length提示错误，为什么？
  3.     }
  4.     console.log(getLength(123));
  5.     //当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候，只能访问此联合类型的所有类型里共有的属性或方法
  6. ===================================================================================
  7.     //解决
  8.     function getLength(str: string | number[]): number {
  9.         return str.length;
  10.     }
  11.     console.log(getLength([1, 2, 3]));

（2）任意类型

如果是一个普通类型，在赋值过程中改变类型是不被允许的，任意值（Any）用来表示允许赋值为任意类型

  1. let a1: string = 'seven';
  2.     a1 = 7;    //提示错误
  3.     //但如果是 any 类型，则允许被赋值为任意类型
  4.     let a2: any = 'seven';
  5.     a2 = 7;
  6. -----------------------------------------------------------------------------------
  7.     //变量如果在声明的时候，未指定其类型，那么它会被识别为任意值类型
  8.     let a3;
  9.     a3 = 'seven';
  10.     a3 = 7;
  11.     //相当于
  12.     let a3: any;
  13.     a3 = 'seven';
  14.     a3 = 7;

2.数组类型

（1）方式一：数组

在 TypeScript 中，数组类型有多种定义方式，比较灵活。

最简单的方法是使用 [类型 + 方括号] 来表示数组：

  1. let arr: number[] = [1, 2, 3, 4, 5];
  2.     // 数组的项中不允许出现其他的类型
  3.     var arr2: number[] | string[] = [1, '2', 3, 4, 'a'];
  4.     // 其它类型的数组
  5.     let arr3: any[] = [1, '1', 2, 'x', {id:1},[1,2,3],true];

（2）方式二：泛型

泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性

泛型变量 ,T可以表示任何类型

  1. let arr:Array<number> =[1,2,3];
  2.     let arr:Array<number | string> =['1',2,3];        //定义多个类型

3.面向对象—接口类型

在面向对象语言中，接口（Interfaces）是一个很重要的概念，它是对行为的抽象

接口（Interfaces）可以用于对「对象的形状（Shape）」进行描述。

（1）接口的定义：

  1. interface Person {
  2.         name: string;
  3.         age: number;
  4.     }  
  5.     let tom: Person = {
  6.         name: 'Tom',
  7.         age: 18
  8.     };
  9.     //上面的例子中，我们定义了一个接口 Person，接着定义了一个变量 tom，它的类型是 Person
  10.     //这样，我们就约束了 tom 的形状必须和接口 Person 一致

定义的变量比接口多、少一个属性是不允许的：

  1. let tom2: Person = {    
  2.         name: 'Tom'    
  3.     };
  4.     let tom3: Person = {    
  5.         name: 'Tom',
  6.         age: 25,
  7.         sex: '男'        //提示错误
  8.     };

（2）可选属性：

  1. interface Person2 {
  2.         name: string;
  3.         age?: number;    //可有可无
  4.     }
  5.     let tom4: Person2 = {    
  6.         name: 'Tom'    //不会报错
  7.     };
  8.     // 可选属性的含义是该属性可以不存在。这时仍然不允许添加未定义的属性：
  9.     let tom5: Person2 = {
  10.         name: 'Tom',
  11.         age: 25,
  12.         sex: '男'        //提示错误
  13.     };

（3）任意属性 ：（一个接口允许随便加）

  1. interface Person3 {
  2.         name: string;
  3.         age?: number;
  4.         [aa: string]: any;    //键名可以为任意类型
  5.     };
  6.     let tom6: Person3 = {
  7.         name: 'Tom',
  8.         //随便加
  9.         sex: '男',
  10.         fun: function(){ },
  11.         o:{id: 1},
  12.     };
  13.     //一旦定义了任意属性，那么确定属性和可选属性都必须是它的子属性

（4）泛型（常用）

判断abc中是否包含a：

方式一：

20210710002026482.png

方式二：简化（推荐）

20210710002031458.png

20210710002033630.png

方式三：

20210710002040194.png

4.函数类型

一个函数有输入和输出，要在 TypeScript 中对其进行约束，需要把输入和输出都考虑到

  1. //xy为输入的类型，:number为输出类型（number也可以写成void无返回类型）
  2.     function sum1(x:number, y:number): number{ 
  3.         return x+y;
  4.     }

（1）参数默认值

  1. function sum3(x:number =5, y:number): number{
  2.         return x+y;
  3.     }
  4.     let s1 = sum3(1, 2);

（2）可选参数

  1. function sum4(x: number, y?: number): number[]{    //?必须写在后面
  2.         return [x, y]
  3.     }
  4.     let s2 = sum4(1);        //写一个会报错，？可以解决

（3）接口在函数中的运用

  1. //函数方式
  2.     function f1(obj: {id: number, name: string}): number {
  3.         return obj.id
  4.     }
  5.     var o = {id: 2, name: 'xyz'}
  6.     f1(o)
  7. -----------------------------------------------------------------------------------
  8.     //接口方式
  9.     interface ObjName{
  10.         id: number
  11.         name: string
  12.     }
  13.     function f2(obj: ObjName): number{
  14.         return obj.id
  15.     }

（4）注意：length

20210710002302800.png//length（长度）

解决：2021071000231459.png

===================================================================================

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70//length可以是任何类型

===================================================================================

  1. function f4<T>(arg: T): T {
  2.         console.log(arg.length);     //错误: T不存在length属性 比如数值等
  3.     }                            //length可以为任何类型

使用了 extends 约束了泛型 T 必须符合接口 LengthN 的形状，也就是必须包含 length 属性。

  1. interface LengthN {
  2.         length: number;
  3.     }
  4.     function myHello<T extends LengthN>(arg: T): T {
  5.         console.log(arg.length);
  6.         return arg;
  7.     }
  8.     myHello <string>('123');
  9.     myHello(123);    //错误（必须是字符串）
  10.     myHello<number>(123);   //错误，只能写字符串类型（唯一写法？）
  11.     myHello<boolean>(true); //错误

（10）泛型

泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定

类型的一种特性。

泛型变量 ,T可以表示任何类型

1.泛型类

  1. // 函数声明
  2.     function mySum<T>(x: T): T {
  3.         return x;
  4.     }
  5.     // 函数表达式
  6.     let mySum1 = function <U>(x: U): U {    //U和T一样
  7.         return x;
  8.     };
  9.     // ES6箭头函数
  10.     let mySum2 = <T>(x:T):T => x;

2.什么时候需要定义泛型函数

要创建一个可重用的组件，其中的数据类型就必须要兼容很多的类型，那么如何兼容呢？

  1. function f(a: number, b: number): number[] {
  2.         return [a, b]
  3.     }
  4.     f(1, 2);
  6.     function f2(a: string, b: string): string[] {
  7.         return [a, b]
  8.     }
  9.     f2('1', '3')
  11.     function f2(a: boolean, b: boolean): boolean[] {
  12.         return [a, b]
  13.     }
  14. //-----------------------------------------------------------------------------------
  15.     // 为了解决上面返回不同类型的问题：
  16.     // 泛型的定义
  17.     function f3<T>(a:T, b:T): T[] {
  18.         return [a, b]
  19.     }
  20.     f3<number>(1, 2)
  21.     f3<string | number>(2, 'a')
  22.     f3(1, 2)        //类型推断（不建议用，返回值不确定）
  23.     f3('a','a')
  24.     f3(1,'a')    //报错
  25.     // 我们把f3这个函数叫做泛型，因为它适用于所有类型，并且不会有any类型存在的问题
  26.     // 使用‘类型变量’ 一种特殊的变量，代表的是类型而非值

一旦我们定义了泛型函数，有两种方法可以使用。

第一种就是传入所有的参数，包括类型参数

  1. f3<number>(1, 2)
  2.     f3<string | number>(2, 'a')

第二种是最常见的。我们使用/类型推断/ 编译器会根据传入的参数自动地帮助我们确定T的类型

  1. f3(1, 2)        //类型推断（不报错，自动）不建议用，返回值不确定
  2. f3('a','a')
  3. f3(1,'a')    //报错

20210710002612146.png //报错

20210710002619243.png //如果返回类型是布尔，改一下返回类型即可

3.泛型约束

（1）接口（常用）

当你开始使用泛型，你可能会注意到当你创建一个类似”f4”的泛型函数，编译器会强制要求你在函数中正确的使用这些通用类型参数。

  1. function f4<T>(arg: T): T {
  2.         console.log(arg.length);     //错误: T不存在length属性 比如数值等
  3.     }

使用了 extends 约束了泛型 T 必须符合接口 LengthN 的形状，也就是必须包含 length 属性。

  1. interface LengthN {
  2.         length: number;
  3.     }
  4.     function myHello<T extends LengthN>(arg: T): T {
  5.         console.log(arg.length);    //3（长度）
  6.         return arg;
  7.     }
  8.     myHello<string>('123');    //"123"
  9.     myHello(123);    //错误（必须是字符串）

=====================================================================

之前上面写过接口泛型，看一下：

方式一：

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 1

方式二：简化（推荐）

20210710002733458.png

20210710002736409.png

方式三：

20210710002741733.png

（2）数组

  1. let arr: Array<number> = \[1, 1, 2, 3, 5\];

这段代码编译不会报错，但是一个显而易见的缺陷是，返回值的类型不确定

案例：

  1. function f(length: number, value: any): Array<any> {
  2.         let result = [];
  3.         for (let i = 0; i < length; i++) {
  4.             result[i] = value;
  5.         }
  6.         return result;
  7.     }
  8.     f(3, 'x');    //["x", "x", "x"]  3个x

在函数名后添加了，其中T用来指代任意输入的类型

简化：（更加灵活）

  1. function f<T>(length: number, value: T): Array<T> {
  2.         let result: T[] = [];
  3.         for (let i = 0; i < length; i++) {
  4.             result[i] = value;
  5.         }
  6.         return result;
  7.     }
  8.     f<string>(3, 'x');    //["x", "x", "x"]  3个x

（3）类

  1. class A2<T>{
  2.         n: T;
  3.         constructor(num:  T) {
  4.             this.n = num;
  5.         }
  6.         add(x: T): T {
  7.             return x;
  8.         }
  9.     }
  10.     var a2 = new A2 <number>(1);
  11.     a2.add(3)

（4）多个类型参数

  1. function multi<N, S>(sum:[N,S]): [S,N] {
  2.         return [sum[1], sum[0]];
  3.     }
  4.     multi <number, string>([3, 'one']);    //["one", 3]
  5. ===================================================================================
  6. //案例：
  7. //泛型约束
  8.     interface Length3{
  9.         length: number;
  10.     }
  11.     interface createA3<N, T extends Length3> {
  12.         (a: N, b: T): Array<T>
  13.     }
  15.     var c3: createA3<number, string>;
  16.     c3 = function <N, T>(i: N, v: T): Array<T> {
  17.         var a: T[] = [];
  18.         return a;
  19.     };
  20.     c3(2, '123');

（11）类型别名

  1. function myHello(aa: n) {
  2.         return 'Hello,' + aa;
  3.     };
  5.     type n = number;
  6.     let name: n = 18;
  7.     console.log(myHello(name));

（12）类

传统方法中，JavaScript 通过构造函数实现类的概念，通过原型链实现继承。

类(Class)：定义了一件事物的抽象特点，包含它的属性和方法

1.定义类

（1）ES5（构造函数）

  1. // JavaScript 语言中，生成实例对象的传统方法是通过构造函数
  2.     function Cat(name, color) { //构造函数
  3.         this.name = name;
  4.         this.color = color;
  5.         //this.type='动物';
  6.         //this.eat = function(){console.log("吃老鼠")};
  7.     };
  9.     // 原型中
  10.     Cat.prototype.type = '动物';
  11.     Cat.prototype.eat = function () {
  12.         return console.log("吃老鼠");
  13.     };
  14.     var c1 = new Cat("大明", "黄色");
  15.     var c2 = new Cat("小明", "白色");

（2）ES6

ES6 的类，完全可以看作构造函数的另一种写法。

注意，定义“类”的方法的时候，前面不需要加上function这个关键字，直接把函数定义放进去了就可以

了

另外，方法之间不需要逗号分隔，加了会报错。

  1. class Cat2 {
  2.         name: string;     //值类型
  3.         color: string;     //定义值类型
  4.         constructor(name, color) {
  5.             this.name = name;
  6.             this.color = color;
  7.         }
  8.         eat() {
  9.             return console.log("吃老鼠");
  10.         }
  11.         sayName() {
  12.             return `My name is ${this.name}`;
  13.         }
  14.     }
  15.     var c3 = new Cat2("小小明", "黑色");
  16.     console.log(c3.eat())
  17.     console.log(c3.sayName())
  18. ==================================== 编译后 ========================================
  19.     var Cat2 = /** @class */ (function () {
  20.         function Cat2(name, color) {
  21.             this.name = name;
  22.             this.color = color;
  23.         }
  24.         Cat2.prototype.eat = function () {
  25.             return console.log('吃老鼠');
  26.         };
  27.         Cat2.prototype.aa = function () {
  28.             return "you " + this.name;
  29.         };
  30.         return Cat2;
  31.     }());
  32.     var c3 = new Cat2("小小米", "黑色");
  33.     console.log(c3.eat());
  34.     console.log(c3.aa());

2.类的继承

  1. class Animal {
  2.         name: string;
  3.         constructor(name) {
  4.             this.name = name;
  5.         }
  6.         eat() {
  7.             return "吃骨头";
  8.         }
  9.     }
  10.     //继承
  11.     class Dog extends Animal {
  12.         age: string;
  13.         aa: string;
  14.         constructor(name, age, aa) { 
  15.             super(name)
  16.             this.age = age;
  17.             this.aa = aa;
  18.         }
  19.         sayHi() {
  20.             return this.name + ',' + this.eat(); //调用父类的
  21.         }
  22.     }
  24.     let d = new Dog('a', 'a', 'a');
  25.     console.log(d.sayHi());

3.修饰符

public 属性或方法是公有的，可以在任何地方被访问到，默认所有的属性和方法都是 public 的；

protected 属性或方法是受保护的，它和 private类似，区别是它能在子类中允许被访问的；

private 属性或方法是私有的，不能在声明它的类的外部访问；

protected:

20210710003112131.png

  1. //常见写法
  2.     class Obj3 {
  3.         private name;
  4.         public constructor(name) {
  5.             this.name = name;
  6.         }
  7.         protected action() {
  8.             return this.name
  9.         }
  10.     };
  11.     class Dog2 extends Obj3 {
  12.         a: string;
  13.         b: string;
  14.         c: string;
  15.         constructor(name, a, b, c) {
  16.             super(name);
  17.             this.a = a;
  18.             this.b = b;
  19.             this.c = c;
  20.         }
  21.         say() {
  22.             //return this.name  //调用的父类
  23.             return this.action()
  24.         }
  25.     };
  26.     let obj3 = new Obj3('tom');
  27.     //obj3.name;
  28.     //obj3.action(); 
  29.     let d2 = new Dog2('abc', 'a', 'b', 'c');

watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80NTA0MjU2OQ_size_16_color_FFFFFF_t_70 2 //static不需要实例化，直接调用

4.类的类型

  1. class Animal5 {
  2.         name: string;
  3.         constructor(name: string) {
  4.             this.name = name;
  5.         }
  6.         sayHi(): string {
  7.             return `My name is ${this.name}`;
  8.         }
  9.     }
  10.     let s4: Animal5 = new Animal5('Jack');
  11.     console.log(s4.sayHi());    
  12. ==================================== 编译后 ========================================
  13.     var Animal5 = (function () {
  14.         function Animal5(name) {
  15.             this.name = name;
  16.         }
  17.         Animal5.prototype.sayHi = function () {
  18.             return "My name is " + this.name;
  19.         };
  20.         return Animal5;
  21.     }());
  22.     var s4 = new Animal5('Jack');
  23.     console.log(s4.sayHi());    //My name is Jack

5.类实现接口

  1. interface Obbj4 {
  2.         name: string;        //子类接了接口，属性和方法都必须写
  3.         action(): string;
  4.     }
  5. -----------------------------------------------------------------------------------
  6. //写法一
  7.     class dog2 implements Obbj4 {
  8.         name: string;
  9.         constructor(name) {
  10.             this.name = name;
  11.         }
  12.         action() {
  13.             return '111'
  14.         }
  15.     }
  16.     let s6 = new dog2('Jack');
  17. -----------------------------------------------------------------------------------

//写法二

20210710003230955.png//接口的约束（注意name后面的逗号）

实现（implements）是面向对象中的一个重要概念。一般来讲，一个类只能继承自另一个类，

有时候不同类之间可以有一些共有的特性，这时候就可以把特性提取成接口（interfaces），

用 implements 关键字来实现。这个特性大大提高了面向对象的灵活性。

举例来说，门是一个类，防盗门是门的子类。如果防盗门有一个报警器的功能，

我们可以简单的给防盗门添加一个报警方法。这时候如果有另一个类，车，也有报警器的功能，

就可以考虑把报警器提取出来，作为一个接口，防盗门和车都去实现它：

  1. interface Alarm {    // 报警器
  2.         sing();         //一个抽象的空方法
  3.     };
  4.     class Door { };    // 定义门
  5.     // 防盗门继承门实现报警器的功能
  6.     class SecurityDoor extends Door implements Alarm {
  7.         sing() {
  8.             console.log('SecurityDoor sing');
  9.         }
  10.     };
  11.     // 车实现报警器的功能
  12.     class Car implements Alarm {
  13.         sing() {
  14.             console.log('Car sing');
  15.         }
  16.     };
  17.     var d1 = new SecurityDoor();
  18.     var car = new Car();

6.一个类可以实现多个接口

  1. interface Alarm2 {
  2.         alert();
  3.     }
  4.     interface Light {
  5.         lightOn();
  6.         lightOff();
  7.     }
  8. -----------------------------------------------------------------------------------
  9.     // 实现多个接口Car实现了Alarm和Light接口，既能报警，也能开关车灯
  10.     class Car3 implements Alarm2, Light {
  11.         alert() {
  12.             console.log('Car alert');
  13.         }
  14.         lightOn() {
  15.             console.log('Car light on');
  16.         }
  17.         lightOff() {
  18.             console.log('Car light off');
  19.         }
  20.         aaa() {
  21.             console.log('aaa');
  22.         }
  23.     }
  24. -----------------------------------------------------------------------------------

//这种写法只能用一个接口

20210710003353650.png

（13）枚举

数组中获取数据，只能通过数组来获取，不能通过名称来获取

enum类型是对JavaScript标准数据类型的一个补充

  1. var arr = ['a', 'b', 'c'];
  2.     arr[0];        //可以
  3.     arr['a']     //错误 不能通过名称来获取，只能索引
  5.     var obj = {a: 'a', b: 'b'}; //对象
  6.     obj.a         //'a'    可以
  7.     obj['a']     //'a'    可以
  8. 定义：
  9.     enum Color {Red, Green=5, Blue};
  10.     let c = Color.Blue;            //6
  11.     let c2: Color = Color.Green;    //5（元素编号会随之变化）

20210710003424609.png

  1. let c3 = Color[0];      //Red
  2. let c4 = Color[1];      //undefined
  4. let c4: string = Color[0];    //Red
  5.     let c5: string = Color[2];    //undefined
  6. 任意值
  7.     enum Color6 {Red=1.6, Green, Blue=<any>"b"};
  8. let c6: number = Color6.Red;    //1.6
  9. let c6: string = Color6.Green;//2.6（元素编号会随之变化）
  10. let c6: number = Color6.Blue;    //b

20210710003438423.png

如果未手动赋值的枚举项与手动赋值的重复了后面的会覆盖前面的，尽量不要重复

  1. enum Color7 {Red=1, Green=3, Blue=<any>"b"};
  2.     let c7:string = Color7[1];      //Red 
  3.     let c8:string = Color7[3];    //Green 
  4.     let c9:string = Color7['b'];    //Blue

枚举项有两种类型：常数项和计算所得项

  1. var aa='123';
  2.     enum Color8{Red, Green=<any>aa, Blue="blue".length};
  3.     let c:Color8 = Color8.Green;    //123
  4.     let c:Color8 = Color8.Blue;    //4

如果紧接在计算所得项后面的是未手动赋值的项，那么它就会因为无法获得初始值而报错

  1. var aa='123';
  2.     enum Color9 {Red=<any>aa, Green=<any>aa, Blue="blue".length}; //可以的
  3.     //enum Color9 {Red=<any>aa, Green, Blue}; //这种错误

（14）元组

数组合并了相同类型的对象

元组合并了不同类型的对象。

我们知道数组中元素的数据类型都一般是相同的（any[] 类型的数组可以不同），如果存储的元素数据类型不同，则需要使用元组

  1. var lists: number[] = [1, 2, 3];
  2.     var lists2: Array<string> = ['a', 'b', 'c'];    //数组泛型 不允许有其它的类型
  3.     var lists3: Array<string | number> = ['a', 'b', 1, 2];
  4.     //任意值
  5.     var lists4: any[] = ['a', 1, true];
  6. ===================================== 元组 =========================================
  7.     let x: [number,string];
  8.     x = [5,'abc'];

元组它允许表示一个已知元素数量和类型的数组，各元素的类型不必相同

1、数组中的数据类型必须和规定的类型顺序对应起来

2、当使用越界索引给数组赋值的时候，会使用联合类型（只要值是规定类型的某一种即可）

  1. var ff = function () {
  2.         let x1: [string, number];
  3.         x1 = ['abc', 5];
  4.         x1[1] = 10;
  5.         console.log(x1);     //["abc", 10]
  6.     }
  7.     ff();

（15）抽象类abstract

  1. 抽象类的子类必须实现抽象类里的抽象方式

  2. 不能被实例化

    abstract class A {

    1.     abstract action():void;   
    2. }
    3. class B extends A {
    4.     action(){    //1.子类必须实现此方法   
    5.     }
    6. }
    7. var a = new A();    //2.抽象类不能实例化

发表评论

表情：
评论列表 （有 0 条评论，333人围观）

还没有评论，来说两句吧...

相关阅读

    相关 Java基础 ：内部类、枚举、泛型

    泛型提供了在编译阶段 约束所能操作的数据类型，并自动进行检查的能力！这样可以避免强制类型转换，及其可能出现的异常，保证所操作的数据类型的统一。定义类，接口，方法时，声明一...

    Myth丶恋晨Myth丶恋晨/ 0 赞/ 119 阅读

    相关 TS的枚举

    官方定义 使用枚举我们可以定义一些带名字的常量。 使用枚举可以清晰地表达意图或创建一组有区别的用例。 TypeScript支持数字的和基于字符串的枚举。枚举使用 `enu

    た 入场券た 入场券/ 0 赞/ 232 阅读

    相关 泛型和枚举

    　　　　泛型： 　　　　　　　　jdk1.5版本之后出现的新特性，用于解决安全问题，是一个安全机制. 　　　　　　　　泛型格式；通过<>定义操作的引用数据类型，在jav

    古城微笑少年丶古城微笑少年丶/ 0 赞/ 372 阅读