TypeScript对象的类型,TypeScript接口来定义对象的类型

时间: 2019-05-13阅读: 601标签: 接口


1、原始数据类型
JavaScript 的类型分为两种:原始数据类型和对象数据类型。原始数据类型包括布尔值、数值、字符串、null、undefined 已经 ES6 中的 Symbol。
前五种数据类型在 TypeScript 中的应用。
注意布尔值:在 JavaScript 中,boolean 是一种基本的数据类型,Boolean 是一个将布尔值打包的布尔对象。在 TypeScript 中,boolean 也是基本数据类型,但是 Boolean 是构造函数。
2、在 TypeScript 中:
* 二进制或八进制表示的数字会被编译成十进制。
* 可以用 void 表示没有返回值的函数。
* 任意值(Any)用来 表示允许赋值为任意类型。在任意值上可以访问任何属性和方法。未指定类型的无初始值的变量会被识别为任意值。
* 联合类型(使用 | 分隔)表示取值可以为多种类型中的一种。当 ts 不确定一个联合属性的变量是哪个类型的时候,只能访问联合类型里的共有属性和方法。
3、对象的类型——接口
接口名一般首字母大写
<template>
interface InterfaceName {
readonly propName: type; // 用 readonly 定义只读属性
propertyName1: type1; // : 表示该属性必需
propertyName2?: type2; // ?: 表示该属性可选
[propertyName: type]: any; // 任意属性
}
注:一旦定义了任意属性,那么确定属性和可选属性都必须是它的子属性。
4、数组的类型
(1) 类型+方括号 表示法
let fibonacci: number[] = [1, 1, 2, 3, 5];
(2) 数组泛型 Array<elemType>
let fibonacci: Array<number> = [1, 1, 2, 3, 5];
(3)用接口表示数组
interface NumberArray {
[idnex: number]: number;
}
let fibonacci: NumberArray = [1, 1, 2, 3, 5]
(4)any 在数组中表示允许出现任意类型
let list: any[] = ['Xcat Liu', 25, {website: ']
(5)类数组
5、函数的类型
JS 中函数声明的方式有:函数声明和函数表达式。
TS 中,要对函数的输入输出有约束
(1)函数声明:
function sum(x: number, y: number): number {
return x + y;
}
(2)函数表达式:
let sum: (x: number, y: number) => number = function (x: number, y: number): number {
return x + y;
}
在 TypeScript 中,=> 用来表示函数定义,左边是输入类型,右边是输出类型,不同于 ES6 中的箭头函数(=>)。
(3)用接口定义函数
interface SearchFunc {
(source: string, subString: string): boolean;
}
let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
return source.search(subString) !== -1;
}
(4)参数中的可选参数表示方式和接口中的可选属性类似,可选参数必须放在参数列表的最后一项
function bulidName(firistName: string, lastName?: string) {
if (lastName) {
return firistName + ' ' + lastName;
} else {
return firistName;
}
}
TS 中,添加了默认值的参数会被识别为可选参数,此时不受放置位置限制
剩余参数可用 ...rest 表示,rest 参数只能是参数列表中的最后一项
(5)断言类型:常用于联合类型
语法:<type>value 或 value as type
function getLength(something: string | number):number {
if (<string>something.length) {
return <string>something.length;
} else {
return something.toString().length();
}
}
断言不是类型转换,不能将变量断言成一个联合类型中不存在的类型。
6、类型别名:用 type 创建类型别名,常用于联合类型
type Name = string;
type Nameresolver = () => string;
type NameOrResolver = Name | NameOrResolver;
function getName(n: NameOrResolver): Name{
if (typeof n === 'string') {
return n;
} else {
return n();
}
}
7、字符串字面量类型:用来约束取值只能是某几个字符串中的一个
8、元组:合并了不同类型的对象
可以对元组中的某一项进行赋值,若直接对元组类型的变量进行初始化或者负值,需要提供所有元祖类型中指定的项。
当赋值给越界的元素时,越界元素的类型会被限制为元组中每个类型的联合类型。
9、枚举(enum):枚举成员会被赋值为从 0 开始递增的数字,同时也会对枚举值到枚举名进行反向映射。
枚举项可以包含常数项和计算所得项。
常数枚举:使用 const enum 定义枚举类型,会在编译阶段被删除,且枚举项不能包含计算所得项。
外部枚举:使用 declare enum 定义枚举类型,常出现在声明文件中。
10、类
ES6 中的类 -- 通过 new 生成新实例的时候,会自动调用构造函数;使用 extends 关键字实现继承,子类中使用 super 关键字来调用
TypeScript 中类的用法:
(1)访问修饰符:public、private 和 protected
private 修饰的属性或方法,在子类中也是不允许访问的;
protected 修饰的属性或方法,允许在子类中访问;
public 修饰的属性或方法,允许在任何地方被访问。
(2)抽象类:不允许被实例化
(3)类的类型:与接口类似
(4)类与接口:一个类可以实现多个接口,用 implements 关键字来实现
(5)接口可以继承接口,可以继承类
11、泛型:定义在函数、接口或类的时候,不预先制定具体的类型,而在使用的时候再指定类型
定义泛型时,可以一次性定义多个类型参数。
泛型约束
泛型接口
泛型类
12、声明合并:若定义了两个相同名字的函数、接口或类,则会合并成一个类型。

  1. 在 TypeScript 中,我们使用接口(Interfaces)来定义对象的类型。

在 TypeScript 中,我们使用接口(Interfaces)来定义对象的类型。

 

2. 在面向对象语言中,接口(Interfaces)是一个很重要的概念,它是对行为的抽象,而具体如何行动需要由类(classes)去实现(implements)


参考:

interface Person { name: string; age: number;}let tom:Person { name: 'tom', age: 18}

什么是接口

变量tom是接口Person数据类型,则tom的所有属性必须与Person相同,无论是属性名还是属性值的数据类型,不能多也不能少必须完全一致

在面向对象语言中,接口(Interfaces)是一个很重要的概念,它是对行为的抽象,而具体如何行动需要由类(classes)去实现(implements)。

  1. 可选属性

    interface Person { name: string; age?: number;}let tom:Person { name: 'tom'}

TypeScript 中的接口是一个非常灵活的概念,除了可用于对类的一部分行为进行抽象以外,也常用于对「对象的形状(Shape)」进行描述。

可选属性的含义是该属性可以不存在,但仍然不允许添加不存在的属性

简单的例子
interface Person {
    name: string;
    age: number;
}

let tom: Person = {
    name: 'Tom',
    age: 25
};

上面的例子中,我们定义了一个接口 Person,接着定义了一个变量 tom,它的类型是 Person。这样,我们就约束了 tom 的形状必须和接口 Person 一致。

接口一般首字母大写。有的编程语言中会建议接口的名称加上 I 前缀。
定义的变量比接口少了一些属性是不允许的:

interface Person {
    name: string;
    age: number;
}

let tom: Person = {
    name: 'Tom'
};

// index.ts(6,5): error TS2322: Type '{ name: string; }' is not assignable to type 'Person'.
//   Property 'age' is missing in type '{ name: string; }'.

多一些属性也是不允许的:

interface Person {
    name: string;
    age: number;
}

let tom: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male'
};

