【TypeScript】超详细的笔记式教程!进阶!!【下】(2)

简介: 类型别名类型别名顾名思义,即字面意思,其实断言也是字面意思,就是断定类型的方法,你说是什么类型就是什么类型,推翻约定,扯远了,继续说类型别名,举个🌰吧:

抽象类

abstract 用于定义抽象类和其中的抽象方法,首先抽象类不允许被实例化,举个栗子:

abstract class Animal {
    public constructor(public name: string) {}
    public abstract sayHi(): void;
}
let a = new Animal('jack')
复制代码

抛出错误:

网络异常,图片无法展示
|

其次,抽象类的抽象方法必须被子类实现:

class Cat extends Animal {
    public eat() {
        console.log()
    }
}
复制代码

如果不实现sayHi方法,就会抛出错误

网络异常,图片无法展示
|

正确的做法如下:

abstract class Animal {
  public constructor(public name: string) {}
  public abstract sayHi(): void;
}
class Cat extends Animal {
  public eat(): void {
    console.log("im eating");
  }
  public sayHi(): void {
    console.log("hi~ my name is " + this.name);
  }
}
let c = new Cat("Jack");
c.eat();
c.sayHi();
复制代码

类的类型

很简单

class Animal {
  public constructor(public name: string) {}
  public sayHi(): string {
    return `Hi~ my name is ${this.name}`;
  }
}
let a: Animal = new Animal("Jack");
复制代码

泛型

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

基本定义

我们实现一个 createArray函数,他可以创建一个指定长度的数组,同事将每一项都填充一个默认值:

function createArray(length: number, value: any): Array<any> {
    let result = []
    for(let i = 0; i < length; i++) {
        result[i] = value
    }
    return result
}
复制代码

上面我们用到的是数组泛型,但是any还是有点不妥,我们希望与 value的类型相同,但是我们并不知道value是什么类型,这时候泛型就起作用了:

function createArray<T>(length: number, value: T): Array<T> {
    let result: T[] = []
    for(let i = 0; i < length; i++) {
        result[i] = value
    }
    return result
}
createArray<string>(3, 'x')
复制代码

上面的栗子里,我们在函数名后面添加了<T>,其中T用来指代任意输入的类型,在后面输入value: T和输出Array<T>中即可使用了。

接下来的调用中,具体的指定它为string,也可以不指定,交给类型推导

createArray(3, 'x')
复制代码

多个类型参数

定义泛型的时候,可以一次定义多个类型参数:

function swap<T, U>(tup;e: [T, U]): [T, U] {
    return [tuple[1], tuple[0]]
}
swap([7, 'seven']) // ['seven', 7]
复制代码

泛型约束

函数内部使用泛型变量的时候,我们可能不知道它到底是那种类型,所以不能随意的操作他的属性或者方法:

function loggingIdentity<T>(arg: T): T {
    console.log(arg.length)
    return arg
}
复制代码

这样写会抛出错误:

网络异常,图片无法展示
|

因为泛型T上不一定有length,这时候,我们可以对泛型进行约束,只允许这个函数传入那些包含length属性的变量,这就是泛型约束

interface lengthwise {
    length: number;
}
function loggintIdentity<T extends lengthwise>(agr: T): T {
    console.log(agr.length)
    return arg
}
复制代码

这个时候如果你调用loggintIdentity传入的值没有length属性,那么会抛出错误

网络异常,图片无法展示
|

多个类型参数之间也可以互相约束:

function copyFields<T extends U, U>(target: T, source: U): T {
  for (const key in source) {
    if (Object.prototype.hasOwnProperty.call(source, key)) {
      target[key] = (<T>source)[key];
    }
  }
  return target;
}
let x = { a: 1, b: 2, c: 3, d: 4 };
console.log(copyFields(x, { b: 10, d: 20 }));
复制代码

这块可能有同学看不懂target[key] = (<T>source)[key]是啥意思了,我在这解释一下:

(<T>source)[key] === (source as T)[key]

现在的情况是:target的类型是Tsource的类型是U,二者的类型不同,所以无法直接赋值,二者必须断言一个,使他们变成统一类型,如果不这么做,会抛出一个错误:

网络异常,图片无法展示
|

泛型接口

接口可以约定一个函数的形状:

interface SearchFunc {
    (source: string, subString: string): boolean;
}
let mySearch: SearchFunc;
mySearch = function (source: string, substring: string) {
    return source.search(subString) !== -1
}
复制代码

也可以使用有泛型的接口定义函数的形状:

interface CreateArrayFunc {
  <T>(length: number, value: T): Array<T>;
}
let createArray: CreateArrayFunc;
createArray = function <T>(length: number, value: T): Array<T> {
  let result: T[] = [];
  for (let i = 0; i < length; i++) {
    result[i] = <T>value;
  }
  return result;
};
console.log(createArray(3, "x"));
复制代码

泛型参数的默认值

interface CreateArrayFunc {
  <T>(length: number, value: T): Array<T>;
}
let createArray: CreateArrayFunc;
createArray = function <T = string>(length: number, value: T): Array<T> {
  let result: T[] = [];
  for (let i = 0; i < length; i++) {
    result[i] = <T>value;
  }
  return result;
};
console.log(createArray(3, "x"));
目录
相关文章
|
3月前
|
JavaScript 前端开发
TypeScript【类型别名、泛型】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第11天】TypeScript【类型别名、泛型】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
3月前
|
JavaScript 前端开发 Java
TypeScript【接口】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第10天】TypeScript【接口】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
3月前
|
JavaScript 前端开发 安全
TypeScript【基础类型】超简洁教程!再也不用看臭又长的TypeScript文档了!
【10月更文挑战第9天】TypeScript【基础类型】超简洁教程!再也不用看臭又长的TypeScript文档了!
|
5月前
|
JavaScript 前端开发 编译器
TypeScript教程(一)在vscode中的配置TypeScript环境
本文是一篇TypeScript入门教程,介绍了在VS Code中配置TypeScript环境的步骤,包括安装Node.js、使用npm安装TypeScript、配置npm镜像源、安装VS Code的TypeScript扩展,以及创建和运行一个简单的TypeScript "Hello World"程序。
TypeScript教程(一)在vscode中的配置TypeScript环境
|
3月前
|
JavaScript 索引
TypeScript(TS)安装指南与基础教程学习全攻略(二)
TypeScript(TS)安装指南与基础教程学习全攻略(二)
63 0
|
3月前
|
JavaScript 前端开发 安全
TypeScript(TS)安装指南与基础教程学习全攻略(一)
TypeScript(TS)安装指南与基础教程学习全攻略(一)
36 0
|
5月前
|
资源调度 JavaScript 前端开发
TypeScript实战教程(一):表单上传与后端处理
本文是TypeScript实战教程的第一部分,介绍了使用TypeScript进行表单上传和后端处理的完整流程,包括环境配置、前端表单创建、使用TypeScript和Express框架搭建服务端、处理表单数据,并提供了详细的代码示例和运行测试方法。
TypeScript实战教程(一):表单上传与后端处理
|
5月前
|
存储 JavaScript 前端开发
深入浅出TypeScript | 青训营笔记
深入浅出TypeScript | 青训营笔记
40 0
|
7月前
|
JavaScript 编译器
31.【TypeScript 教程】混入(Mixins)
31.【TypeScript 教程】混入(Mixins)
47 3
|
6月前
|
JavaScript 前端开发 程序员
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
Typescript 【实用教程】(2024最新版)含类型声明,类型断言,函数,接口,泛型等
97 0