【备战春招】第7天 专为小白设计的TypeScript入门课——基础篇

课程名称

专为小白设计的TypeScript入门课

课程章节

第2章 TypeScript 基础语法入门

• 2-12 复杂函数类型补充学习

课程讲师

Dell

课程内容

• 复杂函数类型
  • 有属性的函数类型定义方法
  • 构造函数的类型如何定义
  • Date 的类型
  • 函数和泛型
  • 函数重载

课程收获

有属性的函数类型定义方法

一个函数，本身它又带有属性，这个类型我们如何定义呢？
利于interface定义FunctionWithAttributes，它有attr属性，然后参数与返回值用小括号和冒号的形式定义。

// 有属性的函数类型定义方法
interface FunctionWithAttributes {
  attr: string;
  (str: string): void;
}

const test: FunctionWithAttributes = (str: string) => {
  console.log(str);
}
test.attr = 'attributes';

构造函数的类型如何定义
testOne函数的参数是一个类，且该类的构造函数还可接收一个参数。
interface定义一个ClassWithConstructor，构造函数用new表示，然后定义它的参数和返回值即可。
ClassWithConstructor与TestOne类型一致，TestOne类就可以传入进testOne函数了。

// 构造函数的类型如何定义
interface ClassWithConstructor {
  new (str: string): void;
}

function testOne(outerClass: ClassWithConstructor) {
 const instance = new outerClass('new')
}

class TestOne {
  name: string;
  constructor(str: string) {
    this.name = str;
  }
}

testOne(TestOne);

TestOne类的constructor的str参数为number，再去调用testOne(TestOne)，则会报错了。

class TestOne {
  name: string;
  constructor(str: number) {
    this.name = str;
  }
}

testOne(TestOne);

Date 的类型
在js当中可以使用内置类Date，可以使用new Date( )，也可以直接调用函数Date(‘string’)。
● new 写一个构造函数
● 函数调用Date，需要再定一个函数，参数和返回值都是string

// 如何写 Date 的类型
interface DateTpye {
  new (): Date;
  (dateString: string): string;
}

函数和泛型
定义一个getArrayFirstItem函数，参数是数组，类型为any。

function getArrayFirstItem(arr: any[]) {
  return arr[0];
}

const numberArr = [1,2,3];
const result = getArrayFirstItem(numberArr);

发现类型推断不出来，result的类型，即数组参数类型为any，执行的时候推断不出数组第一项的类型。

const stringArr = ['1','2','3'];
const resultOne = getArrayFirstItem(stringArr);

数组为字符串，同样也推断不出来。

利用函数与泛型解决这个问题 =>
数组的类型是Type，则函数返回值也一一对应。

// 函数和泛型
function getArrayFirstItem<Type>(arr: Type[]): Type {
  return arr[0];
}

const numberArr = [1,2,3];
const result = getArrayFirstItem(numberArr);

const stringArr = ['1','2','3'];
const resultOne = getArrayFirstItem(stringArr);

note：利用函数和泛型，即可帮助ts做更优的类型推断了。

函数重载
getString接收一个参数时，返回类型为string。
getString接收两个参数时，返回类型为number。
实现重载函数时，想要满足两个定义，则利用？即可。
注意，实现的函数一定要满足重载函数定义的要求。

// 函数重载
function getString(str: string): string;
function getString(str: string, str1: string): number;

function getString(str: string, str1?: string) {
  if(typeof str1 === 'string') {
    return (str + str1).length;
  }
  return str;
}