Arrays and tuples

Creating an array is simple:

const arr = [1];
Copy the code

TypeScript will infer that arr is number[] :

arr.push('1');  // Error
Copy the code

When an array element has another type, we can use a type annotation:

const arr: Array<string | number> = [1];

arr.push('1');  // OK
arr.push(true);  // Error
Copy the code

Or you can use optional tuples:

const arr: [number.string? ] = [1];         // Arr members can be number, string, undefined
arr.push('1');   // OK
arr.push(true);   // Error
Copy the code

Using tuples, you can also provide type checking at a given location:

arr[0] = '1';   // Error
arr[1] = 1;    // Error
Copy the code

use

In general, we make multiple requests in parallel using promise.all:

interface A {
  name: string;
}

interface B {
  age: number;
}

const [{ data: a }, { data: b }] = await Promise.all([
  axios.get<A>('http://some.1'),
  axios.get<B>('http://some.2')])Copy the code

At this point, TypeScript can deduce that a is of type A and B is of type B.

Now, for a change: the second request is made when certain conditions are met:

// Use type annotations
const requestList: [Promise<AxiosResponse<A>>, Promise<AxiosResponse<B>>? ]  = [axios.get<A>('http://some.1')];
if (flag) {
  requestList[1] = (axios.get<B>('http://some.2'));
};
const [ { data: a }, response ] = await Promise.all(requestList);
Copy the code

We expected it to work as expected, but instead, promise.all (requestList) reported a type compatibility error, in this issue, describing the same problem.

Now, you can make the program work by asserting:

const requestList: any[]  = [axios.get<A>('http://some.1')];  // Set it to any[]
if (flag) {
  requestList[1] = (axios.get<B>('http://some.2'));
}
const [
  { data: a },
  response
] = await Promise.all(requestList) as [AxiosResponse<A>, AxiosResponse<B>?] // Type safe
Copy the code

Literal type

On top of JavaScript, TypeScript extends a series of literal types to ensure type accuracy.

For example, creating a string literal:

const a = 'hello';  // a is of type 'hello'
a = 'world';   // Error
Copy the code

Or you could:

let a: 'hello' = 'hello';  // a is of type 'hello'
a = 'world';     // Error
Copy the code

Other data types are similar.

You can also define cross type and union type literals:

interface A {
  name: string;
}
interface B {
  name: string;
  age: number;
}

type C = A | B;
type D = A & B;
Copy the code

Object literal type

TypeScript has a concept called ‘Freshness’ for object literal types, which is also called stricter checking of object literals, as in the following example:

let someThing: { name: string };
someThing = { name: 'hello' };              // ok
someThing = { name: 'hello', age: 123 };    {name: string} does not have an age attribute

let otherThing = { name: 'hello', age: 123 };
someThing = otherThing;                     // ok
Copy the code

TypeScript considers every object literal created to be in the “fresh” state; When a “fresh” object literal is assigned to a variable, an error occurs if the type of the object is incompatible with the type of the variable (in the previous example someThine = {name: ‘hello’, age: 123}; Mistakes); When the object literal type is widened, the “fresh” state of the object literal disappears (someThing = otherThing; When the value is assigned, the type of someThing becomes wider.

A more practical use is as follows:

function logName(something: { name: string }) {
  console.log(something.name);
}

const obj = {
  name: 'matt',
  job: 'being awesome'
}

logName(obj); // ok
logName({ name: 'matt' }); // ok
logName({ nama: 'matt' }); // Error: nama attribute does not exist in {name: string} attribute.
logName({ name: 'matt', job: 'being awesome' }); // Error: Object literals can only specify known attributes. 'job' does not exist here.
Copy the code

The basic principle is similar to above, when you want to use more rigorous type checking, you can pass an object literal with a fresh state (e.g. LogName ({name: ‘matt’, job: ‘being awesome’});) . When you want to pass more properties to a function, you can assign the object literal to a new variable and then pass it to the function (e.g. LogName (obj)). Function logName(someThing: {name: string; [key: string]: string}.

More and more

  • Understand TypeScript in depth
  • Working with TypeScript
  • Working with TypeScript (2)