This article mainly introduces some basic knowledge of TS.

preface

“Early review”

A primer on TypeScript

Basic knowledge of

The type hierarchy in TS

Unknown

  • Complete Set (Top Type)

Never

  • Empty set (Bottom Type)

knowledge

  • A value of a lower type can be assigned to a variable/constant of an upper type
  • Variables/constants of type unknown can point to any type of value.
  • There is no variable of type never (never is an empty set)

Top/Bottom Type

Top Type and Bottom Type in different languages

any

1. Any is special. It is both Top Type and Bottom Type

  • That is: variables/constants of type any + variables/constants of any other type can be assigned to each other
  • But any is type-insecure and unserviceable, so it shouldAvoid using

2. Any is contagious

  • It makes everything it touches Type Unsafe, so TS introduced the type-safe unknown Type as Top Type in 3.0

3. Any hides bugs

  • Because there is no type information, there is no error if it is used incorrectly.

The following is an example: string birthDate has no getTime() method, but does not report an error.

4. Any hides code design details: it loses the design of data types

Because any has all of these problems, it is recommended that strict mode be turned on or implicit any be disabled in tsconfig

Knowledge:

Turn noImplicityAny on. Avoid using any

unknown

  • The unknown type must be annotated. TS does not derive any value to unknown
  • The unknown type can only be compared between equal and unequal types
  • Type narrowing is required to perform operations or function calls

If the type cannot be predicted, do not use any, use unknown and narrow the type before using

Boolean type (Boolean)

Boolean types have only two elements: true and false

  • Let,var variables are widened to Boolean types,const constants are the corresponding literal types

  • It is worth noting that the combination of true and false is pushed back to Boolean

The number type

Number includes: integer, floating point, +Infinity, NaN

Bigint type

  • Bigint is a new type that can represent an integer of any size. The number range [- (2^53-1), 2^53-1]
  • Bigint literals are numbers followed by a lowercase “n”. Bigint supports addition, subtraction, multiplication, division, remainder %, and power **

If you want to use bigINT, compilerOptions>target must be greater than or equal to ES2020

String type (string)

String literals are commonly associated with distinguishing data types

Symbol type

Symbol is ES2015 | into the new language features

  • Variables declared by let and var are derived to type symbol

  • The unique symbol must be a const constant

  • Const constants are derived as unique symbols, and can also be annotated as unique symbols

  • The unique symbol is not a type, but a group of types. For example, unique symbol B1 and unique Symbol b1x are two types

What is the unique symbol?

contrast

String literal type VS unique symbol

  • Unlike other literal types, unique Symbol types cannot be referenced directly and must be referenced as “typeof constants “.
  • String literal types can be represented directly by the corresponding string

knowledge

  • Assigning a unique symbol to another const broadens the type to symbol

  • If you do not want to broaden, you need to display typeof annotations as corresponding constants

  • The first argument to Symbol is a description, not a Symbol name or Symbol ID. Each call to Symbo returns a new symbol, even if the description is the same.

  • Symbol.for internally maintains a dictionary that returns a new Symbol if no corresponding Symbol has been created before, or an already created Symbol if one has been created.

Object Type (Object)

To understand the following [object types]

  • Defining objects and defining object types;
  • Get object keys and get object type keys

If you do not know the value space [type space] [Equal], you can read the previous article 👉 now

Array type (Array)

Arrays are annotated in two ways:

  • T[]
  • Array<T>The interface of generic

Knowledge:

  • Const arrays don’t shrink because if they do, they become tuples

  • TS cannot infer the type of an empty array, only any[]

  • However, when out of scope, TS can analyze the code and infer the type of the array

Tuples (a Tuple)

Tuples are subtypes of arrays. The element type at each index bit of a tuple is determined.

Knowledge:

  • Because tuples are created the same way as arrays, tuples must display annotations.

[…string[]] is equivalent to string[], but [string,…string[]] is not equivalent to string[], the former contains at least one element

Enumeration (Enum)

Enumeration is essentially a mapping. An object containing the mapping is generated in the value space.

Print the result

You can see

  • Enumeration values that are not explicitly assigned automatically increment from 0, with bidirectional mapping (Chinese as above)

  • Display enumerations assigned to integers with bidirectional mapping (Japanese, above)

  • Enumerations of explicitly assigned strings do not have reverse mappings, only monomial mappings (Korean, above)

Merging of enumerations

Enumerations can be split into segments and can be merged with namespaces of the same name

  • A namespace can be merged with an enum

  • Enum Indicates that multiple segments can be split and merged

Constant enumeration

  • Constant enumerations do not create variables in value space.
  • All references to constant enumerations are replaced with corresponding values

(However, it can be controlled via compilerOptions>preserveConstEnum)

  • Constant enumerations have no bidirectional mapping

  • Constant enumerations still support multiple segments; But constant enumerations do not generate variables. Therefore, merging with namespace is not supported

  • And TS will output the key corresponding to constant, convenient debugging

Compare the JS code generated by the following enum with constenum

null,undefined,void,never

Finally, let’s look at four of the more confusing types

In JS

  • Undefined = {undefiend}, which should indicate that the defiend is Undefined
  • Null = {nul}, indicating that the declared value is NUL or Null

The TS

  • Void: Function has no explicit return value

  • Type never: the function cannot return

In JS

Void is a unary operator: it performs the following expression and returns undefined unconditionally

Why is there such an operator?

Before ES1.3, undefined was not directly accessible! It can only be done by void(0). ES1.3 adds undefined to the Global Object before it can be accessed.

conclusion

Byte Youth Training camp

The lecturer of this class: Byte Front – Weihua Wang

If any of the above is wrong, please point out in the comments section!

Our journey is the sea of stars! 🚀