目录

1.任意值

什么是任意值类型

未声明类型的变量

2.类型推论

3. 联合类型

访问联合类型的属性或方法

4.对象的类型——接口

什么是接口

可选属性

任意属性

只读属性


1.任意值

任意值(Any)用来表示允许赋值为任意类型。

什么是任意值类型

如果是一个普通类型,在赋值过程中改变类型是不被允许的:

let myFavoriteNumber: string = 'seven';
myFavoriteNumber = 7;// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

但如果是 any 类型,则允许被赋值为任意类型。

let myFavoriteNumber: any = 'seven';
myFavoriteNumber = 7;

任意值的属性和方法

在任意值上访问任何属性都是允许的:

let anyThing: any = 'hello';

可以认为,声明一个变量为任意值之后,对它的任何操作,返回的内容的类型都是任意值

未声明类型的变量

变量如果在声明的时候,未指定其类型,那么它会被识别为任意值类型

let something;
something = 'seven';
something = 7;

2.类型推论

如果没有明确的指定类型,那么 TypeScript 会依照类型推论(Type Inference)的规则推断出一个类型。

什么是类型推论

以下代码虽然没有指定类型,但是会在编译的时候报错:(最先你给它赋值为字符串类型的数据,它默认是字符串类型,再给它赋数值类型的,就会报错,这就是类型推论)

let myFavoriteNumber = 'seven';
myFavoriteNumber = 7;// index.ts(2,1): error TS2322: Type 'number' is not assignable to type 'string'.

TypeScript 会在没有明确的指定类型的时候推测出一个类型,这就是类型推论。

如果定义的时候没有赋值,不管之后有没有赋值,都会被推断成 any 类型而完全不被类型检查

let myFavoriteNumber;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

3. 联合类型

联合类型(Union Types)表示取值可以为多种类型中的一种。

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

联合类型使用 | 分隔每个类型。

这里的 let myFavoriteNumber: string | number 的含义是,允许 myFavoriteNumber 的类型是 string 或者 number,但是不能是其他类型。

访问联合类型的属性或方法

当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候,我们只能访问此联合类型的所有类型里共有的属性或方法

function getLength(something: string | number): number {return something.length;
}// index.ts(2,22): error TS2339: Property 'length' does not exist on type 'string | number'.
//   Property 'length' does not exist on type 'number'.

上例中,length 不是 string 和 number 的共有属性,所以会报错。

访问 string 和 number 的共有属性是没问题的:

function getString(something: string | number): string {return something.toString();
}

联合类型的变量在被赋值的时候,会根据类型推论的规则推断出一个类型:

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
console.log(myFavoriteNumber.length); // 5
myFavoriteNumber = 7;
console.log(myFavoriteNumber.length); // 编译时报错// index.ts(5,30): error TS2339: Property 'length' does not exist on type 'number'.

上例中,第二行的 myFavoriteNumber 被推断成了 string,访问它的 length 属性不会报错。

而第四行的 myFavoriteNumber 被推断成了 number,访问它的 length 属性时就报错了。

4.对象的类型——接口

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

什么是接口

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

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

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

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

接口一般首字母大写。

定义的变量比接口少了一些属性是不允许的,多一些属性也是不允许的;可见,赋值的时候,变量的形状必须和接口的形状保持一致

可选属性

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

interface Person {name: string;// 添加 ? 表示该属性可选,不添加该属性也不会报错age?: number;
}let tom: Person = {name: 'Tom'
};

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

任意属性

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

interface Person {name: string;age?: number;[propName: string]: any;
}let tom: Person = {name: 'Tom',gender: 'male'
};let tom: Person = {name: 'Tom',gender: 'male',gender1: 'sdsd'
}

使用 [propName: string] 定义了任意属性取 string 类型的值,可以写多个任意的属性。

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

interface Person {name: string;age?: number;[propName: string]: string;
}let tom: Person = {name: 'Tom',age: 25,gender: 'male'
};

一个接口中只能定义一个任意属性。如果接口中有多个类型的属性,则可以在任意属性中使用联合类型:

interface Person {name: string;age?: number;[propName: string]: string | number;
}let tom: Person = {name: 'Tom',age: 25,gender: 'male'
};

只读属性

有时候我们希望对象中的一些字段只能在创建的时候被赋值,那么可以用 readonly 定义只读属性:

interface Person {readonly id: number;name: string;age?: number;[propName: string]: any;
}let tom: Person = {id: 89757,name: 'Tom',gender: 'male'
};tom.id = 9527;// index.ts(14,5): error TS2540: Cannot assign to 'id' because it is a constant or a read-only property.

上例中,使用 readonly定义的属性 id 初始化后,又被赋值了,所以报错了。

注意,只读的约束存在于第一次给对象赋值的时候,而不是第一次给只读属性赋值的时候

interface Person {readonly id: number;name: string;age?: number;[propName: string]: any;
}let tom: Person = {name: 'Tom',gender: 'male'
};tom.id = 89757;

