What is a TypeScript

TypeScript is a superset of JavaScript that provides a type system and support for ES6

The official definition of

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. Any browser. Any host. Any OS. Open source.

TypeScript is a superset of JavaScript types that can be compiled into pure JavaScript. The compiled JavaScript can run on any browser. TypeScript compilation tools can run on any server and on any system. TypeScript is open source.

Why learn TypeScript

  • Typescript is an enhancement to JavaScript that makes code much more readable and maintainable, allowing us to write more robust code

  • The future of the front end

    • The latest Vue3 release uses TypeScript. In fact, this point is enough, Utah’s approval is the biggest reason
    • Angular builds TypeScript in version 2.0
    • React support for TypeScript is also silky

  • A raise, a higher salary

Start learning TypeScript

Type annotations

TypeScript Type annotations are a lightweight way to add constraints to functions and variables.

// js
let num = 5 
num = 'hello' There is nothing wrong with / /

// ts
let num: number = 5 
num = 'hello' Int num = number; int num = number; int num = number
Copy the code

Then let’s look at TypeScript’s primitive types

Boolean value

The most basic data types are simple true/false values, called Boolean in JavaScript and TypeScript (and in other languages as well).

let bool: boolean = true
Copy the code

digital

Like JavaScript, all numbers in TypeScript are floating point numbers. These floating point numbers are of type number. In addition to supporting decimal and hexadecimal literals, TypeScript also supports binary and octal literals introduced in ECMAScript 2015.

let num: number = 123
num = 0b1101 / / binary
num = 0o164 / / octal
num = 0x8b // Hexadecimal
Copy the code

String type

Like JavaScript, you can use double quotes (“) or single quotes (‘) to represent strings.

let name: string = 'hui'
Copy the code

You can also use template strings, which can define multiple lines of text and inline expressions. The string is surrounded by backquotes (****) and is embedded in the form of ${expr} ‘

let name: string = `hui`
let hello: string = `hello, my name is ${name}`
Copy the code

An array of

TypeScript manipulates array elements just like JavaScript.

There are two ways to define an array. First, the element type can be followed by [] to represent an array of elements of that type:

let arr1: number[] = [1.2.3]
let arr2: string[] = ['a'.'b'.'c']
let arr3: (number | string) [] = [1.'b'.3] // Array elements can be of type number or string
Copy the code

The second way is to use Array generics, Array< element type > :

let arr1: Array<number> = [1.2.3]
let arr2: Array<string> = ['a'.'b'.'c']
let arr3: Array<number | string> = [1.'b'.2]
Copy the code

Tuples Tuple

The tuple type allows you to represent an array with a known number and type of elements that need not be of the same type. For example, you can define a pair of tuples of type string and number.

let x: [string.number]
x = ['hui'.2] // OK
x = [2.'hui'] // Error
Copy the code

Enumerated type

Enum types complement the JavaScript standard data types. As in other languages such as C#, enumeration types can be used to give friendly names to a set of values.

enum Roles {
  SUPER_ROLE,
  ADMIN,
  USER
}
console.log(Roles.SUPER_ROLE) / / 0
console.log(Roles.ADMIN) / / 1
console.log(Roles.USER) / / 2
Copy the code

By default, elements are numbered from 0. You can also manually specify the values of the members. For example, let’s change the above example to number from 1:

enum Roles {
  SUPER_ROLE = 1,
  ADMIN,
  USER
}
console.log(Roles.SUPER_ROLE) / / 1
console.log(Roles.ADMIN) / / 2
console.log(Roles.USER) / / 3
Copy the code

Any arbitrary value

Sometimes we want to specify a type for variables whose type is not known at programming time. These values may come from dynamic content, such as user input or third-party code libraries. In this case, we don’t want the type checker to check these values and just pass them through compile-time checks. We can then mark these variables with type any:

let name:any = 'hui'
name = 123 // OK
name = true // OK
Copy the code

The any type is also useful when you only know part of the data type. For example, you have an array that contains different types of data:

let list: any[] = [1.true.'hui']
Copy the code

Use any as little as possible, otherwise you might be writing code in AnyScript

A null value

In a way, void is like the opposite of any; it means there is no type at all. When a function returns no value, you usually see the return type void:

function getName() :void {
  alert('my name is hui')}Copy the code

Declaring a void variable doesn’t do much good, because you can only assign undefined and null to it:

let v: void
v = undefined // OK
Copy the code

Null, and Undefined

In TypeScript, undefined and null have their own types called undefined and NULL, respectively. Like void, their own types are not very useful:

let u: undefined = undefined
let n: null = null
Copy the code

Never

The never type represents the types of values that never exist. The never type is used to return an error loop

function getError(message: string) :never {
    throw new Error(message);
}
function infiniteFunc() :never {
    while (true) {}}Copy the code

The never type is a subtype of any type and can be assigned to any type; However, no type is a subtype of never or can be assigned to a type of never (except never itself). Even any cannot be assigned to never.

let neverVarible: never = (() = > {while (true) {}})(a)
let num: number = 123
let name: string = 'hui'
num = neverVarible // OK
neverVarible = name // error
Copy the code

Types of assertions

A type assertion is a manual specification of the value of a type

Type assertions come in two forms. The first is the Angle bracket syntax:

let str: any = "this is a string";

let strLength: number = (<string>str).length;
Copy the code

The other is the as syntax:

let str: any = "this is a string";

let strLength: number = (str as string).length;
Copy the code

We’ll talk about Typescript in the next articleinterface