TypeScript 中的数组类型、类型推论 |
您所在的位置:网站首页 › 判断数组是数组 › TypeScript 中的数组类型、类型推论 |
这是我参与11月更文挑战的第10天,活动详情查看:2021最后一次更文挑战 数组的类型接下来,我们学习数组在 TS 中如何定义? // 数组中的每一项都必须是 string 类型,把鼠标移动到 myFriends,可以看到它是这样一个类型 let myFriends: string[] = ['Alex', 'Bob']; // 那如果数组某一项不是 string 类型呢?会报错,不能将类型“number”分配给类型“string” let myFriends: string[] = ['Alex', 'Bob', 7]; // 这个时候,我们可以把 string 修改成联合类型 let myFriends: (string | number)[] = ['Alex', 'Bob', 7];除了对数组的每一项进行约束之外,我们还可以调用数据某些方法的时候,也会进行约束 let myFriends: string[] = ['Alex', 'Bob']; // 因为传入的参数,不是 string 类型的话,同样也会报错 myFriends.push(7);除了使用简单类型之外,我们还可以使用对象类型 数组的每一项,都必须满足对象这样的类型,否则就会报错。 let myFriends: { name: string; }[] = [{name: 'Alex'}, {name: 'Bob'}];总结下,数组类型如何定义? 我们可以使用类型+[],来表示一个数组类型。 习题:为变量 animal 声明合适的类型 const animal: ______ = [10, 10];A. number B. any C. number [] 答案:C 解析 变量 animal 被赋值为数组,因此变量 animal 应该声明为数组类型。 A - 本选项 number 为基本数据类型。故错误。 B - 虽然声明为 any 是可以的,但显然变量 animal 声明为更具体的数组类型是更合适的。故错误。 C - 本选项是正确的类型。 资料-数组泛型在 JavaScript 中没有「泛型( Generis )」这个说法,但是在强类型语言中基本都存在。我们先来看一下维基百科对于「泛型」的定义。 泛型的定义主要有以下两种: 在程序编码中一些包含类型参数的类型,也就是说泛型的参数只可以代表类,不能代表个别对象。(这是当今较常见的定义) 1.在程序编码中一些包含参数的类。其参数可以代表类或对象等等。(现在人们大多把这称作模板) 2.不论使用哪个定义,泛型的参数在真正使用泛型时都必须作出指明。 一些强类型程序语言支持泛型,其主要目的是加强类型安全及减少类转换的次数,但一些支持泛型的程序语言只能达到部分目的。 作为 JavaScript 的超集,为了解决 JavaScript 作为一门弱语言的先天劣势,TypeScript 做了许多工作,添加泛型 ( Generics ) 便是其中之一。在后续的章节中我们会为你详细解析 TypeScript 中泛型的概念,在这里我们先简单理解为泛型(Generics)是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性。 在这里我们用一个泛型在数组中的使用场景来做简单介绍。 首先,我们来实现一个函数 createArray,它可以创建一个指定长度的数组,同时将每一项都填充一个默认值: function createArray(length: number, value: any): Array { let result = []; for (let i = 0; i < length; i++) { result[i] = value; } return result; } createArray(3, 'x'); // ['x', 'x', 'x']上例中,我们使用了之前提到过的数组泛型来定义返回值的类型。 这段代码编译不会报错,但是一个显而易见的缺陷是,它并没有准确的定义返回值的类型: Array 允许数组的每一项都为任意类型。但是我们预期的是,数组中每一项都应该是输入的 value 的类型。 这时候,泛型就派上用场了: function createArray(length: number, value: T): Array { let result: T[] = []; for (let i = 0; i < length; i++) { result[i] = value; } return result; } createArray(3, 'x'); // ['x', 'x', 'x']上例中,我们在函数名后添加了 ,其中 T 用来指代任意输入的类型,在后面的输入 value: T 和输出 Array 中即可使用了。 接着在调用的时候,可以指定它具体的类型为 string。当然,也可以不手动指定,而让类型推论自动推算出来: function createArray(length: number, value: T): Array { let result: T[] = []; for (let i = 0; i < length; i++) { result[i] = value; } return result; } createArray(3, 'x'); // ['x', 'x', 'x'] 类型推论 - 数组接下来,我们看看类型推论在数组中的应用。 // 会根据后面的值,推论出类型 let myFriends = ['Alex', 'Bob']; // 这样也会有报错 myFriends.push(7);如果我们给数组添加一个 number 类型的话,那么它会被推论成联合类型 let myFriends = ['Alex', 'Bob', 7]; // 如果我们取用数组的某一项,再想调用它的方法,会发现第二项被识别成了联合类型 // 如果我们想调用只有数字类型才有的方法的话,就会报错;类型“string”上不存在属性“toFixed” myFriends[2].toFixed();再强调一遍,数组会根据数组的每一项推论出它的类型。如果这个数组存在多种不同的类型的项的话,那么这个数组的每一项,都会被推论成之前类型的联合类型。 习题:严格类型模式下,变量 animal 的类型为? const animal = [{ name: 'panda', weight: 10 }];A. string | number B. any C. { name: string; weight: number } D. { name: string; weight: number } [] 答案:D 解析 变量 animal 被赋值为数组,因此变量 animal 会被推论为具体的数组类型。 A - 本选项的联合类型中均为基本数据类型。故错误。 B - any 不是具体的数组类型。故错误。 C - 本选项是对象类型。故错误。 D - 该选项是数组类型,且数组元素的结构类型和赋值对象的结构类型相符。故正确。 资料:类数组类数组(Array-like Object)不是数组类型,比如 arguments: function sum() { let args: number[] = arguments; } // index.ts(2,7): error TS2322: Type 'IArguments' is not assignable to type 'number[]'. // Property 'push' is missing in type 'IArguments'.事实上常见的类数组都有自己的接口定义,如 IArguments, NodeList, HTMLCollection 等: function sum() { let args: IArguments = arguments; } 资料:使用接口表示数组的类型接口也可以用来描述数组: interface NumberArray { [index: number]: number; } let fibonacci: NumberArray = [1, 1, 2, 3, 5];NumberArray 表示:只要 index 的类型是 number,那么值的类型必须是 number。 |
今日新闻 |
推荐新闻 |
CopyRight 2018-2019 办公设备维修网 版权所有 豫ICP备15022753号-3 |