I’m sure you know a little bit about Typescript’s basic syntax, but you need to know more advanced uses to get to the next level. If you can use these advanced grammars in your projects, you will get a lot of results. Without further ado, let’s start today’s study.


The first is the introduction of the union type, which is where it all started.

let a: string | number | boolean = '123' // Variable A can be of type string,
a = 123 // Can also be number
a = true // Can also be Boolean
Copy the code


Extract all the attribute names of a type as a union type

// key of use
interface People {
    name: string;
    age: number;
// keyof takes the keyof interface
// type keys = "name" | "age"
type keys = keyof People;
// Suppose there is an object like this,
// We need to use typescript to implement a get function to get its property values
const xiaozhang:People = {
    name: 'zhang'.age: 12

function get<T extends object.K extends keyof T> (o: T, name: K) :T[K] {
    return o[name]
console.log(get(xiaozhang,'age')) / / 12
console.log(get(xiaozhang,'name')) / / zhang
// Error "address" cannot be assigned to "keyof People".
Copy the code

Keyof is slightly similar to object. keys, except that keyof takes the keyof interface

Mapping (Record)

Record is used for attribute mapping

Define a common object type

// {[x: string]: any; }
type Myobject = Record<string.any>
let a:Myobject = {
Copy the code

Collocative type

type RequestMethods = 'GET'|'POST'| 'DELETE'
type MethodsAny = Record<RequestMethods, any>
let mothod1:MethodsAny = {
let mothod2:MethodsAny = {
    GET:"1".POST:'1'.DELETE:'1'.PUT:'111' // Error "PUT" is not in type "MethodsAny"
Copy the code

Tie-in interface

interface PersonModel {
// [x: string]: PersonModel;
type student = Record<string, PersonModel>

let students:student = {
    student1: {name:'the little ling'.age:18
    student2: {name:'xiao li'.age:19}}Copy the code

Partial(Conversion optional)

Ts is to make all attributes in a definition optional

// Partial
interface People {
    name: string;
    age: number;

Type {} is missing the following attributes of type People: name, age
const person1: People = {}

/** We can use typescript's advanced Partial type, which makes all properties of the interface optional. We pass the type we need to define into Partial as a generic type, which makes all properties of the current type optional */
const person2: Partial<People> = {} / / can
const person3: Partial<People> = { name: 'xiaodu' } / / can
const person4: Partial<People> = { sex: 'male' } // Error "sex" is not in type Partial
Copy the code

Required (Conversion must parameter)

As opposed to Partial, make all attributes in a definition mandatory

// This parameter is mandatory
interfacePeople { name? :string; age? :number;
// type "{name: string; The attribute "age" is missing in "}", but is Required in the type "Required
const person2: Required<People> = {
Copy the code

Pick up

Ts allows you to select a property definition that is part of the original interface

interface People {
    name: string
    age: number

type somePeople = Pick<People,'name'>

let onlyName:somePeople = { / / can
Copy the code

Readonly (property converted to read-only)

In TS, all attributes in a definition are made read-only

/ / read-only
interface People {
    name: string
    age: {name:string
        age:number}}const xiaoling: Readonly<People> = {
    name: 'the little ling'./ / read-only
    age: 18./ / read-only
    dog: {'rhubarb'}}// But it is shallow. = 'big ling' // "name" cannot be assigned because it is read-only. = 2 / / can
Copy the code

Exclude (out)

Exclude excludes a portion of a union type

type havTypes = 'name' | 'age' | 'sex'
type someTypes = Exclude<havTypes,'sex'>
const myTypes1:someTypes = 'name' / / can
const myTypes2:someTypes = 'sex' // Error assigning type "sex" to type "someTypes".
Copy the code

Omit anything

Ts removes a portion of the key/value pair of an interface or type

/ / to omit
interface People {
    name: string;
    age: number;
type somePeople = Omit<People,'name'>
/** type somePeople = { age: number; } * /
Copy the code

ReadonlyArray (read-only array)

Create an array whose index cannot be modified

We know that when we create an object or array using const, we can modify its internal properties, but sometimes we don’t need to modify its internal properties, so we use ReadonlyArray.

This can be done in two ways:

// Method 1: by type assertion
const arr = ['lil'.'the little iron'.'small culvert'.'the little ling'] as const
arr[3] = 'handsome boy'; // An error was reported that "3" could not be assigned because it is read-only.
Copy the code
// Method 2: Use ReadonlyArray
const arr2 : ReadonlyArray<string> = ['mulan'.'shield hill'.'kay'.'Keep a promise for a hundred miles']
arr2[3] = 'Hundred Miles of Mystery' // The index signature of type readOnly String [] can only be read.
Copy the code

What’s the difference between as const and ReadonlyArray? [Manual antics]

The difference is that as const is deep, even though an array contains objects, the data inside the object cannot be modified. ReadonlyArray is’ shallow ‘.

as const


You can see that it is actually possible to change the second layer in the ReadonlyArray array.

The project address

The following is the project address: TS Project address