Typescript is a great language. I’ve been using the language for almost two years now, and I still like it. It’s a superset of Javascript, but much more than that. Typescript is great for everyday development, and it helps me avoid a lot of unnecessary errors.

Here are some Typescript features you may not know about that could come in handy.

@ts-expect-error

Suppose we have the following code:

const multiply = (a:number,b:number) = > a+b;
multiply('12'.13);
Copy the code

Argument of type ‘string’ is not assignable to parameter of type

You can’t change the type of the first argument, and if you want to ignore the TS compiler for the time being, you can suppress the error with @ts-ignore.

const multiply = (a:number,b:number) = > a*b;
// @ts-ignore
multiply('12'.13);
Copy the code

After you fix the error and change the first argument passed to the multiply function to 12:

const multiply = (a:number,b:number) = > a+b;
// @ts-ignore
multiply(12.13);
Copy the code

Don’t forget to remove the @ts-ignore directive we used earlier, because it will always ignore the next line, and unless you remove it, it may cause future code errors.

If you are worried about forgetting to delete, you can also use the @ts-expect-error command, which is similar to the @ts-ignore command, except that the TS compiler will prompt you with an error once it is fixed.

const multiply = (a:number,b:number) = > a+b;
// @ts-expect-error
multiply(12.13);
Copy the code

Unused '@ts-expect-error' directive.

This will remind you to delete the instruction immediately after fixing the error.

Never type

Suppose you have a function that accepts an error status code and throws an error based on the status. In this case, the never type comes in handy when function doesn’t end properly.

The difference between never and void is that void means that at least undefined or null is returned, while never means that the function is not executed properly.

function throwError(error: string) :never { 
        throw new Error(error); 
} 
Copy the code

Template text type

Template literals are similar to string types in javascript, but are type-specific. Suppose you want to implement a pop-up library and have a type for locating pop-ups:

type popoverPositions = 'top'|'bottom'|'left'|'right'|'top-left'|'top-right'|'top-center'|'bottom-left'|'bottom-right'|'bottom-center';
Copy the code

But in practice, permutations and combinations of these types can drive you crazy.

By using template literals, you can easily decompose and combine types so that all possible new types can be combined:

type positions = 'top'|'bottom'|'center';
type directions = 'left'|'right'|'center'
type popoverPositions = positions | directions | `${positions}-${directions}`
Copy the code

Generate all types of:

type popoverPositions = positions | directions | "top-left" | "top-right" | "bottom-left" | "bottom-right" | "center-left" | "center-right"
Copy the code

Empty assertion

Null assertions are used to tell the TS compiler that your value is neither null nor undefined. Suppose we have initialized the value to:

let myNumber:null | number = null;

But we will update myNumber later:

myNumber = 69;

Suppose we have a function that only accepts type number,

const add = (a:number,b:number) = > {
    return a + b;
}
add(myNumber,1);
Copy the code

Argument of type ‘null’ is not assignable to parameter of type ‘number’.

So in this case, you can end the variable with a! The null assertion tells the compiler that the value passed in is not null.

const add = (a:number,b:number) = > {
    returna + b; } add(myNumber! .1);
Copy the code

The above code compiles successfully.

Combined interface

Megring Interfaces are a declaration-merging type, and when you have two interfece of the same name, it is possible to merge them into a single interface

interface Box {
  height: number;
  width: number;
}
interface Box {
  scale: number;
}
let box: Box = { height: 5.width: 6.scale: 10 };
Copy the code

So here, you can create two separate interfaces with the same name, then merge them into one and use the example above.

conclusion

TypeScript is a superset of JavaScript that provides a type system and support for ES6. Although there are some learning costs, if we can take advantage of the language’s type system and protection mechanisms, we can avoid some of the pitfalls of JavaScript and reduce the maintenance costs of our code. Free up more time for fishing.

Write in the last

Finally, recommend a full set of TS tutorials. Recent TS in ascension, collect a set of very good tutorial, free to share with XDM www.yidengxuetang.com/pub-page/in…