*文档基于TypeScript中文文档进行学习
npm 安装TypeScript:
npm install -g typescript
构建第一个TS文件
// greeter.ts
function greeter(person) { return "Hello, " + person; } let user = "Jane User"; document.body.innerHTML = greeter(user);
编译代码
在命令行上，运行TypeScript编译器：
tsc greeter.ts
输出结果为一个 greeter.js 文件，包含了和输入文件中相同的JS代码。
类型注释
TS里的类型注释是一种轻量级的为函数或变量添加约束的方式。
例：将 greeter 的调用改为传入一个数组：
// greeter.ts
function greeter(person: string) {
return ‘Hello, ‘ + person
}
let user = [0, 1, 2]
document.body.innerHTML = greeter(user)
执行编译，你会看到产生一个错误。
greeter.ts(7,26): error TS2345: Argument of type ‘number[]‘ is not assignable to parameter of type ‘string‘.
类似地，尝试删除greeter调用的所有参数。 TypeScript会告诉你使用了非期望个数的参数调用了这个函数。 在这两种情况中，TypeScript提供了静态的代码分析，它可以分析代码结构和提供的类型注解。
要注意的是尽管有错误，greeter.js
接口
// greeter.ts
interface Person { firstName: string; lastName: string; } function greeter(person: Person) { return "Hello, " + person.firstName + " " + person.lastName; } let user = { firstName: "Jane", lastName: "User" }; document.body.innerHTML = greeter(user);
类
最后，让我们使用类来改写这个例子。 TypeScript支持JavaScript的新特性，比如支持基于类的面向对象编程。
让我们创建一个Student类，它带有一个构造函数和一些公共字段。 注意类和接口可以一起共作，程序员可以自行决定抽象的级别。
还要注意的是，在构造函数的参数上使用public
// greeter.ts
class Student { fullName: string; constructor(public firstName, public middleInitial, public lastName) { this.fullName = firstName + " " + middleInitial + " " + lastName; } } interface Person { firstName: string; lastName: string; } function greeter(person : Person) { return "Hello, " + person.firstName + " " + person.lastName; } let user = new Student("Jane", "M.", "User"); document.body.innerHTML = greeter(user);
//greeter.js
/*创建类 方法1*/
var Student = /** @class */ (function () {
function Student(firstName, middleInitial, lastName) {
this.firstName = firstName;
this.middleInitial = middleInitial;
this.lastName = lastName;
this.fullName = firstName + " " + middleInitial + " " + lastName;
}
return Student;
}());
/*创建类 方法2*/
class Student{
constructor(firstName, middleInitial, lastName){
this.firstName = firstName;
this.middleInitial = middleInitial;
this.lastName = lastName;
this.fullName = firstName + " " + middleInitial + " " + lastName;
}
}
/*方法1效果等同于方法2*/
function greeter(person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
var user = new Student("Jane", "M.", "User");
document.body.innerHTML = greeter(user);
原文：https://www.cnblogs.com/hhj-blog/p/13667247.html