This is the 25th day of my participation in the August Challenge

This is the final installment of the TypeScript primer, focusing on TypeScript’s high-level mapping types, template literals, and conditional types. Finally, some TS learning books and online learning resources are summarized for subsequent learning. (Hint: the comments in the image code can be carefully looked at yo!)

“Early review”

The preliminary knowledge of introduction to relearn the front-end | TypeScript

The basic knowledge of introduction to relearn the front-end | TypeScript

Advanced first part of introduction to relearn the front-end | TypeScript

preface

Mapped Type (Mapped Type)

A mapping type is a way of creating object types

The simplest writing format

{[ K in P ] : T}
Copy the code
  • K is an identifier that maps to each subtype of P;
  • P a collection of property names
  • T is the data type

A simple example

As you can see, the type traversal K takes the values in Keys and assigns them to string, just as the JS for in traversal key.

Example 1

Make each property of a known type optional

  • thePersonTo pass toOptional
  • keyof TAccess toPersonAll keys inside (Keyof knowledge)
  • Then, after obtaining the specific type and assigning the value, a full copy of the Person is made
  • Add it to the property name?, becomes optional if the prefix is addedreadonly You can change it to a read-only version.)

Example 2

How do I get the top result back? That is, remove all the alternatives

  • ? Optional, -? Remove the optional
  • Readonly Read-only, -readonly Removes read-only

Summary: Combine the mapping type + keyof + Typeof + optional + read-only modifier

What is Equal? You can go to the preparatory knowledge section to see 👉 now

Further understanding

Contrast:

Create objects in value space

{hello:123, world: abc'}
Copy the code

Create object types in the type space

{hello:number, world: string}
Copy the code

code

contrast

Create type with mapping type + conditional type

{hello:number, world: string}
Copy the code

Create object types by enumerating them

{hello:number, world: string} 
Copy the code

Contrast:

Value space

  • Function arguments and default values
  • The for – the in traverse
  • If – else judgment

Type a space

  • Generic parameters and default values
  • Key – the in traverse
  • Conditional type judgment

What are value space and type space? , to prepare knowledge review 👉 now go

Template literal types (TS4.1)

Template literal types were introduced in TS4.1. It makes it easier to create string literal types. The syntax is the same as template strings in JS.

contrast

Template strings VS template literals

If the template contains union types,

  • TS first computes the Cartesian product of the set of types,
  • I get a series of ordered pairs,
  • The ordered pairs are then substituted into the template to compute the literal type.
  • All literal types taken together are the final type.

TS for this set size upper limit is 100000(100,000)

Condition type (TS2.8)

Condition types were introduced in TS2.8. To put it simply, conditional typing is to return different types by judging the relationship between two types. Syntax and the ternary operator (X? A: B)

contrast

Ternary operators vs conditional types

Conditional types Advanced topics:

  • Distributive Conditional Types in Conditional Types
  • Infer the keyword
  • UnionToIntersection<U>
  • Type variable Variance

Common Tool Types

lib.es5.d.ts

The Partial, Required, and Readonly versions of the utility types are implemented in our mapping types example above

The TypeScript resources

books

TypeScript Programming

  • Features: Comprehensive


Understanding TypeScript

  • Features: In-depth

Effective TypeScript

  • Characteristics: guidance, principle

TypeScript Programming with Types

  • Features: Focus on TS type system

Online information

TypeScript tutorial

  • Read through.


TypeScript official TypeScript documentation

  • Read through.
  • Key Handbook, focus on What’s New


Understanding TypeScript online

  • Read through the


Nuggets: articles, columns, pamphlets


The TypeScript column


StackOverflow

  • Don’t understand to ask

  • Attach a link to the Playground with your questions


TypeScript source code, Issue, PR

conclusion

Analogy: Think of the TS type system itself as a “language” for “manipulating and creating” types

  • List ←→ Execute in sequence
  • Mapping type ←→ loop
  • Condition type ←→ Condition judgment

JS operates on various values, which have corresponding various operations

TS operates on types, and types are sets, and sets have operations on sets

What are you doing with TS?

The “language” we provide through the TS type system describes exactly what types we need. What TS does in return is expose problems ahead of compile time. The code is more robust and extensible.

twitter

This is the end of getting started with TypeScript. This series does not cover everything about TS, but rather the principles, concepts, and important stuff. I believe that after reading these, and then with the problem to see the recommended information, a lot of problems will suddenly become clear!

conclusion

I attended the byte youth training camp, so I prepared a re-learning front-end series. Due to the time, I may only be able to learn notes.

Update time: one essay will be published each day in the order of the course

The lecturer of this class: Byte Front – Weihua Wang

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

If there is a harvest, leave a thumbs-up to encourage it! 😘