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…