TypeScript基础—索引签名、函数、对象

1、索引签名

类型声明中当需要表示键值对类型的时候可以用索引签名，语法为[[anyWOrd]: string]: [valueType];同时类型定义中还可以附加其他的属性。另一种的语法为[[anyWrod] in string]: [valueType];,与签名的语法区别为，这栋定义方式单独占用一个花括号，常用于泛型中。

type Hash = {
  [k: string]: unknown;
  name: string;
  length: number;
};
const a: Hash = {
  name: '123',
  length: 123,
}; //ok

// 键是number
type List = {
  [k: number]: unknown;
  length: number;
  name: string;
};

// 特点不单独使用一般用于泛型
type Hash1 = {
  //区别: 改成 in 之后独占花括号
  [k in string]: unknown;
};

//1、用了default就不能用value
// 2、用了value就必须用onChange
// 能不能用ts实现上述呢？
type Inputprops =
  | {
      defaultValue: string;
      value?: undefined;
      onChange?: undefined;
    }
  | { defaultValue?: undefined; value: string; onChange: () => {} };
  
const props: Inputprops = {
  defaultValue: '1',
};

2、readonly表示只读属性

interface User {
  readonly id: number;
  readonly name: string;
  readonly scores: number[];
  age?: number;
}

const u: User = {
  id: 1,
  name: 'zs',
  scores: [1, 2, 3],
};
// 这边是改了scores中的属性
u.scores[0] = 100;

回顾表述对象的几种方法

• type 或者interface
• 索引签名和映射类型
• 问号表示可选
• readonly表示只读

3、函数的声明方法

1. js中声明函数的方法举例

function f1(a, b) {
  // body
}

const f2 = () => {
  //body
};
const f3 = function () {
  //body
};

const f4 = new Function('a', 'b', 'return a + b');

2. TS中声明函数的方法

// 第一种类型：先写类型再赋值
type F1 = (a: number, b: number) => number;

const fun: F1 = () => {
  return 1;
};
// 第二种类型：实现函数之后获取类型

const fun1 = (a: number, b: number): number => {
  return 1;
};

// 第三种:先实现普通函数再获取类型

function fun2(this: unknown, a: number, b: number) {}
// 第四种：先实现匿名普通函数再获取类型

const fun3 = function (this: unknown, a: number, b: number) {
  return a + b;
};

4、函数的重载

// 等待更新