As a small staff, work much, no commission, family leave I work overtime. Mortgage not paid off, insurance to buy their own. Fortunately, I don’t have to pay for parking because I can’t afford a car. 2020 xiaobi decided to learn Typescript well, improve personal ability, and strive to make a small amount of money, and strive to buy a bike (PFF, what bike to ！！！！) . This is the third Typescript learning article I’ve written.

Getting started with Typescript basic Types

Getting started with Typescript basic Types

Typescript introduction to arrays and tuples

Typescript interface for getting started

An array of

The first Bugatti, the second Ferrari, the third Rolls-Royce, the fourth Porsche… The following is the parking lot at home

/ / parking
const park: string[] = ['Bugatti'.'Ferrari'.Rolls Royce.'Porsche']
// One day my dad, who had just come back from Dubai, said, "Boy, Dad just bought some Lamborghinis. Let me give you one, so we need a new car in the parking lot
park.push('Lamborghini')
// The parking lot is for parking only, and you can't put the billions in your safe in the parking lot, so
Argument of type '9999999999' is not assignable to parameter of type 'string'.
park.push(9999999999)

Copy the code

Hey, wake up. You’re moving bricks. Dream done. Back to business.

Arrays can define not only strings, but also number, Boolean, and so on

// The age of the beauty
const belleAge: number[] = [16.17.18.20]

// Recent lottery wins
const win: boolean[] = [false.false.false ,false ,false.false]
Copy the code

If there are different values in the array, can’t we define them? This is definable, but requires the use of a new conceptual union type. Let’s define an array that can contain both character and number types

Name, age, height, weight, ex-boyfriend
const info:  Array<string | number>  =  [Zhuge Steel egg.22.170.50.'Yu Qian']
Copy the code

Arrays can contain objects as well as base types

type userInfoType =  {
    weight:  number,
    name:  string,
    age: number,
    height: number,
    exBoyFriend: string
}
const user1: userInfoType =  {
    name: Zhuge Steel egg.weight: 50.age: 22.height: 170.exBoyFriend: 'Yu Qian'
}
const array4: userInfoType[]  =  [user1]
Copy the code

tuples

Like to invest recently, bought a few houses in countrywide each big city so, but the house is much, often can’t remember clearly, this is not, the money bought a building management system recently, the house that buys records in management system. Each house needs to maintain its location, address, area, price, whether there is a hostess and other information, using tuples to represent the house information

// Beijing XXX District XX community XXXXXX 500 square meters house, 2000W, with a hostess
const house:[string,string,number,number,boolean] = ['Beijing'.'District XX, District XX, Beijing'.500.2000.true]

// Write down all the house information
type houseTuple = [string,string,number,number,boolean]
// Each item in the array is a tuple type
const houses: houseTuple[] = [
   ['Beijing'.'District XX, District XX, Beijing'.500.2000.true],
   ['Beijing'.'District XX, District XX, Beijing'.600.3000.true]]Copy the code

When assigning a tuple, not only must the type of each item of the tuple be the same, but also the number of elements be the same. When you modify a tuple, you can modify it through an index

// With the recent rise in housing price, the original price of 5,000W has increased to 5,500W, so we need to modify the price of a house
const house:[string,string,number,number,boolean] = ['Beijing'.'District XX, District XX, Beijing'.500.2000.true]
house[3] = 5500
Copy the code

One day I noticed that all the houses had a hostess, and some of the houses were quite large, maybe each floor had a hostess, and I wanted to keep track of the number of hostesses

const house:[string,string,number,number,boolean] = ['Beijing'.'District XX, District XX, Beijing'.1000.4000.true]
// Whether the value of hostess can be changed to the number of hostess
Type '2' is not assignable to Type 'Boolean '.
house[4] = 2
Copy the code

There is a fixed data type for each item of a tuple, and no item can be assigned a different type. Because each item of a tuple has a fixed type, you can call a method of the type on the item of a tuple

// Check whether the house is located in Chaoyang District, Beijing
const house:[string,string,number,number,boolean] = ['Beijing'.'Xx Community, Chaoyang District, Beijing'.1000.4000.true]
// The address corresponds to a string, and the startsWith method can be called
const result = house[1].startsWith('Chaoyang District, Beijing')
Copy the code

Tuples are essentially arrays, so any operation tuple on an array can be used, but it is important to note that if you perform an out-of-bounds operation on an array, the type of the out-of-bounds operation must be included in the type defined by the element

const house:[string,string,number,number,boolean] = ['Beijing'.'Xx Community, Chaoyang District, Beijing'.1000.4000.true]
// Add the property certificate number of the house
/ / right, can push string | number type
house.push('xxxxxxxxxxxxxxxxxxxx')
// Add the personal information of the owner of the house
type infoType = {
    name: string,
    age: number
}
const info: infoType = {
    name: Zhuge Steel egg.age: 22
}
/ / an Argument of type 'infotypes is not assignable to the parameter of type' string | number | Boolean '.
house.push(info)
Copy the code

Out-of-bounds operations on tuple index values are different before and after TS2.6. Prior to TS2.6, any value added by index contained in a tuple’s defined type was allowed, but prohibited after 2.6

const house:[string,string,number,number,boolean] = ['Beijing'.'Xx Community, Chaoyang District, Beijing'.1000.4000.true]

// Add the property certificate number
// ts 2.6 is correct
house[5] = 'xxxxxxxxxxxxxxxxxxxx'

// An error was reported after ts 2.6
// Error Type '" XXXXXXXXXXXXXXXXXXXX "' is not assignable to Type 'undefined'.
house[5] = 'xxxxxxxxxxxxxxxxxxxx'
Copy the code