// index.ts(9,5): error TS2322: Type '{ name: string; age: number; gender: string; }' is not assignable to type 'Person'.
//   Object literal may only specify known properties, and 'gender' does not exist in type 'Person'.

可见,赋值的时候,变量的形状必须和接口的形状保持一致。

  1. 任意属性

可选属性

有时我们希望不要完全匹配一个形状,那么可以用可选属性:

interface Person {
    name: string;
    age?: number;
}

let tom: Person = {
    name: 'Tom'
};

interface Person {
    name: string;
    age?: number;
}

let tom: Person = {
    name: 'Tom',
    age: 25
};

可选属性的含义是该属性可以不存在。

这时仍然不允许添加未定义的属性:

interface Person {
    name: string;
    age?: number;
}

let tom: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male'
};

// examples/playground/index.ts(9,5): error TS2322: Type '{ name: string; age: number; gender: string; }' is not assignable to type 'Person'.
//   Object literal may only specify known properties, and 'gender' does not exist in type 'Person'.

接口中一旦定义了任意属性,那么接口中的可选属性和确定属性的必须是任意属性的子属性

任意属性

有时候我们希望一个接口允许有任意的属性,可以使用如下方式:

interface Person {
    name: string;
    age?: number;
    [propName: string]: any;
}

let tom: Person = {
    name: 'Tom',
    gender: 'male'
};

使用 [propName: string] 定义了任意属性取 string 类型的值。
需要注意的是,一旦定义了任意属性,那么确定属性和可选属性都必须是它的子属性:

interface Person {
    name: string;
    age?: number;
    [propName: string]: string;
}

let tom: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male'
};

// index.ts(3,5): error TS2411: Property 'age' of type 'number' is not assignable to string index type 'string'.
// index.ts(7,5): error TS2322: Type '{ [x: string]: string | number; name: string; age: number; gender: string; }' is not assignable to type 'Person'.
//   Index signatures are incompatible.
//     Type 'string | number' is not assignable to type 'string'.
//       Type 'number' is not assignable to type 'string'.

上例中,任意属性的值允许是 string,但是可选属性 age 的值却是 number,number 不是 string 的子属性,所以报错了。

另外,在报错信息中可以看出,此时 { name: 'Tom', age: 25, gender: 'male' } 的类型被推断成了 { [x: string]: string | number; name: string; age: number; gender: string; },这是联合类型和接口的结合。

interface Person { name: string; age?: number; [propName:string]: any;}// A.let tom:Person { name: 'tom', gender: 'male'}// B.let tom:Person { name: 'tom', age: 12, gender: 'male'}

B会报错,因为任意属性gender是string类型, number 不是 string 的子属性,所以会报错

  1. 只读属性

只读属性是只该字段只在创建的时候被赋值,它的约束力在于第一次给对象赋值的时候,并非是第一次给只读属性赋值的时候

interface Person { name: string; readonly age: number; gender?: string;}let tom:Person { name: 'tom', age: 12, gender: 'male'}tom.age = 15; // 报错// age属性只能在对象赋值时赋值。let tom:Person { name: 'tom'} // 错 age为确定属性,赋值时必须包含此属性tom.age = 12; // 错,age为只读属性,只有第一次对象赋值时才能赋值

本文由澳门威斯尼人平台登录发布于Web前端,转载请注明出处:TypeScript对象的类型,TypeScript接口来定义对象的类型

相关阅读