Beware of using implicit returns in arrow functions. Consider the below example of a simple arrow function. It returns a simple variable. In the absence of any other statement in the function body, a simple mention of x will return the value of x. 1 2 3 const getStuff = x => x; console.

Are public and private variables really public or private? Consider the below example - 1 2 3 4 5 6 7 class MathOp { public x: number; private y: number; } const op = new MathOp(); op.x; // no problem If you try to access the private variable.

With ‘type’ in its name, Typescript lives up to its reputation of being a typed language. But, what exactly are the supported types? At a high-level we can classify types as built-in (basic & special ) and additional types including user-defined types. Built-in Types (Basic) Similar to Javascript implicit types, we have number, string, boolean to form the three core built-in types.

Use onclick rather than submit in HTML forms. A typical HTML form has a few fields and a button to submit the data to some back-end server. And, the typical way to do the form submission is through the submit method. 1 2 3 4 5 <form action="/helloMessage.php"> <input type="text" id="name" /><br /> <button type="submit"></button> </form> On clicking the button, the page will submit data to helloMessage.

Get started with object oriented programming in Typescript. Typescript behaves like a language with built-in support for OOP concepts, and does not carry the quirks of Javascript in that respect. Classes and Objects Define classes and objects like how you define in any of the popular OOP languages. 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 class Fruit { public name: string; private grownIn: Array<string>; constructor(name: string, grownIn: Array<string>) { this.

I had been fascinated by Typescript and have been going back and forth on making it my primary programming language. In a few posts and with as much less information as possible, let’s see why anyone should bother with Typescript. What is Typescript? Typescript is a typed Javascript. No, I am kidding - it is more than that.

How can you use await without an async function? Don’t click or proceed further if you are not into practical jokes. Say, you try using await in a “normal” function or directly within a module.. 1 2 3 4 5 6 7 function getWeather(loc) { const weather = await fetchWeather(loc); return weather; } // SyntaxError: await is only valid in async function You receive a compilation error that await can be used only in async function.

Generate Fibonacci series with generators and feel good about yourself. Previously you have seen how the totally practical example of generating Fibonacci series was breathing fire with memoization, and may have also come across using loops or recursion to solve the same problem. But, there is no fun in all that - this is real-life and we have to “generate” fun (yep, there we go again).

Previously, we have talked about all things being an object in Javascript. But to what extent can we apply this to our beloved functions. You can see this almost everywhere with the below syntax - 1 2 3 4 5 6 const getSum = (x, y) => { return x + y; }; console.

What are generators and how can I use them? How do you write loops in Javascript - Simple for/while? Recursion? In other less exciting ways? How do you throttle and control function execution? Debounce function? Build your own? What if you could produce the right mix of reusable functions, looping and throttling in one go?

Is there really a problem with NPM use? Short answer: no. Long answer: it’s complicated. I am nothing but thankful for the tonnes of NPM packages. I would never have built web applications that could support thousands of users all by myself without all those hundreds of packages. There are thousands of developers (if not millions) who do much better than what I could.

Flatten recursive arrays using Array.flat(). We have seen how to flatten arrays before. Array.flat() is quite useful to flatten arrays in one statement and output a simpler array. But, what about situations where you do not know the depth of array hierarchy - 1 const nums = [[1, 2], [3, 4], [[5], [6]], [[[7]]]]; Fear not.

Remember to filter your arrays before doing array-wise operation. Filtering falsy values must be the first operation even if you do not have specific filtering requirements. Consider this array - 1 const nums = [1, 3, 5, undefined, 7, 9, null]; If you are in control of the data source, you can very well expect to filter only when necessary.