Home > front end >  using a block of javascript in typescript
using a block of javascript in typescript

Time:11-05

I want to include a javascript function in my typescript code. specificly this function: https://stackoverflow.com/a/13542669

The code:

const pSBC=(p,c0,c1,l)=>{
    let r,g,b,P,f,t,h,i=parseInt,m=Math.round,a=typeof(c1)=="string";
    if(typeof(p)!="number"||p<-1||p>1||typeof(c0)!="string"||(c0[0]!='r'&&c0[0]!='#')||(c1&&!a))return null;
    if(!this.pSBCr)this.pSBCr=(d)=>{
        let n=d.length,x={};
        if(n>9){
            [r,g,b,a]=d=d.split(","),n=d.length;
            if(n<3||n>4)return null;
            x.r=i(r[3]=="a"?r.slice(5):r.slice(4)),x.g=i(g),x.b=i(b),x.a=a?parseFloat(a):-1
        }else{
            if(n==8||n==6||n<4)return null;
            if(n<6)d="#" d[1] d[1] d[2] d[2] d[3] d[3] (n>4?d[4] d[4]:"");
            d=i(d.slice(1),16);
            if(n==9||n==5)x.r=d>>24&255,x.g=d>>16&255,x.b=d>>8&255,x.a=m((d&255)/0.255)/1000;
            else x.r=d>>16,x.g=d>>8&255,x.b=d&255,x.a=-1
        }return x};
    h=c0.length>9,h=a?c1.length>9?true:c1=="c"?!h:false:h,f=this.pSBCr(c0),P=p<0,t=c1&&c1!="c"?this.pSBCr(c1):P?{r:0,g:0,b:0,a:-1}:{r:255,g:255,b:255,a:-1},p=P?p*-1:p,P=1-p;
    if(!f||!t)return null;
    if(l)r=m(P*f.r p*t.r),g=m(P*f.g p*t.g),b=m(P*f.b p*t.b);
    else r=m((P*f.r**2 p*t.r**2)**0.5),g=m((P*f.g**2 p*t.g**2)**0.5),b=m((P*f.b**2 p*t.b**2)**0.5);
    a=f.a,t=t.a,f=a>=0||t>=0,a=f?a<0?t:t<0?a:a*P t*p:0;
    if(h)return"rgb" (f?"a(":"(") r "," g "," b (f?"," m(a*1000)/1000:"") ")";
    else return"#" (4294967296 r*16777216 g*65536 b*256 (f?m(a*255):0)).toString(16).slice(1,f?undefined:-2)
}

Now when i copy paste it in my typescript (angular) app, i get lots of errors like

Parameter 'p' implicitly has an 'any' type.
Parameter 'c0' implicitly has an 'any' type.
Parameter 'c1' implicitly has an 'any' type.
Parameter 'l' implicitly has an 'any' type.
The containing arrow function captures the global value of 'this'.
Element implicitly has an 'any' type because type 'typeof globalThis' has no index signature.
The containing arrow function captures the global value of 'this'.
Element implicitly has an 'any' type because type 'typeof globalThis' has no index signature.
Parameter 'd' implicitly has an 'any' type.
Property 'r' does not exist on type '{}'.
Property 'g' does not exist on type '{}'.
Property 'b' does not exist on type '{}'.
Property 'a' does not exist on type '{}'.
Argument of type 'boolean' is not assignable to parameter of type 'string'.
Property 'r' does not exist on type '{}'.
Property 'g' does not exist on type '{}'.
Property 'b' does not exist on type '{}'.
Property 'a' does not exist on type '{}'.
Property 'r' does not exist on type '{}'.
Property 'g' does not exist on type '{}'.
Property 'b' does not exist on type '{}'.
Property 'a' does not exist on type '{}'.
The containing arrow function captures the global value of 'this'.
Element implicitly has an 'any' type because type 'typeof globalThis' has no index signature.
The containing arrow function captures the global value of 'this'.
Element implicitly has an 'any' type because type 'typeof globalThis' has no index signature.
Operator '>=' cannot be applied to types 'boolean' and 'number'.
Operator '<' cannot be applied to types 'boolean' and 'number'.
The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.
The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.
The left-hand side of an arithmetic operation must be of type 'any', 'number', 'bigint' or an enum type.

I know some say any valid JavaScript is also valid typescript, but that's just not true..

Now without rewriting the method, is there a way to use it without having typescript do all the checks?

CodePudding user response:

Option 1:

Put that code in a .js file and export the function Typescript will ignore .js files

Option 2:

put

// @ts-nocheck

At the beginning of the .ts file where that function is in. It will ignore type checking in the whole .ts file.

In case there is an error while calling the function, put

//@ts-ignore 

above that function call

This will ignore errors where arguments are not typed for that function call

  • Related