I am participating in Nuggets Creators Training Camp # 4 (link: juejin.cn/post/706419…

Learn TypeScript and prepare for Vue3!

It’s 2202. Are people using TypeScript?

Are you a little insecure about TypeScript and afraid to switch to AnyScript?

(val = ‘join the team ‘) =>’ raise raise raise raise! ‘) ()

Why useTypeScript?

  • TypeScript is a superset of JavaScript that supports all of JavaScript’s syntax and semantics, as well as providing additional features such as type detection and richer syntax as a superset of EACMAScript.

  • Javascript is a weakly typed language, the data type of variables is dynamic, and the type of variables can only be determined during execution. This kind of hindsight error recognition method will make developers become debugging masters, but it is not conducive to the improvement of programming ability, and will reduce the development efficiency.

TypeScriptSummary of some key words in

Next to its unique knowledge points are simply summarized

!Assertion operator

This is what happens when you use TypeScript to interconnect with backend data

At first glance, this call is fine, we are usingJavascriptIs also the time to call no problem, but as the eldest brotherTypeScriptBut I quit,An error! Must be an error!

! The assertion operator shows what it does:

  • ! The null/undefined function asserts that a variable will not be null/undefined, telling the editor to stop reporting errors. Use! Just eliminating the editor error does not have any impact on the operation.

  • Property or parameter! , forcing parsing (telling the typescript compiler that there must be a value); Variable after use! : Indicates that null/undefined is not recommended.

? .Optional chain (this js is also available!)

The back end returns such data to us, but we use it below

const age = data.family.son.age
Copy the code

Data.family. son is undefined, so if data.family.son is null or undefined, it is null. You can’t get an age. So for those of us who are experienced, when we encounter objects with many levels of fetch, we usually write something like this.

const age = data && data.family && data.family.son && data.family.son.age
Copy the code

It’s too long, it’s too long, and with the optional chain we can use it like this

constage = data? .family? .son? .ageCopy the code

??Null-value merge operator

This is the easy one

 name ?? 'Tom'
Copy the code
  • It’s a new feature in ES2020,
  • It’s only going to be on the left-hand sidenull 或 undefinedReturns the expression on the right
  • Unlike logical or, null-value merge operators doallowthe0 和 Empty string ”As a valid number.
  • Must be in logic or/and (&& | |) use parentheses when using, otherwise an error
(firstName || lastName) ?? "Tom" // Error if not addedCopy the code

TypeScriptSome key words in

Type Aliases are used to give a type a new name

Type aliases are often used for union types (which indicate that the value can be one of many types), such as the following

type sex = 'nan' | 'nv';

let person: sex = 'nan'
Copy the code

Interface and type are used in the same way. Interfaces are also used to define types

interface Person = {
    (name: string, age: number) = > any;
}
Copy the code

However, there are some differences

  • type 和 interfaceThe difference between

Both support extension, but the syntax is different

interface Name { 
    name: string; 
}
interface Person extends Name { 
    age: number; 
}

type Name = { 
    name: string; 
}
type Person = Name & { age: number  };
Copy the code

typeofwithtypeWith some clever use

In JavaScript, typeof can determine the underlying data typeof a variable, and in TypeScript, it can also retrieve the declared typeof a variable

const obj = { a: '1' };

type val = typeof obj;
Copy the code

Here the value of val becomes {a: string}, and of course you can do deep nesting:

const obj = { a: { b: { c: 1}}};

type val = typeof obj; 
Copy the code

Here the value of val becomes const obj: {a: {b: {c: number; }; }; }

keyof 与 typeWith some clever use

Keyof fetches all the keys of an object’s interface, and with type we get the keys of a particular type

type Obj = { a: string; b: string }

type val = keyof obj;

// type val = 'a' | 'b';
Copy the code

in 与 typeSome nifty features can be used to iterate over enumerated types

In iterates over Keys and gives each value a string

type Keys = 'a' | 'b' | 'c';
type Obj = { 
    [ T in Keys]: string;
}
Copy the code

So obj is going to be obj

 type Obj = {
    a: string,
    b: string,
    c: string
 }
Copy the code

The resources

[1] Get started with TypeScript!

[2] TypeScript Docs: I find it hard to read TypeScript Docs when I’m not fluent in foreign languages…

[3] Count the strange symbols in TS

[4] TypeScript Tutorial

[5] TypeScript Tutorial list

Good articles

I really recommend reading it, the official TypeScript documentation is not very carefully organized and not very comfortable to read… !

[1] Advanced applications and best practices in TypeScript

[2] TS FAQ sorting (more than 60, continuously updated ing)

[3] A brief description of built-in types in TS

[4] TypeScript tool types

[5] Understand TypeScript in depth

[6] A rare TS Study Guide (1.8W words)

[7] TypeScript tutorial for beginners

See here! Give it a thumbs up before you go!