首页 > 编程知识 正文

手记体特点,前端typescript

时间:2023-05-03 09:47:10 阅读:41313 作者:1292

我们知道返回类型在JavaScript中,函数可以不显式返回。 在这种情况下,函数的返回值应该是undefined。

function fn ()//todo ) console.log ) ) fn ); 请注意,如果在//=undefinedtypescript中显式声明函数的返回类型为undfined,则会显示类似以下内容的错误消息:

function fn (:统一)/ts (2355 ) afunctionwhosedeclaredtypeisneither ' void ' nor ' any ' mustreturnavalue///nony /不确定

functionfn1(:void ) fn1 ).doSomething ); //ts ) 2339 )可以使用类似于定义箭头函数的语法来表示property ' do something ' doesnotexistontype ' void '函数类型的参数和返回类型。 在这种情况下,=类型仅用于定义一个函数类型,而不实现此函数。

请注意,此处的=与ES6中箭头函数的=不同。 TypeScript函数类型的=用于表示函数的定义,左侧是函数的参数类型,右侧是函数的返回值类型,而ES6中的=是函数的实现。

在对象(接口类型)中,除了此声明语法之外,还可以使用缩写语法(如以下对象属性)来声明函数类型的属性:

接口实体(add : ) b: number,b: number )=number; Del(a:number,b: number ) : number; } const entity : entity={ add : (a,b )=a b,del ) a,b ) { return a - b; (、); 从某种意义上说,这两种形式都是等效的。 但是,通常不需要或不能明确指定返回类型。 这包括默认和可估计的返回类型的说明。

默认和可估计的返回类型幸运的是,函数的返回类型可以在TypeScript中估计,并且可以是默认值。

函数中是一个相对独立的上下文环境,可以根据参数值加工计算并返回新值。 在类型级别,还可以通过类型估计加工计算参与类型并返回新类型。 以下是示例。

function computetypes (one :字符串,two: number ) { const nums=[two]; const strs=[one] return { nums,strs } //返回{ nums: number[]; strs: string[] }的类型}请记住这是一个重要而有趣的特性。 函数返回值的类型估计与泛型的组合提供了特别复杂的类型估计,如Redux Model的状态、Reducer和Effect类型关联。

通常,默认情况下可以推测TypeScript中函数的返回类型,但在某些情况下可能需要显式声明返回类型,如Generator函数的返回类型。

新添加到Generator函数返回值ES6中的Generator函数还具有与TypeScript相对应的类型定义。

生成器函数返回迭代器对象。 可以使用Generator的同名接口泛型或Iterator的同名接口泛型来表示返回类型,如下例所示: 生成器类型继承迭代器类型。

类型any type=boolean; type AnyReturnType=string; 类型anynexttype=number; 功能* gen (: generatoranytype,AnyReturnType,anynexttype { const next value=yield true; //nextValue类型为number,yield后为boolean类型return `${nextValue} `; 必须返回string类型}注意: TypeScript 3.6之前的版本不支持指定next、return类型,因此在历史代码中,如果生成器和迭代器类型不同

参数类型JS中函数的参数在es6之后可以统一划分为可选参数、默认参数和其余参数的若干特性。

在实际工作中,可选参数和默认参数通常会传递函数参数,如以下代码所示。 当然,TypeScript也支持这种函数类型表示。

功能日志(x? strin

g) { return x;}log(); // => undefinedlog('hello world'); // => hello world

在上述代码中,我们在类型标注的:前添加?表示 log 函数的参数 x 就是可缺省的。

也就是说参数 x 的类型可能是 undefined(第 5 行调用 log 时不传入实参)类型或者是 string 类型(第 6 行调用 log 传入 'hello world' 实参),那是不是意味着可缺省和类型是 undefined 等价呢?

function log(x?: string) { console.log(x);}function log1(x: string | undefined) { console.log(x);}log();log(undefined);log1(); // ts(2554) Expected 1 arguments, but got 0log1(undefined);

显而易见:这里的 ?: 表示参数可以缺省、可以不传,但如果传则一定是string类型。也就是说调用函数时,我们可以不显式传入参数。但是,如果我们声明了参数类型为 xxx | undefined,就表示函数参数是不可缺省且类型必须是 xxx 或者 undfined。

因此,在上述代码中,log1 函数如果不显示传入函数的参数,TypeScript 就会报一个 ts(2554) 的错误,即函数需要 1 个参数,但是我们只传入了 0 个参数。

在 ES6 中支持函数默认参数的功能。而 TypeScript 会根据函数的默认参数的类型来推断函数参数的类型,示例如下:

function log(x = 'hello') { console.log(x);}log(); // => 'hello'log('hi'); // => 'hi'log(1); // ts(2345) Argument of type '1' is not assignable to parameter of type 'string | undefined'

在上述示例中,根据函数的默认参数 'hello' ,TypeScript 推断出了 x 的类型为 string | undefined。

当然,对于默认参数,TypeScript 也可以显式声明参数的类型(一般默认参数的类型是参数类型的子集时,我们才需要这么做)。不过,此时的默认参数只起到参数默认值的作用,如下代码所示:

function log1(x: string = 'hello') { console.log(x);}// ts(2322) Type 'string' is not assignable to type 'number'function log2(x: number = 'hello') { console.log(x);}log2();log2(1);log2('1'); // ts(2345) Argument of type '"1"' is not assignable to parameter of type 'number | undefined'

上例函数 log2 中,我们显式声明了函数参数 x 的类型为 number,表示函数参数 x 的类型可以不传或者是 number 类型。因此,如果我们将默认值设置为字符串类型,编译器就会抛出一个 ts(2322) 的错误。

同理,如果我们将函数的参数传入了字符串类型,编译器也会抛出一个 ts(2345) 的错误。

请再次注意:函数的默认参数类型必须是参数类型的子类型

function log3(x: number | string = 'hello') { console.log(x);}

在上述代码中,函数 log3 的函数参数 x 的类型为可选的联合类型 number | string,但是因为默认参数字符串类型是联合类型 number | string 的子类型,所以 TypeScript 也会检查通过。

剩余参数

在 ES6 中,JavaScript 支持函数参数的剩余参数,它可以把多个参数收集到一个变量中。同样,在TypeScript 中也支持这样的参数类型定义,如下代码所示:

function sum(...nums: number[]) { return nums.reduce((a, b) => a + b, 0);}sum(1, 2); // => 3sum(1, 2, 3); // => 6sum(1, '2'); // ts(2345) Argument of type 'string' is not assignable to parameter of type 'number'

在上述代码中,sum 是一个求和的函数,...nums将函数的所有参数收集到了变量 nums 中,而 nums 的类型应该是 number[],表示所有被求和的参数是数字类型。因此,sum(1, '2') 抛出了一个 ts(2345) 的错误,因为参数 '2' 并不是 number 类型。

如果我们将函数参数 nums 聚合的类型定义为 (number | string)[],如下代码所示:

function sum(...nums: (number | string)[]): number { return nums.reduce<number>((a, b) => a + Number(b), 0);}sum(1, '2', 3); // 6

那么,函数的每一个参数的类型就是联合类型 number | string,因此 sum(1, '2', 3) 的类型检查也就通过了。

typescript中的常见报错:

ts(2322)是一个静态类型检查的错误,在注解的类型和赋值的类型不同的时候就会抛出这个错误ts(2355) :简单来说就是:函数必须有一个返回值(报错翻译:声明类型既不是void也不是any的函数必须返回一个值)ts(2339): 在TypeScript中如果按JS的方式去获取对象属性时,可能会遇到。它表示Typescript在执行代码检查时在该对象没有定义相应属性。解决方法有 —— 直接设置对象为any、对象断言为any、将属性.获取方式改为数组式获取三种ts(2345):参数类型与预期不符ts(2554):参数个数与预期不符

版权声明:该文观点仅代表作者本人。处理文章:请发送邮件至 三1五14八八95#扣扣.com 举报,一经查实,本站将立刻删除。