ASP.NET 4

设置

安装 TypeScript

If your version of Visual Studio does not already have TypeScript, you can install it forVisual Studio 2015orVisual Studio 2013. This quickstart uses Visual Studio 2015.

创建一个新项目

  1. Choose File
  2. Choose New Project
  3. Choose Visual C#

  4. Choose ASP.NET Web Application

  5. Choose MVC

    I unchecked “Host in the cloud” since this will be a local demo.

Run the application and make sure that it works.

添加 TypeScript

The next step is to add a folder for TypeScript.

We’ll just call it src.

添加 TypeScript 代码

Right click onsrcand clickNew Item. Then chooseTypeScript Fileand name the fileapp.ts.

Add example code

Type the following code intoapp.ts.

function sayHello() {
    const compiler = (document.getElementById("compiler") as HTMLInputElement).value;
    const framework = (document.getElementById("framework") as HTMLInputElement).value;
    return `Hello from ${compiler} and ${framework}!`;
}

Set up the build

Right click on the project and clickNew Item. Then chooseTypeScript Configuration Fileand use the default nametsconfig.json.

Replace the defaulttsconfig.jsonwith the following:

{
  "compilerOptions": {
    "noImplicitAny": true,
    "noEmitOnError": true,
    "sourceMap": true,
    "target": "es5",
    "outDir": "./Scripts/App"
  },
  "files": [
    "./src/app.ts",
  ],
  "compileOnSave": true
}

This is similar to the default, with the following differences:

  1. It sets "noImplicitAny": true.
  2. It specifies that "outDir": "./Scripts/App".
  3. It explicitly lists "files" instead of relying on "excludes".
  4. It sets"compileOnSave": true.

"noImplicitAny"is good idea whenever you’re writing new code — you can make sure that you don’t write any untyped code by mistake."compileOnSave"makes it easy to update your code in a running web app. Seethe tsconfig.json documentationfor more information.

Call the script from a view

  1. | In theSolution Explorer, openViews | Home | Index.cshtml. | | :--- | :--- | :--- |

  1. Change the code to be the following:
@{
    ViewBag.Title = "Home Page";
}
<script src="~/Scripts/App/app.js"></script>
<div id="message"></div>
<div>
    Compiler: <input id="compiler" value="TypeScript" onkeyup="document.getElementById('message').innerText = sayHello()" /><br />
    Framework: <input id="framework" value="ASP.NET" onkeyup="document.getElementById('message').innerText = sayHello()" />
</div>

Test

  1. Run the project.
  2. You should see a message when you type in the input boxes:

Debug

  1. In Edge, press F12 and click the Debugger tab.
  2. Look in the first localhost folder, then src/app.ts
  3. Put a breakpoint on the line with return .
  4. 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.

Add Angular 2

Download packages from NPM

  1. InstallPackageInstaller.

  2. Use PackageInstaller to install Angular 2, systemjs and Typings.

    Right-click on the project, then click onQuick Install Package.

  3. Use PackageInstaller to install typings for es6-shim.

    Angular 2 includes es6-shim for Promise support, but TypeScript still needs the types. In PackageInstaller, choose Typing instead of npm. Then type “es6-shim”:

Update tsconfig.json

Now that Angular 2 and its dependencies are installed, we need to enable TypeScript’s experimental support for decorators and include the es6-shim typings. In the future decorators and ES6 will be the default and these settings will not be needed. Add"experimentalDecorators": true, "emitDecoratorMetadata": trueto the"compilerOptions"section, and add"./typings/index.d.ts"to the"files"section. Finally, we need to add a new entry in"files"for another file,"./src/model.ts", that we will create. Ourtsconfig.jsonshould now look like this:

{
  "compilerOptions": {
    "noImplicitAny": false,
    "noEmitOnError": true,
    "sourceMap": true,
    "target": "es5",
    "experimentalDecorators": true,
    "emitDecoratorMetadata": true,
    "outDir": "./Scripts/App"
  },
  "files": [
    "./src/app.ts",
    "./src/model.ts",
    "./src/main.ts",
    "./typings/index.d.ts"
  ]
}

Add a CopyFiles target to the build

Finally, we need to make sure that the Angular files are copied as part of the build. To do this, edit the project by right-clicking ‘Unload’ and then ‘Edit csproj’. After the TypeScript configuration PropertyGroup, add a new ItemGroup and Target to copy the angular files.

<ItemGroup>
  <NodeLib Include="$(MSBuildProjectDirectory)\node_modules\angular2\bundles\angular2.js"/>
  <NodeLib Include="$(MSBuildProjectDirectory)\node_modules\angular2\bundles\angular2-polyfills.js"/>
  <NodeLib Include="$(MSBuildProjectDirectory)\node_modules\systemjs\dist\system.src.js"/>
  <NodeLib Include="$(MSBuildProjectDirectory)\node_modules\rxjs\bundles\Rx.js"/>
</ItemGroup>
<Target Name="CopyFiles" BeforeTargets="Build">
  <Copy SourceFiles="@(NodeLib)" DestinationFolder="$(MSBuildProjectDirectory)\Scripts"/>
</Target>

Now right-click on the project and reload it. You should now seenode_modulesin the Solution Explorer.

Write a simple Angular app in TypeScript

First, change the code inapp.tsto:

import {Component} from "angular2/core"
import {MyModel} from "./model"

@Component({
    selector: `my-app`,
    template: `<div>Hello from </div>`
})
class MyApp {
    model = new MyModel();
    getCompiler() {
        return this.model.compiler;
    }
}

Then add another TypeScript file insrcnamedmodel.ts:

export class MyModel {
    compiler = "TypeScript";
}

And then another TypeScript file insrcnamedmain.ts:

import {bootstrap} from "angular2/platform/browser";
import {MyApp} from "./app";
bootstrap(MyApp);

Finally, change the code inViews/Home/Index.cshtmlto the following:

@{
    ViewBag.Title = "Home Page";
}
<script src="~/Scripts/angular2-polyfills.js"></script>
<script src="~/Scripts/system.src.js"></script>
<script src="~/Scripts/rx.js"></script>
<script src="~/Scripts/angular2.js"></script>
<script>
    System.config({
        packages: {
            '/Scripts/App': {
                format: 'cjs',
                defaultExtension: 'js'
            }
        }
    });
    System.import('/Scripts/App/main').then(null, console.error.bind(console));
</script>
<my-app>Loading...</my-app>

This loads the app. When you run the ASP.NET application you should see a div that says “Loading…” and then updates to say “Hello from TypeScript”.

results matching ""

    No results matching ""