Upgrade to Pro — share decks privately, control downloads, hide ads and more …

TSConfig - the keys you need to know

Orta
December 12, 2017

TSConfig - the keys you need to know

Covers the majority of the keys in the tsconfig - https://github.com/orta/ts_nyc_dec/

Orta

December 12, 2017
Tweet

More Decks by Orta

Other Decks in Programming

Transcript

  1. Thanks @erindepew for the logo WIFI: GoogleGuest #1: Dan Vanderkam

    will talk about type declarations and @types. #2: Orta Therox will explain ALL the compiler flags.* #3: Lightning talks. This could be you! *not all, the amount is too damn high
  2. Three 10–20 minute talks: Beginner, Intermediate, Advanced Short Q&A Socialize

    afterwards at Brass Monkey (55 Little W 12th St, New York, NY) Please use #tsnyc on Twitter, Instagram, etc. We follow the JSConf Code of Conduct Your organizers: Dan, Jason, Kirill and Orta Meetup Format
  3. Make art as popular as music RICHARD SERRA, Betwixt the

    Torus and the Sphere https://artsy.net/artwork/richard-serra-betwixt-the-torus-and-the-sphere
  4. Bring all of the world’s art online GERARD RICHTER,Abstraktes Bild,

    1997, High Museum of Art, Atlanta, Georgia https://artsy.net/artist/gerhard-richter
  5. What is inside a TSConfig? { "compilerOptions": { "target": "es5",

    /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', "module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or "lib": [], /* Specify library files to be included in the compilation: */ "allowJs": true, /* Allow javascript files to be compiled. */ "checkJs": true, /* Report errors in .js files. */ "jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'. */ "declaration": true, /* Generates corresponding '.d.ts' file. */ "sourceMap": true, /* Generates corresponding '.map' file. */ "outFile": "./", /* Concatenate and emit output to single file. */ "outDir": "./dist", /* Redirect output structure to the directory. */ "rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure "removeComments": true, /* Do not emit comments to output. */ "noEmit": true, /* Do not emit outputs. */ "importHelpers": true, /* Import emit helpers from 'tslib'. */ "downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting "isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). */ "strict": true, /* Enable all strict type-checking options. */ "noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type. */ "strictNullChecks": true, /* Enable strict null checks. */ "strictFunctionTypes": true, /* Enable strict checking of function types. */ "noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. */ "alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file. */ "noUnusedLocals": true, /* Report errors on unused locals. */ "noUnusedParameters": true, /* Report errors on unused parameters. */ "noImplicitReturns": true, /* Report error when not all code paths in function return a value. */ "noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement. */ "moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6).
  6. target module lib allowJs checkJs jsx declaration sourceMap outFile outDir

    rootDir removeComments noEmit importHelpers downlevelIteration isolatedModules strict noImplicitAny strictNullChecks strictFunctionTypes noImplicitThis alwaysStrict noUnusedLocals noUnusedParameters noImplicitReturns noFallthroughCasesInSwitch moduleResolution baseUrl paths rootDirs typeRoots types allowSyntheticDefaultImports preserveSymlinks sourceRoot mapRoot inlineSourceMap inlineSources experimentalDecorators emitDecoratorMetadata keys
  7. Target export const helloWorld = "Hi" TypeScript: "use strict" exports.

    __esModule = true exports.helloWorld = "Hi" Exported JavaScript with “commonjs”
  8. Target export const helloWorld = "Hi" TypeScript: "use strict" exports.

    __esModule = true exports.helloWorld = "Hi" Exported JavaScript with “commonjs” export var helloWorld = "Hi" Exported JavaScript with “es6”
  9. Lib What is in your runtime environment ES5, ES6, ES2015,

    ES7, ES2016, ES2017, ESNext, DOM, DOM.Iterable, WebWorker, ScriptHost, ES2015.Core, ES2015.Collection, ES2015.Generator, ES2015.Iterable, ES2015.Promise, ES2015.Proxy, ES2015.Reflect, ES2015.Symbol, ES2015.Symbol.WellKnown, ES2016.Array.Include, ES2017.object, ES2017.SharedMemory, ES2017.TypedArrays, esnext.asynciterable.
  10. Lib What is in your runtime environment? ES5, ES6, ES2015,

    ES7, ES2016, ES2017, ESNext, DOM, DOM.Iterable, WebWorker, ScriptHost, ES2015.Core, ES2015.Collection, ES2015.Generator, ES2015.Iterable, ES2015.Promise, ES2015.Proxy, ES2015.Reflect, ES2015.Symbol, ES2015.Symbol.WellKnown, ES2016.Array.Include, ES2017.object, ES2017.SharedMemory, ES2017.TypedArrays, esnext.asynciterable.
  11. checkJs export const pi = parseFloat(3.124) def.js import { pi

    } from "./def" console.log(pi) TypeScript - ex.ts // parseFloat(value:string)
  12. checkJs export const pi = parseFloat(3.124) def.js import { pi

    } from "./def" console.log(pi) TypeScript - ex.ts def.js(1,30): error TS2345: Argument of type '3.124' is not assignable to parameter of type 'string'. With: Raises an error // parseFloat(value:string)
  13. declaration export const helloWorld = "Hi" TypeScript: ex.ts "use strict"

    exports. __esModule = true exports.helloWorld = "Hi" JavaScript: ex.js export declare const helloWorld = "hi"; External Definition: ex.d.ts
  14. sourceMap export const helloWorld = "Hi" TypeScript: ex.ts "use strict"

    exports. __esModule = true exports.helloWorld = “Hi" //# sourceMappingURL=ex.js.map JavaScript: ex.js {"version":3,"file":"ex.js","sourceRoot":"","sources":[" .. External Definition: ex.js.map
  15. removeComments /** Used to show the user a hello message

    */ export const helloWorld = "hi"; TypeScript: ex.ts "use strict"; Object.defineProperty(exports, " __esModule", { value: true exports.helloWorld = "hi"; JavaScript: with true "use strict"; Object.defineProperty(exports, " __esModule", { value: true /** Used to show the user a hello message */ exports.helloWorld = "hi"; JavaScript: with false
  16. importHelpers export const helloWorld = { ...{ hello: "world"} }

    TypeScript: ex.ts "use strict"; var __assign = (this && this. __assign) || Object.assign || function(t) { for (var s, i = 1, n = arguments.length; i < n; i ++) { s = arguments[i]; for (var p in s) if (Object.prototype.hasOwnProperty.call(s, p)) t[p] = s[p]; } return t; }; Object.defineProperty(exports, " __esModule", { value: true }); exports.helloWorld = __assign({ hello: "world" }); JavaScript: off (default)
  17. importHelpers export const helloWorld = { ...{ hello: "world"} }

    TypeScript: ex.ts "use strict"; Object.defineProperty(exports, " __esModule", { value: true var tslib_1 = require("tslib"); exports.helloWorld = tslib_1. __assign({ hello: "world" }); JavaScript: on
  18. downlevelIteration const helloWorld = () => { for (const char

    of "Hello World") { console.log(char) } } TypeScript: ex.ts var helloWorld = function () { for (var _i = 0, _a = "Hello World"; _i < _a.length; _i ++) { var char = _a[_i]; console.log(char); } }; JavaScript: off (default)
  19. downlevelIteration "use strict"; var __values = (this && this. __values)

    || function (o) { var m = typeof Symbol === "function" && o[Symbol.iterator], i = 0; if (m) return m.call(o); return { next: function () { if (o && i >= o.length) o = void 0; return { value: o && o[i ++], done: !o }; } }; }; var helloWorld = function () { try { for (var _a = __values("Hello World"), _b = _a.next(); !_b.done; _b = _a.next()) { var char = _b.value; console.log(char); } } catch (e_1_1) { e_1 = { error: e_1_1 }; } finally { try { if (_b && !_b.done && (_c = _a.return)) _c.call(_a); } finally { if (e_1) throw e_1.error; } } var e_1, _c; }; JavaScript: on
  20. noImplicitAny const myFunc = value => value * 2 TypeScript

    ex.ts(1,16): error TS7006: Parameter 'value' implicitly has an 'any' type. With: Raises an error Without: no errors
  21. strictNullChecks const getUserAge = () : string | null =>

    "32" // getUserAge could return null - but // parseInt only takes a string parseInt(getUserAge()) TypeScript ex.ts(5,10): error TS2345: Argument of type 'string | null' is not assignable to parameter of type 'string'. Type 'null' is not assignable to type 'string'. With: Raises an error Without: no errors
  22. strictNullChecks const getUserAge = () : string | null =>

    "32" // getUserAge could return null - but // parseInt only takes a string parseInt(getUserAge()) TypeScript ex.ts(5,10): error TS2345: Argument of type 'string | null' is not assignable to parameter of type 'string'. Type 'null' is not assignable to type 'string'. With: Raises an error Without: no errors
  23. noImplicitThis let o = { n: 101, explicitThis: function (m:

    number) { return m + this.n.length; // error, 'length' does not exist on 'number' }, }; TypeScript ex.ts(4,25): error TS2339: Property 'length' does not exist on type 'number'. With: Raises an error Without: no errors
  24. noImplicitThis let o = { n: 101, explicitThis: function (m:

    number) { return m + this.n.length; // error, 'length' does not exist on 'number' }, }; TypeScript ex.ts(4,25): error TS2339: Property 'length' does not exist on type 'number'. With: Raises an error Without: no errors
  25. noUnusedLocals const myFunc = () => { const onething =

    1 return "Hello" } TypeScript ex.ts(2,9): error TS6133: 'onething' is declared but its value is never read. With: Raises an error Without: no errors
  26. noUnusedParameters const myFunc = value => "Hi" TypeScript ex.ts(1,16): error

    TS6133: 'value' is declared but its value is never read. With: Raises an error Without: no errors
  27. experimentalDecorators const track = (target: Object, propertyKey: string, descriptor: TypedPropertyDescriptor<any>)

    => { console.log("Analytics event") return descriptor } class MyApp { @track method() { return "hello world" } } TypeScript
  28. emitDecoratorMetadata var MyApp = /** @class */ (function () {

    function MyApp() { } MyApp.prototype.method = function () { return "hello world"; }; __decorate([ track ], MyApp.prototype, "method", null); return MyApp; }()); TypeScript - off
  29. emitDecoratorMetadata var MyApp = /** @class */ (function () {

    function MyApp() { } MyApp.prototype.method = function () { return "hello world"; }; __decorate([ track, __metadata("design:type", Function), __metadata("design:paramtypes", []), __metadata("design:returntype", void 0) ], MyApp.prototype, "method", null); return MyApp; }()); TypeScript - on