ts笔记

参数注解和返回值注解

interface Foo {
  foo: string;
}


function getFoo(str: Foo): Foo {
  return str
}

getFoo(111)

如果没有添加返回值注解，ts自动推断出返回值。

可选参数和参数默认值

function foo(bar: number, foo: string = 'hello', bas?: string): void {
  // ..
}

重载

根据传入的参数不同，返回不同的结果。

ts的重载允许我们根据传入的参数不同，拥有不同的提示类型。

interface Padding {
  top: number;
  right: number;
  bottom: number;
  left: number;
}

// 重载
function padding(all: number): Padding;
function padding(topAndBottom: number, leftAndRight: number): Padding;
function padding(top: number, right: number, bottom: number, left: number): Padding;

// 处理逻辑
function padding(a: number, b?: number, c?: number, d?: number): Padding {
  if (b === undefined && c === undefined && d === undefined) {
    b = c = d = a;
  } else if (c === undefined && d === undefined) {
    c = a;
    d = b;
  }
  return {
    top: a,
    right: b,
    bottom: c,
    left: d
  };
}

const p = padding(1, 2, 3,4)

可调用类型注释

interface ReturnString {
    (): string;
}

declare const foo: ReturnString;

// 推断bar是一个string
const bar = foo();

签名重载

接口通过提供多种调用签名，用以特殊的函数重载

interface Overloaded {
  (foo: string): string;
  (foo: number): number;
}

// 实现接口的一个例子：
function stringOrNumber(foo: number): number;
function stringOrNumber(foo: string): string;
function stringOrNumber(foo: any): any {
  if (typeof foo === 'number') {
    return foo * foo;
  } else if (typeof foo === 'string') {
    return `hello ${foo}`;
  }
}

const overloaded: Overloaded = stringOrNumber;

// 使用
const str = overloaded(''); // str 被推断为 'string'
const num = overloaded(123); // num 被推断为 'number'

箭头函数

对于简单的函数类型签名，我们可以使用箭头函数类型注解。

示例：函数接收一个number，返回一个string

const simple:(foo:number) => string = (foo) => foo.toString();

// a推断为string
const a = simple(111)

simple:(foo:number) => string类型描述，(foo) => foo.toString()主题函数

可实例化

可实例化是可调用的一种特殊情况，它使用 new 作为前缀。它意味着你需要使用 new 关键字去调用它.

interface CallMeWithNewToGetString {
  new (): string;
}

// 使用
declare const Foo: CallMeWithNewToGetString;
const bar = new Foo(); // bar 被推断为 string 类型