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

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",

Definition File Theory: A Deep Dive

Definition File Theory: A Deep Dive Structuring modules to give the exact API shape you want can be tricky. For example, we might want a module that can be invoked with or without new to produce different types, has a variety of named types exposed in a hierarchy, and has some properties on the module object as well. By reading this guide, you’ll have the tools to write complex definition files that expose a friendly API surface. This guide focuses on module (or UMD) libraries because the optio

Default exports

Default exports Each module can optionally export a default export. Default exports are marked with the keyword default; and there can only be one default export per module. default exports are imported using a different import form. default exports are really handy. For instance, a library like JQuery might have a default export of jQuery or $, which we’d probably also import under the name $ or jQuery. JQuery.d.ts declare let $: JQuery; export default $; App.ts import $ from "JQuery"; $("bu

Deep Dive

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.

Debug

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.

Debug

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.

Create a webpack configuration file

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 page

Create a page Create a file in src named index.html: <!DOCTYPE html> <html> <head> <meta charset="UTF-8" /> <title>Hello World!</title> </head> <body> <p id="greeting">Loading ...</p> <script src="bundle.js"></script> </body> </html> Now change main.ts to update the page: import { sayHello } from "./greet"; function showHello(divName: string, name: string) { const elt = document.getEl

Create a new project

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.