1.安装TypeScript
有两种方式安装TypeScript:
-
Via npm
-
通过安装VS插件，更多可参见这里。
对于npm用户，可以直接使用下面的命令行安装：
nmp install -g TypeScript
2.创建第一个TypeScript文件
打开editor，最好使用VSCode并且安装TypeScript插件支持。创建greeter.ts文件，并写入：
function greeter(person) { return "Hello, " + person; } let user = "Jane User"; document.body.innerHTML = greeter(user);
3.编译你的代码
TypeScript文件后缀都是.ts。虽然我们使用的是ts后缀，但是上面写的这些code就只是javascript内容，你可以直接copy一下，然后使用这些内容进行测试。打开终端，找到该文件所在目录，执行以下命令：
tsc greeter.ts
便会声称一个greeter.js文件，里面内容如下：
function greeter(person) { return "Hello, " + person; } var user = "Jane User"; document.body.innerHTML = greeter(user);
其实刚才的ts文件内容和编译出来的js内容是一样的，在web application中，可以直接使用编译出来的js文件。
现在，可以使用TypeScript的一些新特性，添加 : string来注释person的类型：
function greeter(person: string) { return "Hello, " + person; } let user = "Jane User"; document.body.innerHTML = greeter(user);
4.Type annotations
在TypeScript中，Type annotations可以用来标识变量或者参数的类型，在上面的例子中，使用了string类型来标识person。那么这个时候一旦将代码更改为：
function greeter(person: string) { return "Hello, " + person; } let user = [1,2,3]; document.body.innerHTML = greeter(user);
编译器就会报错：
greeter.ts(7,35): error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.
同样地，如果在调用greeter函数的时候什么也不传入，则会报错误：
greeter.ts(7,27): error TS2554: Expected 1 arguments, but got 0.
也就是说，TypeScript会根据代码结构和提供的类型注释提供代码静态分析。
虽然报错，但greeter.js还是被生成了，你可以继续使用包含错的的TypeScript，但是结果可能不会满足你的预期。
5.Interface
还是在上面的demo代码基础上进行修改，我们可以使用interface来描述一个对象有firstName和lastName两个属性。在TypeScript中，如果其内部结构兼容，则两种类型兼容。这就说明了我们可以通过Interface来实现对象，而不需要implement去实现。
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);
6.class
TypeScript支持JavaScript的新功能，其中很重要的一个功能就是基于类的面向对象编程（OOP）。
这里创建一个Student的类，它有一个构造函数和一个属性。看一下下面的代码，你会发现类和Interface在一起结合的很完美，程序员可以自己决定正确的抽象。另外，还有一个public的关键字，和java中的public类似：
class Student { fullName: string; constructor(public firstName: string,public middleInitial: string,public lastName: string) { 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);
值得关注的是，我们将上面代码进行编译为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"); document.body.innerHTML = greeter(user);
其实就是个Student的函数。
说了这么多，怎么能直接看到运行效果呢？很简单，创建一个html文件，然后在里面引用编译的js文件即可：
<!DOCTYPE html>
<head>
<title>TypeScript Greeter</title>
</head>
<body>
<script src="greeter.js"></script>
</body>
</html>
使用浏览器打开此html文件即可运行 ~ ~
另外，VSCode的提供也是很强大的，具体自己感受。
请发表评论