1. 安装 TypeScript
有两种方式安装 TypeScript:
Via npm
通过安装 VS 插件, 更多可参见这里 http://www.typescriptlang.org/#download-links .
对于 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);
这里需要注意, interface 里面只能声明属性或者签名, 而无法添加方法.
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 的提供也是很强大的, 具体自己感受.
来源: https://www.cnblogs.com/zhanggui/p/9173660.html