上例中,报错信息有两处,第一处是在对 tom 进行赋值的时候,没有给 id 赋值。

第二处是在给 tom.id 赋值的时候,由于它是只读属性,所以报错了。

typeScript复杂数据类型--任意类型、类型推论、联合类型、对象的类型(接口)、数组的类型、函数的类型相关推荐

  1. TypeScript学习(三):联合类型及推论

    前面说到了typescript中的数据类型的定义及类型推论,定义的方式也就是单数据类型定义或者是任意类型的定义,但是我们在开发中,有时候会涉及到一些变量的值类型校验,例如只需要数值和字符串,或者数值和 ...

  2. TypeScript学习(二):任意类型及推论

    上文我们提到typescript(以下统称为"TS")中原始数据类型的一些声明方式,不难看出,TS中的数据定义方式跟JS是大同小异的,但是在JS中,我们常常会声明一个变量,如: v ...

  3. typescript 数据类型、函数返回值、类型断言、联合类型、类型兼容

    null和undefined类型:是所有类型的子类型,即可以将任意类型赋值为二者any类型:可以赋值任何类型unknown类型:引入的顶级类型unknown,对照于any,unknown是类型安全的, ...

  4. typescript索引类型_复杂场景下的 typescript 类型锚定 (1) ----- 对象索引提取-阿里云开发者社区...

    前言:在编写 typescript 应用的时候,有时候我们会希望复用或者构造一些特定结构的类型,这些类型只从 typescript 靠内建类型和 interface.class 比较难以表达,这时候我 ...

  5. TypeScript 基础数据类型与接口

    一.数据类型 1.基础数据类型 (1)数值类型 let num: number; num = 100 console.log(num); (2)布尔类型 let flag: boolean;flag ...

  6. MySql基础篇---003 SQL之DDL、DML、DCL使用篇:创建和管理表 ,数据处理之增删改,MySQL数据类型精讲 ,约束:联合主键

    第10章_创建和管理表 讲师:尚硅谷-宋红康(江湖人称:康师傅) 官网:http://www.atguigu.com 1. 基础知识 1.1 一条数据存储的过程 存储数据是处理数据的第一步.只有正确地 ...

  7. typescript (一) 数据类型之 基础数据类型

    (一)Typescript 概述 Typescript 是 Javascript 的超集,Javascript 有的 Typescript 都有,Typescript 包含 Javascript Ty ...

  8. ♥走进TypeScript的数据类型♥

    前言:无论在学习什么语言的时候,我们都需要明白其该怎么样去定义一个变量或者Function,那么今天我们来看看TypeScript的数据类型. 文章目录: 一.Ts与Js的区别 二.Ts的数据类型 三 ...

  9. Python中的函数参数类型

    1.参数命名规则经验:绝大多数函数接收一定数量的参数,然后根据实际调用时提供的参数的值的不同,输出不同的结果.前面我们说过,将函数内部的参数名字,定义得和外部变量的名字一样是一种不好的习惯,它容易混淆 ...

最新文章

  1. 简论重大科学发现诞生的时机
  2. 【知识小课堂】mongodb 之 特殊集合及索引
  3. bootcmd和bootargs
  4. python pptp链接_pptp-client连接设置
  5. [SQL]查询及删除重复记录的SQL语句
  6. 零基础学sql要多久_零基础小白如何迈出学习SQL的第一步?文科生学SQL的心得
  7. jQuery插件定义
  8. windows共享关闭密码保护是灰色的
  9. mysql 多个网卡_seriver -- 多个网卡只能认到一个网卡的解决方法
  10. svg写入/识别html元素和css样式
  11. 解析分级存储管理(HSM)
  12. 柯美6501服务器系统,柯美6501维修手册全-(1).pdf
  13. Linux下的编曲软件,在Linux下可用Wine运行编曲软件FL Studio,也可用LMMS替代
  14. 智能语言处理之依存树计算句子结构相似度计算
  15. IETester必备浏览器测试工具
  16. 基于ESP32测温湿度上传到OneNET并通过微信小程序控制,查看,下发指令
  17. Windbg串口联调
  18. WordPress初学者入门教程-WordPress的设置
  19. django中request对象的属性和方法
  20. Spring Data Commons 官方文档学习

热门文章

  1. Web服务器Nginx 1.22.0 下载、启动及关闭(Win10)
  2. java servlet的生命周期_Java Servlet系列之Servlet生命周期
  3. 带孩子们做环球旅行的读后感_为什么要带孩子们去学乐高课程?
  4. Linux之Xshell5连接远程服务器
  5. (第十三周)Final阶段用户调查报告
  6. 正向有功正向无功_老王说表之--电表的正向有功和反向无功是怎么回事?
  7. USB芯片完成的工作。
  8. 通过镜像反推Dockerfile命令
  9. Excel表格如何加密?如何撤销加密?
  10. 联想小新air15和thinkbook15有什么区别 哪个好详细性能配置对比