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

Preface πŸŽ‰

  • Although I have learned TS before, I still use it in ordinary businessJavaScriptTo develop leads gradually onTypeScriptOut of practice.
  • Take this opportunity to study together againTypeScriptKnowledge of.

TypeScrip union type πŸ‰

  • TypeScripThe associative type can be understood as having the variable’s type be one of the defined types, and each type passing through|To separate.
let someThing: string | number;
someThing = 'lwj';
someThing = 5201314;
Copy the code
  • In the code abovesomeThingThe type isstring|numberThe associative type representssomeThingCan acceptstringandnumberType, and we can see that we’re assigning values to the variablesstringThe type andnumberNone of the types will report an error. This is a federated type.
  • It is worth noting that although a variable that accepts a union type can take values of both typesTypeScripIs, in fact,'Not sure'When is the value of what type, as given in the beginning abovestringTheta is the value of thetastringType, but the next second gavenumberType, this is where he belongsnumberSo it’s ok to access the properties and methods of this variable if they are of a federated type, public methods or public properties.

  • As you can see in the figure above it was originally astringType of time is therelengthProperty, but later becamenumberType, so we need to be careful when accessing variable attributes of uncertain type.

Type of TypeScrip objects — the interface 🍍

Basic usage

  • inTypeScriptIn, we use the interface (Interfaces) to define the type of the object. What is an interface? I think it can be understood as a kind of connection middleware, as long as both parties meet certain conditions can be connected through this interface, and in the definition of the object type, the interface is like the pairShape of objectDescribe.
interface Option { label: string; value: number; } let ageOption: Option = {label: '23 ', value: 23}; Let agesOption: Option = {label: 23, // value: '23' // error};Copy the code
  • Up here we can see that one is definedinterfaceTo describe theoptionThe shape of one is neededstringThe type oflabelAnd anumberThe type ofvalue, so an error will be reported if the condition is not met in the object defined below.
  • The interface generally begins with a capital letter in the variables we define with the interface madeThe shape ofTo be completely consistent, having fewer or more properties is not acceptable.
interface Option { label: string; value: number; } let ageOption: Option = {label: '23 '}; Let agesOption: Option = {label: '23 ', value: 23, STH :'hi'};Copy the code

Optional attribute

  • Now that we know that interfaces are designed to regulate object types, is there a case where we don’t want objects to exactly match an interface? This is where we can useOptional attribute.
interface Option { label: string; value? : number; } let ageOption: Option = {label: '23 ', value: 23,}; Let timesOption: Option = {label: 'minutes ',};Copy the code
  • From above we can see that a property is used when defining the interface?“, means that this property is optional and can be interpreted as optional, so the following two objects do not report an error using the interface.

Any attribute

  • As you can see from the above, we can use optional properties to reduce the number of objects written in the interface properties, so is there any way that we can define objects that are not limited to the interface properties? And that’s where it comes inAny attribute.
interface Option { label: string; value? : number; [propName: string]: any; Let ageOption: Option = {label: '23 ', value: 23, icon:' no icon '};Copy the code
  • From above we can see that the interface has added an attribute type ofany, attribute namestringType, which we can add to the object when we use the interface.
  • It’s worth mentioning that if you set any property, thenThe types of the remaining propertiesIt must beArbitrary attribute typetheA subset of, such as determining the attribute type abovestringAnd optional attribute typesnumberAre arbitrary attribute typesanySubset of PI, so that makes sense.
  • An interface can only have one arbitrary attribute. If you want the interface to have more than one type of attribute, you can use the union type in any attribute.
interface Option { label: string; [propName: string]:string | number; } let ageOption: Option = {label: '23 ', icon:' no icon ', ICONS :23};Copy the code

Read-only property

  • Sometimes we want a property that can’t be changed, and its value is set at the beginning, so we can use itRead-only property
interface Option { readonly id: number; label: string; [propName: string]:string | number; } let ageOption: Option = {id: 1, label: '23 ', icon:' no icon ', ICONS :23}; AgeOption. Id = 110 / / an errorCopy the code
  • As the above code shows,idAttributes are first identified when they are definedageOptionObject, and its corresponding interface is areadonlyProperty, it cannot be changed.

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 πŸŒ…

How to write an elegant component example using Vuepress (above) πŸ‘ˆ

How to write an elegant component example using Vuepress (2) πŸ‘ˆ

“In God’s eyes” talk about the Element component structure -Switch

Talk about the Element component structure “from god’s perspective” -Radio