Advanced features

Project config

Since version 6.0.0 it is possible to set up generator config. It allows developers on single project to share typings configuration, like:

• names of SObjects that are used on front end
• folder to which typings should be generated
• share custom typings that otherwise would be included in js code

"Array notation" of paths

Paths to files and folders in config are represented by arrays. So if you wanted to point to file

subfolder/of/project

the correct way to do so is to create array like this

["subfolder", "of", "project"]

Why? I thought it would be best way to represent paths without OS-specific path separators.

Generate config

To generate config, simply run

sfdx typings:lwc:config:create

Specify typings folder

In generated config, you can specify in which folder typings should be generated. To do so, in config file set typingsPath property like this:

{
    "typingsPath": [
        "my", 
        "typings", 
        "dir"
    ]
}

From now on, typings will be generated in folder

my/typings/dir

This can be useful if you want to setup Type Script to check LWC code.

Specify custom typings

Since version 6.0.0 it is possible to include custom typings in project. This allows to extract types from js files declared using obscure jsDocs to separate files outside of sfdx project structure.

Custom typings can be declared in 2 ways:

• for every component
• only for one component

To declare folders with typings used for all components, declare common property of config.

Component specific types are declared in property componentSpecific. It is a map with keys coresponding to components names (including namespace). Values in this map are arrays of paths (declared in array notation mentioned before).

Example config with custom typings:

{
    "common": [
        [
            "dir",
            "with",
            "typings",
            "for",
            "all",
            "components"
        ],
        [
            "lwc-custom-types"
        ]
    ],
    "componentSpecific": {
        "c/yourComponentName": [
            [
                "your",
                "custom",
                "typings",
                "dir",
                "only for",
                "this",
                "component"
            ]
        ],
        "c/otherComponent": [
            ["lwc-custom-type", "onlyForThisOne"],
            ["lwc-custom-type", "otherFolder"]
        ]
    }
}

Declaring SObjects used on front end

In case you are sure some SObject will be used on front end, you can specify usedSObjectNames property in config. This property accepts map with:

• keys representing sObject names
• values representing max schema depth generation (number form 1 to 5 but I highly suggest to set it as low as possible as higher values negatively impact IDE autocompletion features).

Example config:

{
    "usedSObjectNames": {
        "User": 4,
        "Contact": 3,
        "Contract": null
    }
}