安装TypeScript
有两种主要的方式来获取TypeScript工具：
- 通过npm（Node.js包管理器）
- 安装Visual Studio的TypeScript插件
Visual Studio 2017和Visual Studio 2015 Update 3默认包含了TypeScript。
如果Visual Studio还没有安装TypeScript，你可以下载它。
针对使用npm的用户：
npm install -g typescript
构建你的第一个 TypeScript文件
在编辑器，将下面的代码输入到greeter.ts文件里：
function greeter(person) {
return "Hello, " + person;
}
let user = "Jane User";
document.body.innerHTML = greeter(user);
编译代码
我们使用了.ts扩展名，但是这段代码仅仅是JavaScript而已。
可直接从现有的JavaScript应用里复制/粘贴这段代码。
在命令行上，运行TypeScript编译器：
tsc greeter.ts
输出结果为一个greeter.js文件，它包含了和输入文件中相同的JavsScript代码。 一切准备就绪，可以运行这个使用TypeScript写的JavaScript应用了。
案例：greeter.Ts
class Student {
fullName: string;
constructor(public firstName, public middleInitial, public lastName) {
this.fullName = firstName + " " + middleInitial + " " + lastName;
}
}
interface Person {
firstName: string;
lastName: string;
// 这里只定义了firstName 和 lastName，所以从接口中只能获取这2个属性，其他属性获取不到
}
function greeter(person : Person) {
return "Hello, " + person.firstName + " " + person.lastName;
}
let user = new Student("Jane", "M.", "User");
// document.body.innerHTML = greeter(user);
console.log('user: ', user);
// Student {
// firstName: 'Jane',
// middleInitial: 'M.',
// lastName: 'User',
// fullName: 'Jane M. User'
// }
console.log('greeter(user): ', greeter(user));
// Hello, Jane User
运行 tsc greeter.ts文件，生成greeter.js文件
greeter.js
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;
}());
function greeter(person) {
return "Hello, " + person.firstName + "" + person.lastName;
}
var user = new Student("Jane", "M.", "User");
console.log('user: ', user);
// Student {
// firstName: 'Jane',
// middleInitial: 'M.',
// lastName: 'User',
// fullName: 'Jane M. User'
// }
console.log('greeter(user): ', greeter(user)); // Hello, Jane User
// tsc greeter.ts
运行node greeter.js
案例2：定义ts，然后在vue中使用
Vue文件中：
对比和js的写法：
TypeScript 实际上是 JavaScript 的超集，编译后的 TypeScript 就是去掉类型检查和其他限定的 JavaScript，而在使用 TypeScript 编辑代码时，编译器和 IDE 的编辑器会检查这些限定。
TypeScript 如何运作
- 写下 TypeScript 代码
- TypeScript 将 TypeScript 代码编译为 JavaScript 代码
- 将 JavaScript 代码送入各种运行时环境进行解释运行
为什么要使用ts
js存在的问题
JavaScript的动态类型特性减少了代码量，提高了开发效率和基于Web浏览器的应用场景中客户端与服务端数据传输的效率。然而，现在的JavaScript已经不再只是运用在Web浏览器场景中。动态类型特点带来了一系列问题：
'undefined' is not a function.TypeError: Cannot read property 'foobar' of undefined- 实际返回值和预期返回值不同
- 大量的assert类型断言
- 将一个字符串类型与整型相加，但是JavaScript返回了一个字符串类型
- ...
JavaScript 的解释型和动态类型特性会导致意料之外的结果，甚至导致严重逻辑错误和程序崩溃。不健全的 JavaScript 代码反而会降低程序员的开发效率，这违反了 JavaScript 的设计初衷。
新的 EcmaScript 标准提供了一些更有效的类型判断方式，但这还远远不够，JavaScript难以胜任大型项目的开发。JavaScript 急需一些编译型、静态类型语言的特性来弥补在这些运行环境中的不足，提高代码可读性，并减少运行时错误。
TypeScript 起源
2012年，Microsoft 首次发布公开版本的 TypeScript 。由于TypeScript 是JavaScript 的超集，任何原生的JavaScript 代码都可以直接通过编译器检查并运行。 TypeScript 的静态类型和编译大大降低了发生运行时错误的可能性，同时作为超集，TypeScript 依旧保留了JavaScript 的灵活性，一举两得。
TypeScript 同样支持 ES6 标准
通过使用 TypeScript 编译器，可以将TS代码和一些原生 JS 库内容混用，像使用原生 JS 代码引用这些库内容一样的在TS中使用他们。
