Dependencies on UMD libraries

Dependencies All dependencies are managed by npm. Make sure all the declaration packages you depend on are marked appropriately in the "dependencies" section in your package.json. For example, imagine we authored a package that used Browserify and TypeScript. { "name": "browserify-typescript-extension", "author": "Vandelay Industries", "version": "1.0.0", "main": "./lib/main.js", "types": "./lib/main.d.ts", "dependencies": [ "browserify@latest", "@types/browserify@latest",

Dependencies on Modules If your library depends on a module, use an import statement: import * as moment from "moment"; function getThing(): moment;

Dependencies on Global Libraries If your library depends on a global library, use a /// <reference types="..." /> directive: /// <reference types="someLib" /> function getThing(): someLib.thing;

Debug In Edge, press F12 and click the Debugger tab. Look in the first localhost folder, then src/app.ts Put a breakpoint on the line with return. Type in the boxes and confirm that the breakpoint hits in TypeScript code and that inspection works correctly. That’s all you need to know to include basic TypeScript in your ASP.NET project. Next we’ll include Angular and write a simple Angular app.

Deep Dive For seasoned authors interested in the underlying mechanics of how declaration files work, the Deep Dive section explains many advanced concepts in declaration writing, and shows how to leverage these concepts to create cleaner and more intuitive declaration files.

Create a new project Choose File Choose New Project Choose Visual C# Choose ASP.NET Web Application Choose MVC I unchecked “Host in the cloud” since this will be a local demo. Run the application and make sure that it works.

Create a gulpfile.js In the project root, create the file gulpfile.js: var gulp = require("gulp"); var ts = require("gulp-typescript"); var tsProject = ts.createProject("tsconfig.json"); gulp.task("default", function () { return tsProject.src() .pipe(ts(tsProject)) .js.pipe(gulp.dest("dist")); });

Create a webpack configuration file Create a webpack.config.js file at the root of the project directory. module.exports = { entry: "./src/index.tsx", output: { filename: "./dist/bundle.js", }, // Enable sourcemaps for debugging webpack's output. devtool: "source-map", resolve: { // Add '.ts' and '.tsx' as resolvable extensions. extensions: ["", ".webpack.js", ".web.js", ".ts", ".tsx", ".js"] }, module: { loaders: [ // All files with a '.ts' or '.tsx' ex

Create a new project Choose File Choose New Project (Ctrl + Shift + N) Choose Visual C# Choose ASP.NET Web Application Choose ASP.NET 5 Empty Let’s uncheck “Host in the cloud” since we’re going to run this locally. Run the application and make sure that it works.