《TypeScript学习--接口和对象以及数组类型》

发表于 分类于 ， Valine：

对象的类型

在 typescript 中，我们定义对象的方式要用关键字 interface（接口），我的理解是使用 interface 来定义一种约束，让数据的结构满足约束的格式。定义方式如下：

1
2
3
4
5
6
7
8
9
10
//这样写是会报错的 因为我们在person定义了a，b但是对象里面缺少b属性
//使用接口约束的时候不能多一个属性也不能少一个属性
//必须与接口保持一致
interface Person {
  b: string;
  a: string;
}
const person: Person = {
  a: "213",
};
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
//重名interface  可以合并
interface A {
  name: string;
}
interface A {
  age: number;
}
var x: A = { name: "xx", age: 20 };
//继承
interface A {
  name: string;
}

interface B extends A {
  age: number;
}

let obj: B = {
  age: 18,
  name: "string",
};

可选属性 使用?操作符

1
2
3
4
5
6
7
8
9
10
//可选属性的含义是该属性可以不存在
//所以说这样写也是没问题的
interface Person {
  b?: string;
  a: string;
}

const person: Person = {
  a: "213",
};

任意属性 [propName: string]

需要注意的是，一旦定义了任意属性，那么确定属性和可选属性的类型都必须是它的类型的子集：

1
2
3
4
5
6
7
8
9
10
11
12
13
//在这个例子当中我们看到接口中并没有定义C但是并没有报错
//应为我们定义了[propName: string]: any;
//允许添加新的任意属性
interface Person {
  b?: string;
  a: string;
  [propName: string]: any;
}

const person: Person = {
  a: "213",
  c: "123",
};

只读属性 readonly
readonly 只读属性是不允许被赋值的只能读取

1
2
3
4
5
6
7
8
9
10
11
12
13
//这样写是会报错的
//应为a是只读的不允许重新赋值
interface Person {
    b?: string,
    readonly a: string,
    [propName: string]: any;
}

const person: Person = {
    a: "213",
    c: "123"
}
person.a = 123

添加函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
interface Person {
    b?: string,
    readonly a: string,
    [propName: string]: any;
    cb():void
}

const person: Person = {
    a: "213",
    c: "123",
    cb:()=>{
        console.log(123)
    }
}

数组的类型

  1. 类型[ ]
1
2
3
4
5
6
7
8
9
10
//类型加中括号
let arr: number[] = [123];
//这样会报错定义了数字类型出现字符串是不允许的
let arr: number[] = [1, 2, 3, "1"];
//操作方法添加也是不允许的
let arr: number[] = [1, 2, 3];
arr.unshift("1");
var arr: number[] = [1, 2, 3]; //数字类型的数组
var arr2: string[] = ["1", "2"]; //字符串类型的数组
var arr3: any[] = [1, "2", true]; //任意类型的数组

数组泛型
规则 Array<类型>

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

用接口表示数组
一般用来描述类数组

1
2
3
4
5
interface NumberArray {
  [index: number]: number;
}
let fibonacci: NumberArray = [1, 1, 2, 3, 5];
//表示：只要索引的类型是数字时，那么值的类型必须是数字。

函数的类型

1
2
3
4
5
//注意，参数不能多传，也不能少传 必须按照约定的类型来
const fn = (name: string, age: number): string => {
  return name + age;
};
fn("张三", 18);

函数的可选参数?

1
2
3
4
const fn = (name: string = "我是默认值"): string => {
  return name;
};
fn();

函数参数的默认值

1
2
3
4
const fn = (name: string = "我是默认值"): string => {
  return name;
};
fn();

接口定义函数

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
//定义参数 num 和 num2  ：后面定义返回值的类型
interface Add {
  (num: number, num2: number): number;
}

const fn: Add = (num: number, num2: number): number => {
  return num + num2;
};
fn(5, 5);

interface User {
  name: string;
  age: number;
}
function getUserInfo(user: User): User {
  return user;
}

定义剩余参数

1
2
3
4
5
6
7
8
const fn = (array: number[], ...items: any[]): any[] => {
  console.log(array, items);
  return items;
};

let a: number[] = [1, 2, 3];

fn(a, "4", "5", "6");

函数重载

重载是方法名字相同，而参数不同，返回类型可以相同也可以不同。
如果参数类型不同，则参数类型应设置为 any。
参数数量不同你可以将不同的参数设置为可选。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function fn(params: number): void

function fn(params: string, params2: number): void

function fn(params: any, params2?: any): void {

    console.log(params)

    console.log(params2)

}
fn(123)

fn('123',456)