Why can typescript fight side by side with JavaScript (2) - practical methods for typescript type conversion (Part 1)

This is my participation 8 The fourth of the yuegengwen challenge 23 God , Check out the activity details ：8 Yuegengwen challenge

TypeScript Several utility types are provided , Transform the original type to get a new type , A bit like a specific function , Receive one or more types as input , Output a new type .

Feeling Typescript Provide depth , And you can understand JavaScript On the basis of , Understand from simple to deep TypeScript

Everyone may think that JavaScript Too simple , Closure 、 Prototype chains and higher-order functions play , No difficulty. , Not fun enough . There is now a TypeScript, It can meet your requirements . Maybe I'm superficial , But for the time being, I saw some Typescript , I feel that some contents are really incomprehensible , Probably JavaScript You're too familiar with me . Complex design does not mean reasonable , Let's take a look TypeScript Provide us with this set Type Whether the solution is feasible and effective , Is it designed for some pain points of large-scale development .

Type Practical methods

stay TypeScript Provide a variety of methods to operate on types , Or it can be said to be a method of converting types . Provide a new type through operation based on the existing type .

Partial<Type>

Create a type based on an existing type , Set all properties of the original type to optional . It can also be understood as the type of all subsets of existing types , Explain with an example to help you understand .

interface Tut{
    title:string;
    content:string;
}

const updateTut = (tut:Tut,updatedTut:Tut)=>{
    return {...tut,...updatedTut}
}

const tut_1:Tut = {
    title : "machine learning",
    content : "machine learning content",
}

const update_tut:Tut = {
    title:"update machine learning",
    content:"update machine leanring content"
}

const updated_tut = updateTut(tut_1,update_tut)
console.log(updated_tut)
 Copy code 

The above code we use interface Interface defined Tut , Can be of type , Next, define a function updateTut Takes two Tut Parameters of type , All the function has to do is update the first parameter with the second parameter . Because if both parameter types are interfaces Tut Then each parameter needs to implement all the properties and methods of the interface .

{
  title: 'update machine learning',
  content: 'update machine leanring content'
}
 Copy code 

If we just want to use the second 2 Parameter a property to update the first parameter , But because they all need to be Tut type , The interface has certain constraints , You need to implement the interface or interface type variables. You need to implement the interface definition properties , And then you can use this Partial<Type>,Partial<Type> Type indicates the second 2 Parameters can only implement interfaces Tut Part of the , Just give the attribute to be updated .

const updateTut = (tut:Tut,updatedTut:Partial<Tut>)=>{
    return {...tut,...updatedTut}
}
 Copy code 

here ... Deconstruction symbol , In this way, you can use updatedTut To update tut

const updated_tut = updateTut(tut_1,{
    content:"update machine leanring content"
})
console.log(updated_tut)
 Copy code 

{
  title: 'machine learning',
  content: 'update machine leanring content'
}
 Copy code 

Required<Type>

It's described above Partial It can be said to be strict before payment , But the opposite operation is this Required This is a wide first and then strict operation . The situation is that when defining an interface , The properties and methods of the interface are optional . In fact, sometimes I feel TypeScript There are many ways to implement the same function , Sometimes you need to let go , Sometimes you have to be more rigorous , For type control, it is a relaxation , Provides control over type richness .

interface Article{
    title?:string;
    text?:string;
}

const machine_learning_article:Article = {title:"machine leanring"}
// Property 'text' is missing in type '{ title: string; }' but required in type 'Required<Article>'.ts(2741)
// demo_02.ts(3, 5): 'text' is declared here.
const deep_learning_article:Required<Article> = {title:"deep learning",text:"deep learning"}
 Copy code 

Readonly<Type>

Use Readonly<Type> When converting a type , It can be found that once the type attribute is assigned , You can't change .

const machine_learning_article:Readonly<Article> = {title:"machine leanring"}
 Copy code 

// Cannot assign to 'title' because it is a read-only property.ts(2540)
machine_learning_article.title = "updated machine learning"
 Copy code 

Constructs an object type whose property keys are Keys and whose property values are Type. This utility can be used to map the properties of a type to another type.

Define an object type , Its attribute key type is Keys, Its attribute value type is Type. This tool can be used to map properties of one type to another .

interface TutInfo{
    title:string;
    lesson:number;
}

type TutCategoryName = "programming" | "machineleanring" | "codetools"

const tuts: Record<TutCategoryName, TutInfo> = {
    programming:{title:"basic python programming", lesson:12},
    machineleanring:{title:"basic python programming", lesson:12},
    codetools:{title:"basic python programming", lesson:12},
}
 Copy code 

Pick<Type, Keys>

Pick Type is to select several properties on an existing type to get a new type , This new type is a subset of the existing type . This operation is similar to starting from a qualifier .

interface Tut{
    title:string;
    lesson:number;
    completed:boolean;
    description:string;
}

type TutPreview = Pick<Tut, "title" | "description" | "completed" >;

const tut:TutPreview = {
    title:"machine learning",
    description:"machine leanring",
    completed:false,
}
 Copy code 

Omit<Type, Keys>

This operation can be understood as ·Pick The inverse operation , That is to exclude... From existing types Keys Get a new type .

type TutPreview2 = Omit<Tut, "lesson">;

const tut2:TutPreview2 = {
    title:"deep learning",
    description:"deep leanring",
    completed:false,
}
 Copy code 

Record<Keys,Type>

Keys Is the key value ,Type Is the type corresponding to the key value .

const rec:Record<string,number> = {
    machineLearningTut:12,
    deepLearningTut:16,
}

const tuts: Record<string,Tut> ={
    MachineLearningTut:{
        title:"machine learning tut",
        isCompleted:true
    },
    DeeplearningTut:{
        title:"deep leanring tut",
        isCompleted:false
    }
}
 Copy code