This is the 11th day of my participation in the August More Text Challenge. For details, see:August is more challenging

Preface 🎉

  • I’ve learned that beforeTypeScriptBut at ordinary times the business is still used aboveJavaScriptTo develop leads gradually onTypeScriptOut of practice.
  • Take this opportunity to study together againTypeScriptKnowledge of.
  • In the previous article weTypeScriptAfter a review of the basic knowledge, it is not found that it is not very difficult.
  • This article isTypeScriptThis is the first part of the advanced article. For the basic article, please see the article I shared before.

Type alias 🚤

  • The basic syntax is [type The name of the = type]
  • A type alias is a name that gives a type another name and can be used elsewhere if the type is needed.
type otherType=number;
let other:otherType;
other=5;
Copy the code
  • Compiled intoJavaScriptAfter:
var other;
other = 5;
Copy the code
  • It’s worth noting that we’re aliasing the type but we’re not creating a new type, so we’re following its original type.

  • If we pass a value that does not match the type of the variable we will get an error like the one above.
  • A type defines an object like an interface, and can even be used as an interface.
type otherObj={ name:string }; interface sthObj{ name:string }; Let obj1:otherObj={name:' nugget '}; Let obj2:sthObj={name:' lue '};Copy the code
  • It’s perfectly fine to write that way, so when do we use aliases and when do we use interfaces? Because ourtypeThey’re just aliases, so we use interfaces when we want to extend the type, becausetypeCan’t be inherited. Type aliases are often used to associate types.

The literal string type is ⛴️

  • The basic syntax is [type The name of the = string]
  • A string literal is a type that constrains the variable to one of several strings and will report an error if any other string is present.
type sthingFruit= "apple" | "banana" | "mango"; let fruit:sthingFruit; fruit="apple"; fruit="grapes"; / / an errorCopy the code
  • In the example above we willsthingFruitBound to accept onlyapple banana mangoSo other variables using this type can only select the values allowed in it, as shown abovegrapesIs not advisable.

Tuples 🛳 ️

  • We learned earlier in the basics that you can use arrays to merge data of the same type.
let fruit:string[]=['apple','banana',"mango"]; let fruit1:string[]=['apple','banana',25]; / / an errorCopy the code
  • And you can see if you define itstringTypenumberType, he will report an errorCannot assign type 'number' to type 'string'.
  • inJavaScriptThere is no such restriction on the array ofTypeScriptYou can have it in an array you can have it in an arraystringType andnumberType? That’s when we’re neededtuplesPlayed.
  • Tuples (TupleTo combine objects of different types, we can write this.
let fruit:[string,number,string]; fruit=['apple',25,'banana']; fruit=['apple',25]; / / an errorCopy the code
  • We can see that although tuples can accept different types of values, the format and number of values assigned to them must be the same:The number of type formats defined is consistent.

  • In tuples we can change the corresponding value just as we can in arrays.
let fruit:[string,number,string]; fruit=['apple',18,'banana']; fruit[0]='watermelon'; fruit[1]=20; fruit[3]=21; // The error type is incorrectCopy the code
  • We can also take the individual values and operate on them but we have to follow the type specifications.
  • Although the assignment needs to be strictly in terms of format and quantity, if the followingpushYou can add the value of the type of the constraint.
let fruit:[string,number];
fruit=['apple',18];
fruit.push('banana');
fruit.push('grapes');
fruit.push('oranges');
Copy the code
  • It is worth noting that we then give tuplespushThe value of must be of the previously defined type, which is equivalent to limiting the type to the union type of the previously defined types, as shown abovestring number.

Put it at the end 👋

  • This is for the recordTypeScriptI will continue to outputTypeScriptRelated knowledge, you can learn together.
  • If you think this article is helpful to your words might as well 🍉 attention + thumbs up + favorites + comments + forwarding 🍉 support yo ~~😛

Past highlights 🌅

Getting Started with TypeScript basics (part 1)🎯

Getting Started with TypeScript basics (2)🎯

Getting Started with TypeScript basics (3)🎯

Getting Started with TypeScript Basics (IV)🎯