• TypeScript — JavaScript with Superpowers
  • By Indrek Lasn
  • The Nuggets translation Project
  • Permanent link to this article: github.com/xitu/gold-m…
  • Translator: jonjia
  • Proofread by moods445 goldEli

TypeScript: JavaScript with superpowers (I)

JavasSript is cool. But you know what’s even cooler? The TypeScript.

Can you see what’s wrong with this code?

TypeScript (top) vs ES6 (bottom)

TypeScript shows this. See that red underline? That’s the error message TypeScript gives us.

You may have noticed this (nice work) – toUpperCase() is a String method, and we pass an integer as an argument, so obviously you can’t call toUpperCase() on an integer.

We fix this by declaring that the nameToUpperCase() method can only take string arguments.

Returns the dalai! Now we don’t have to remember that nameToUpperCase() must have a string argument type, we can trust TypeScript to remember it. Imagine if we had thousands of parameter types to remember. That’s crazy!

There are still error warnings. Why is that? Because we’re still passing an integer argument! Just pass a string argument.

Note that TypeScript is eventually compiled into JavaScript (it’s just a superset of JavaScript, like C++ and C).

That’s why TypeScript and type checking are powerful.

TypeScript had 10,327,953 downloads last month.

TypeScript vs. Flow downloads

Let’s explore the TypeScript world — before delving into it, let’s take a look at what TypeScript is and why it exists.

TypeScript became open source on October 1, 2012. Developed and maintained by Microsoft, Anders Hejlsberg, lead architect of C#, led his team on TypeScript development.

TypeScript is fully open source on GitHub, so anyone can read the source code and contribute.

TypeScript – a superset of JavaScript.

How to start

It’s actually quite simple – we just need to install an NPM package. Open your terminal and type the following command:


npm i -g typescript && mkdir typescript && cd typescript && tsc --init
Copy the code

You can also set up TypeScript configuration files.

We just create a.ts file and tell the TypeScript compiler to watch for file changes.

touch typescript.ts && tsc -w
Copy the code

The TSC – TypeScript compiler.

The last step

Great – now you can practice with our example.

We write the code in the.ts file, and the compiled.js file is the code that runs in the browser. In this example, instead of using a browser environment, we use a NodeJS environment (so.js runs in a Node environment).

JavaScript has seven data types, six of which are base types and the rest are defined as Object types.

The basic JavaScript types are as follows:

  • String
  • Number
  • Undefined
  • Null
  • Symbol
  • Boolean

All the rest areobjects

  • Functions are first-class objects
  • Arrays are special objects
  • A prototype is an object

TypeScript supports the same basic types as JavaScript, but also provides some additional types.

Additional types are optional, and if you’re not familiar with them, you don’t have to use them. One of the benefits I’ve found with TypeScript is that it’s flexible and easy to use.

Additional types are as follows:

A tuple is an array of well-organized elements whose types are defined in order

Ordinary arrays vs tuples (organized arrays)

TypeScript warns us of errors if you don’t follow the rules defined by tuples.

The tuple defines that the first element is of type number, but instead of number, it is assigned to a string with a value of “Indrek”, so it will compile an error.

In TypeScript, you define the type of the return value of a function. Because there are many functions that don’t have a return statement.

Take a look at how we declare the parameter and return value types – they are both of type string.

What if we don’t return any value? The following example has only one console.log statement in the function body.

As we can see, the compilation tells us: “Hey, you explicitly said we must return a string, but you didn’t actually return anything. I’m just telling you, you’re not following our rules.”

What if we just don’t want to return any value? Let’s say we have a callback in our function. In this case you can declare the return value of type Void.

But sometimes our function does return a value, implicitly or explicitly, and we can’t set the type of the return value to Void.

The any type is very simple. If we want to specify a type for a variable whose type is unknown, we can specify any

Take the following example:

As you can see, I assign the person variable multiple times, using a different type of value each time. The first is string, then number, and finally Boolean. We cannot determine the type of this variable.

If you use a third party library, you may not know the types of certain variables.

Let’s declare an array into which you can store data retrieved from an API. The data in the array is random. It doesn’t just contain strings, numbers, and it doesn’t have an organized structure like tuples. The any type solves this problem.

If you know that the elements of an array are all of the same type, you can use the following syntax:

This article is already long enough, and we will continue in the next one. We still have — enum — never — null — undefined as base types and type assertions to discuss.

The next article is here

If you want to learn more about TypeScript, read the official TypeScript documentation

Many people have asked me what editor I used for the images in this article. I used the Visual Studio Code editor with the Ayu Mirage theme and the Source Code Pro font.

You can find more interesting articles on my Medium.

  • Indrek Lasn – Medium: Read Writing from Indrek Lasn on Medium. Merchant of happiness, founder @ https://vaulty.io, Growth/Engineering @… medium.com

You can also follow me on Twitter. ❤

  • Indrek Lasn (@lasnindrek) | Twitter: The latest Tweets from Indrek Lasn (@lasnindrek). business propositons: [email protected]. Zurich, Switzerland twitter.com

Thanks for reading!

The Nuggets Translation Project is a community that translates quality Internet technical articles from English sharing articles on nuggets. The content covers Android, iOS, front-end, back-end, blockchain, products, design, artificial intelligence and other fields. If you want to see more high-quality translation, please continue to pay attention to the Translation plan of Digging Gold, the official Weibo, Zhihu column.