First, TypeScript

What is typeScript?

TypeScript is a superset of Javascript. Let’s use a diagram to briefly illustrate the relationship between TS and JS

Why typeScript

Before talking about typeScript, let’s take a look at Javascript.

JS inside all for the object, through the prototype chain to define a series of different types of data of the original method, and then to the series can change the context of the strange technology, so that JS in the use of time can be very convenient, do not need to consider too much, on the chain we crazy use, so really good? (Soul torture)

And in terms of data type, JS is also not too limited, as long as you set the variable and assign a value, then before the variable is not destroyed, you can also change its data type (base data type).

After a few years of development experience, especially those who have worked on large projects, you will find that a feature that is very convenient and friendly for beginners suddenly becomes a bug maker. Because of the judgment of data type, JS provides a series of methods, and they are not particularly accurate, which makes a rigorous developers become a little less rigorous, then typeScript appears, which makes the programming work, which needs to be very rigorous, return to the essence. That’s probably where typeScript comes in.

One of the easiest and fastest ways to learn how to use typeScript is to open up the official typeScript documentation for developers over the years

However, in the process of reading, I found a new version of typeScript documentation, which is much more user-friendly to read. Here is also the typeScript official documentation -V2

Let’s review the basics of typeScript

Basic Types of typeScript

What are typeScript Basic Types included?

  • Boolean (Boolean type)
  • Number (Number type)
  • String (String type)
  • Array (Array type)
  • Tuple (Tuple type)
  • Enum (Enumerable type)
  • Any (Any type)
  • Void (Void type)
  • Null & Undefined
  • Never (Never type)
  • Object (Object type – non-primitive type)
2.1.1 Boolean (Boolean type)

TypeScript grammar

let isBool: Boolean = false;
Copy the code

JavaScript compiled into ES5

"use strict";
var isBool = false;
Copy the code
2.1.2 Number (Number type)

TypeScript grammar

let nums: number = 123;
Copy the code

JavaScript compiled into ES5

"use strict";
var nums = 123;
Copy the code
2.1.3 String (String type)

TypeScript grammar

let str: string = "123";
Copy the code

JavaScript compiled into ES5

"use strict";
var str = "123";
Copy the code
2.1.4 Array (Array type)

TypeScript grammar

// Pure array type Array representation
let arr0: number[] = [123.123];
// Use array generics
let arr1: Array<number> = [123.345];
let arr2: Array<string> = ["123"."345"];
let arr3: Array<any> = [123."345", { title: "123" }];
Copy the code

JavaScript compiled into ES5

"use strict";
// Pure array type Array representation
var arr0 = [123.123];
// Use array generics
var arr1 = [123.345];
var arr2 = ["123"."345"];
var arr3 = [123."345", { title: "123" }];
Copy the code
2.1.5 Tuple (Tuple type)
Just to explain a little bit about tuple types, tuple types are essentially a subset of array types, but the difference is that the length of a tuple type is known. That means we define a type for each of these bits in the array. This type is called ## tuple type ##Copy the code

TypeScript grammar

let tupleArr: [number.string];
tupleArr = [123."123"];
Copy the code

JavaScript compiled into ES5

"use strict";
var tupleArr;
tupleArr = [123."123"];
Copy the code
2.1.6 Enum (Enumerable type)
A little explanation of what an enumerable type is, as this is a new data type to most front-end developers who only know JS, but 'enumerable types' are already very common in C/C #/ Java. In a nutshell, enumerations are a way for organizations to collect associated variables. Let's start with 🌰 : in C, we need to define a set of variables, and we usually define them like this:Copy the code
#define MON 1
#define TUE 2
#define WED 3
#define THU 4
.
.
.
Copy the code
If we have enumerated types, how can we define them?Copy the code
enum DAY {
	MON=1, TUE, WED, THU, FRI, SAT, SUN
}
Copy the code

So somebody’s going to ask, what difference does it make? This is a good question, because let’s describe the need for enumerated types in conjunction with an actual scenario that we often encounter during front-end development.

TypeScript grammar

enum HttpStutas {
	success = 200,
	error = 404,
	noRequestId = 10010,
	noRequestName = 10011,}let res = HttpStutas.success;
console.log(res);
Copy the code

JavaScript compiled into ES5

