当前位置: 首页 > 科技观察

关于Typescript你可能不知道的事情

时间:2023-03-15 13:13:30 科技观察

Typescript是一种很棒的语言。我已经使用它快两年了,我仍然喜欢这门语言。它是Javascript的超集,但远不止于此。Typescript在日常开发中非常好用,可以帮助我避免很多不必要的错误。以下是您可能还不知道的一些Typescript功能,它们可能会在您的工作中派上用场。@ts-expect-error假设有如下代码:constmultiply=(a:number,b:number)=>a+b;multiply('12',13);但是TS编译器会提示错误:Argumentoftype'string'isnotassignabletoparameteroftypeYoucannotmodifythetypeofthefirstparameter,暂时想忽略TS编译器报错,可以使用@ts-ignore抑制错误。constmultiply=(a:number,b:number)=>a*b;//@ts-ignoremultiply('12',13);修复错误时,将第一个参数'12传递给multiplyfunction'后改为12:constmultiply=(a:number,b:number)=>a+b;//@ts-ignoremultiply(12,13);不要忘记把我们使用的@ts-ignore指令放在Delete之前,因为它会永远忽略下一行,除非你删除它,否则可能会导致以后的代码出错。如果担心忘记删除,也可以使用@ts-expect-error指令,它和@ts-ignore指令类似,只是一旦修复错误,TS编译器会提示错误。constmultiply=(a:number,b:number)=>a+b;//@ts-expect-errormultiply(12,13)??;未使用的“@ts-expect-error”指令。这可以在修复错误后提醒您立即删除订单。never类型假设有一个函数接受错误状态代码并根据状态抛出错误。在这种情况下,当函数不会正常结束时,never类型就派上用场了。never和void的区别是:void表示至少会返回一个undefined或null,而never表示不会正常执行到函数结束。functionthrowError(error:string):never{thrownewError(error);}模板文字类型模板文字类型类似于javascript中的字符串类型,但类型特定。假设你想实现一个popover库并且有一个定位popover的类型:typepopoverPositions='top'|'bottom'|'left'|'right'|'top-left'|'top-right'|'top-center'|'bottom-left'|'bottom-right'|'bottom-center';但在实践中,排列和组合这些类型会让你发疯。通过使用模板文字类型,您可以轻松地分解和组合类型,以便您可以包含所有可能的新类型:typepositions='top'|'bottom'|'center';typedirections='left'|'right'|'center'typepopoverPositions=positions|directions|`${positions}-${directions}`生成所有类型为:typepopoverPositions=positions|directions|"top-left"|"top-right"|"bottom-left"|"bottom-right"|"center-left"|"center-right"空断言空断言用于告诉TS编译器您的值既不是null也不是未定义的。假设该值已经被初始化为:letmyNumber:null|number=null;但稍后更新myNumber的值:myNumber=69;假设我们有一个只接受数字类型的函数,constadd=(a:number,b:number)=>{returna+b;}add(myNumber,1);这时候编译器会报错:Argumentoftype'null'isnotassignabletoparameteroftype'number'。所以在这里,你可以在变量的末尾使用!告诉编译器传入的值不为空。constadd=(a:number,b:number)=>{returna+b;}add(myNumber!,1);以上代码可以编译成功。合并接口MegringInterfaces是声明合并的类型,当你有两个同名接口时,它可以将它们合并成一个接口interfaceBox{height:number;width:number;}interfaceBox{scale:number;}letbox:Box={高度:5,宽度:6,比例:10};所以这里,可以创建两个独立的同名接口,然后将它们合并为一个接口,就如上面的例子一样使用。总结TypeScript是JavaScript的超集,主要提供类型系统和对ES6的支持。虽然有一些学习成本,但是如果我们能够利用好这门语言的类型系统和保护机制,我们就可以避免JavaScript的一些陷阱。并降低代码的维护成本,腾出更多的时间去钓鱼。