[TypeScript] Using Lodash in TypeScript with Typings and SystemJS

Posted 2020-07-23 Answer1215

One of the most confusing parts of getting started with TypeScript is figuring out how to use all the libraries that you know and love from javascript. This lesson walks you through including Lodash in your project, installing Lodash definition files, and then properly loading Lodash with SystemJS.

 

install:

npm install -g typings

 

Excludes extra files and folder:

{
    "compilerOptions": {
        "rootDir": "src",
        "module": "commonjs",
        "target": "es5",
        "noImplicitAny": false,
        "sourceMap": false,
        "outDir": "./dist",
        "noEmitOnError": true
    },
    "exclude": [
        "node_modules",
        "typings/main",
        "typings/main.d.ts"
    ]
}

 

Install lodash:

typing install lodash --save

 

Import lodash:

import * as _ from ‘lodash‘;

 

This time, Compiler will report error says that cannot find lodash. This is because we need to tell System.js where to find lodash.

<script>
    System.config({
        packages: {
            "dist": {
                "defaultExtension": "js",
                "main": "main"
            }
        },
        map: {
            "lodash": "https://npmcdn.com/[email protected]"
        }
    });

    System.import("dist")
</script>

 

Use it:

import {SocialNetwork} from ‘./interfaces‘;
import * as _ from ‘lodash‘;

class App implements SocialNetwork{
    title = "Facebook";

    getPeople(){
        return [{name: ‘John‘}]
    }
}

console.log(_.isArray(new App().getPeople()));