TypeScript是一种由微软开发的开源编程语言，它是JavaScript的一个超集，添加了静态类型检查和基于类的面向对象编程。TypeScript代码在编译时会被转换成纯JavaScript代码，这个过程移除了类型注解，使得最终的JavaScript代码可以在任何支持JavaScript的平台上运行。
在TypeScript中，可以为变量和函数参数定义类型。这使得编译器能够在编译时捕捉到类型错误，并提供了IDE的智能提示功能。例如：
function test(a: number, b: number): number {
return a * b;
}
alert(test(10, 20));
在上述代码中，函数test的参数a和b被明确定义为数字类型，返回值也是数字类型。
当编写TypeScript代码时，它会被编译成JavaScript代码和一个映射文件。映射文件用于将JavaScript代码映射回TypeScript代码，以便调试。编译命令如下：
tsc test.ts -> test.js
在编译过程中，类型注解会被移除，因此最终的JavaScript代码中不包含这些类型信息。
DefinitelyTyped是一个存储库，它为许多现有的JavaScript库提供了类型定义，以接口的形式存在。这些类型定义用于开发目的，并不部署到生产环境。它们用于检查类型。
TypeScript使用模块来避免命名冲突，并提供立即执行函数表达式(IIFE)的功能。要使模块的内部部分在模块外部可访问，需要使用export关键字。例如：
module App.Model {
export class Project {
public Title: string;
public Id: number;
public Client: string;
}
}
在上述代码中，Project类被定义在App.Model模块中，并使用export关键字导出，以便可以在模块外部访问。
要创建一个Sharepoint托管应用和必要的TypeScript定义文件，可以使用Nuget包管理器。需要验证项目属性中是否包含TypeScript选项。如果缺少，可以按照以下步骤操作：
<PropertyGroup>
<TypeScriptSourceMap>true</TypeScriptSourceMap>
</PropertyGroup>
<Import Project="$(MSBuildExtensionsPath32)\Microsoft\VisualStudio\v$(VisualStudioVersion)\TypeScript\Microsoft.TypeScript.targets" />
保存并重新加载项目后，可以通过包管理器控制台包含DefinitelyTyped。
在AngularJS中，可以使用TypeScript来定义控制器和服务。例如：
module App.Controller {
export class ProjectCtrl {
public projects: Array<App.Model.Project>
public project: App.Model.Project;
static $inject = ['ProjectService'];
constructor(private projectService: App.Service.ProjectService) {
this.project = new App.Model.Project();
}
public getProjects(): void {
this.projectService.getProjects().then(data => {
this.projects = data.data.d.results;
console.log(this.projects);
}).catch(e => {
alert('Error' + e);
});
}
public addProject(): void {
this.projectService.addProject(this.project).then(data => {
this.getProjects();
this.project = new App.Model.Project();
}).catch(e => {
alert('Error' + e);
});
}
}
}
在上述代码中，ProjectCtrl控制器使用了ProjectService服务，并定义了注入的依赖项。
构建项目并将TS文件合并。构建完成后，将test.js和test.map文件包含在项目中。打开element.xml，移除.ts文件路径，并包含test.js和test.map文件。
<?xml version="1.0" encoding="utf-8"?>
<Elements xmlns="http://schemas.microsoft.com/sharepoint/">
<Module Name="App">
<File Path="App\test.js" Url="App/test.js" ReplaceContent="TRUE" />
<File Path="App\test.js.map" Url="App/test.js.map" ReplaceContent="TRUE" />
</Module>
</Elements>
<html>
<head>
<link rel="Stylesheet" type="text/css" href="../Content/App.css" />
<script src="../Scripts/jquery-1.9.1.js"></script>
<script src="../Scripts/angular.js"></script>
<script src="../Scripts/angular-ui-router.js"></script>
<script src="../App/test.js"></script>
</head>
<body>
<form runat="server"></form>
<h1>Project</h1>
<div ng-app="projectApp">
<div ng-controller="ProjectCtrl as vm">
<div style="float: left; border: 1px solid gray;">
<table ng-init="vm.getProjects()">
<tr>
<td>SNO</td>
<td>Project</td>
<td>Client</td>
</tr>
<tr ng-repeat="project in vm.projects">
<td>{{$index+1}}</td>
<td>{{project.Title}}</td>
<td>{{project.Client}}</td>
</tr>
</table>
</div>
<div>
<table>
<tr>
<td>Project</td>
<td>
<input type="text" ng-model="vm.project.Title" />
</td>
</tr>
<tr>
<td>Client</td>
<td>
<input type="text" ng-model="vm.project.Client" />
</td>
</tr>
<tr>
<td colspan="2">
<button ng-click="vm.addProject()">Add Project</button>
</td>
</tr>
</table>
</div>
</div>
</div>
</body>
</html>