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 before
TypeScript
But at ordinary times the business is still used aboveJavaScript
To develop leads gradually onTypeScript
Out of practice. - Take this opportunity to study together again
TypeScript
Knowledge of. - In the previous article we
TypeScript
After a review of the basic knowledge, it is not found that it is not very difficult. - This article is
TypeScript
This 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 into
JavaScript
After:
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 our
type
They’re just aliases, so we use interfaces when we want to extend the type, becausetype
Can’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 will
sthingFruit
Bound to accept onlyapple
banana
mango
So other variables using this type can only select the values allowed in it, as shown abovegrapes
Is 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 it
string
Typenumber
Type, he will report an errorCannot assign type 'number' to type 'string'
. - in
JavaScript
There is no such restriction on the array ofTypeScript
You can have it in an array you can have it in an arraystring
Type andnumber
Type? That’s when we’re neededtuples
Played. - Tuples (
Tuple
To 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 following
push
You 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 tuples
push
The 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 record
TypeScript
I will continue to outputTypeScript
Related 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)🎯