"use strict";
var HttpStutas;
(function (HttpStutas) {
    HttpStutas[HttpStutas["success"] = 200] = "success";
    HttpStutas[HttpStutas["error"] = 404] = "error";
    HttpStutas[HttpStutas["noRequestId"] = 10010] = "noRequestId";
    HttpStutas[HttpStutas["noRequestName"] = 10011] = "noRequestName";
})(HttpStutas || (HttpStutas = {}));
var res = HttpStutas.success;
console.log(res);	/ / 200
console.log(HttpStutas)
/** * { '200': 'success', '404': 'error', '10010': 'noRequestId', '10011': 'noRequestName', success: 200, error: 404, noRequestId: 10010, noRequestName: 10011 } * */

// The only understanding we need here is that the JavaScript assignment operator, which is the equal sign here, returns the solution to the assigned value.

// In fact, we simply define some HTTP request return status code, we real-time according to the status code to translate into a string we can easily understand, here is also a front-end students in daily development often encountered problems
Copy the code
2.1.7 Any (Any type)

TypeScript grammar

let a: any = '123';
a = 123;
a = true;
a = {
	x: '123'};let arr: any[] = [1.'123', {}, true[123]].Copy the code

JavaScript compiled into ES5

"use strict";
var a = '123';
a = 123;
a = true;
a = {
    x: '123'};var arr = [1.'123', {}, true[123]].Copy the code
2.1.8 Viod (Viod type)
Generally, our functions can be divided into two types, one is the data returned after execution, and the other is the data returned without any data. So before introducing Viod, we need to introduce how to write when the function confirms the data type returned.Copy the code

TypeScript grammar

let fun1 = function() :string {
	return '123';
};

let fun2 = function() :number {
	return 123;
};

let fun3 = function() :Array<number> {
	return [1.213.213];
};

let fun4 = function() :Array<string> {
	return ['13'.'axa'];
};

let fun5 = function() :Array<any> {
	return ['13'.213{}]; };let fun6 = function() :any {
	return { a: 123 };
};

let fun7 = function() :void {
	console.log(fun1);
};

// If fun7 does not return any data, we define this function as a viod type.
Copy the code

JavaScript compiled into ES5

"use strict";
var fun1 = function () {
    return '123';
};
var fun2 = function () {
    return 123;
};
var fun3 = function () {
    return [1.213.213];
};
var fun4 = function () {
    return ['13'.'axa'];
};
var fun5 = function () {
    return ['13'.213{}]; };var fun6 = function () {
    return { a: 123 };
};
var fun7 = function () {
    console.log(fun1);
};
Copy the code
2.1.9 Null & undefined (null and unas type)

TypeScript grammar

let n: null = null;
let u: undefined = undefined;

console.log(n === null); // true
Copy the code

JavaScript compiled into ES5

"use strict";
var n = null;
var u = undefined;
console.log(n === null); // true
Copy the code
2.1.10 Never (Never type)

TypeScript grammar

let ass: never;

// ass = 123; // ts will report an error

// never is a subset of null and undefined, representing a type that never occurs

ass = (() = > {// ts
	throw Error('wrong');
})(a); // But often, we useneverType is relatively few, generally can usenumberType orstringTypes of alternativeCopy the code

JavaScript compiled into ES5

"use strict";
var ass;
// ass = 123; // ts will report an error
// never is a subset of null and undefined, representing a type that never occurs
ass = (function () {
    // ts
    throw Error('wrong'); }) ();// However, we rarely use the never type. We usually use the number type or string type instead
Copy the code
2.1.11 Object (Object type)
Object is a non-primitive type and is not number, string, Boolean, symbol, null, or undefined. A type other thanCopy the code

TypeScript grammar

let o: object;
let names: string = 'zhang';
o = {
	names,
};
Copy the code

JavaScript compiled into ES5

"use strict";
var o;
var names = 'zhang';
o = {
    names: names,
};
Copy the code

Third, summary

This article concludes with an introduction to typeScript’s basic data types, a basic introduction to typeScript’s What, Why, and How, and what typeScript is. Why and how to use typeScript. So we first contact, mainly need to pay attention to the difference in syntax, because often, when we define the types of various data types there are often some syntax errors, here you pay attention to when writing, if there is an error, you can view the corresponding error message through VScode

Front End Road – A first look at TypeScript basic data types