TypeScript target (target)

typescript-config/target takes into account your webhint‘s browserslist configuration and warns you if your target (es3, es2015, etc.) is appropriate.

Why is this important?

Not having the right ES target can increase the size of your bundle. At the same time, having an ES target that not all the browsers you care support can create issues with your users.

What does the hint check?

This hint checks if the compilerOptions property target is the appropriate based on your browserslist configuration.

The matrix is as follows:

Browsers not in this list will be ignored if they are in your browserslist.

Keep in mind that this is an approximative list. I.E.: There are still features of ES2015 that haven’t been implemented in all browsers, but the numbers above should give you good support for the most common ones.

The following sites were used to create this table:

• http://kangax.github.io/compat-table/es5/
• http://kangax.github.io/compat-table/es6/
• http://kangax.github.io/compat-table/es2016plus/
• https://www.chromestatus.com/features#ES6
• http://2ality.com/2011/02/es5-shim-use-ecmascript-5-in-older.html
• https://www.chromestatus.com/features#ES6https://developer.mozilla.org/en-US/docs/Web/JavaScript/New_in_JavaScript/ECMAScript_2015_support_in_Mozilla

Examples that trigger the hint

Having a target not supported by all your targeted browsers:

tsconfig.json:

{
    ...
    "compilerOptions": {
        "target": "es5",
        ...
    },
    ...
}

.hintrc:

{
    ...
    "browserslist": ["IE 8"]
    ...
}

Having a target that is lower than what all your browsers support:

tsconfig.json:

{
    ...
    "compilerOptions": {
        "target": "es3",
        ...
    },
    ...
}

.hintrc:

{
    ...
    "browserslist": ["Chrome 64", "Edge 16", "Firefox 60"]
    ...
}

Examples that pass the hint

The right target for the right browsers:

tsconfig.json:

{
    ...
    "compilerOptions": {
        "target": "es3",
        ...
    },
    ...
}

.hintrc:

{
    ...
    "browserslist": ["IE 8"]
    ...
}

Further Reading

• TypeScript Documentation
• Browserslist