TypeScrip 接口和对象类型 数组类型 函数

对象的类型

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

//这样写是会报错的 因为我们在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

可选属性 使用?操作符

//可选属性的含义是该属性可以不存在
interface Person {
    b?:string,
    a:string
}

const person:Person  = {
    a:"213"
}
1
2
3
4
5
6
7
8
9

重名interface 可以合并

interface A{name:string}

interface A{age:number}

var x:A={name:'zs',age:18}
1
2
3
4
5

继承

interface A{
    name:string
}
 
interface B extends A{
    age:number
}
 
let obj:B = {
    age:18,
    name:"zs"
}
1
2
3
4
5
6
7
8
9
10
11
12

任意属性 [propName: string]

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

//在这段代码当中我们看到接口中并没有定义C但是并没有报错
//应为我们定义了[propName: string]: any;
//允许添加新的任意属性
interface Person {
    a:number,
    b?:string,
    [propName: string]: any;
}

const person:Person  = {
    a: 123,
    c:"123"
}
1
2
3
4
5
6
7
8
9
10
11
12
13

只读属性 readonly

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

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

添加函数

interface Person {
	readonly a: number,
    b?: string,
    [propName: string]: any;
    cb():void
}
 
const person: Person = {
    a: 123,
    c: "123",
    cb:()=>{
        console.log(123)
    }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14

数组的类型

类型[ ]

var arr: number[] = [1, 2, 3]; //数字类型的数组
var arr2: string[] = ["1", "2"]; //字符串类型的数组
var arr3: any[] = [1, "2", true]; //任意类型的数组
1
2
3

数组泛型

规则 Array<类型>

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

用接口表示数组

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

多维数组

let data:number[][] = [[1,2], [3,4]];
1

arguments类数组

function arrs(...args:any): void {
    console.log(arguments) 
    //ts内置对象IArguments 定义
    let arr:IArguments = arguments
}
arrs(111, 222, 333)
1
2
3
4
5
6

any 在数组中的应用

let list: any[] = ['test', 1, [],{a:1}]
1

函数的类型

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

函数的可选参数?

//通过?表示该参数为可选参数
const fn = (name: string, age?:number): string => {
    return name + age
}
fn('张三')
1
2
3
4
5

函数参数的默认值

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

接口定义函数

//定义参数 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
9
10
11
12
13
14
15
16
17
18

定义剩余参数

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

函数重载

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

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)
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15