5分钟了解TypeScript

时间 2019-12-18

标签 5分了解 typescript 繁體版

原文原文链接

1.安装TypeScript

有两种方式安装TypeScript:javascript

Via npmhtml
经过安装VS插件，更多可参见这里。java

对于npm用户，能够直接使用下面的命令行安装：程序员

nmp install -g TypeScript

2.建立第一个TypeScript文件

打开editor，最好使用VSCode而且安装TypeScript插件支持。建立greeter.ts文件，并写入：web

function greeter(person) {
    return "Hello, " + person;
}
let user = "Jane User";
document.body.innerHTML = greeter(user);

3.编译你的代码

TypeScript文件后缀都是.ts。虽然咱们使用的是ts后缀，可是上面写的这些code就只是javascript内容，你能够直接copy一下，而后使用这些内容进行测试。打开终端，找到该文件所在目录，执行如下命令：typescript

tsc greeter.ts

便会生成一个greeter.js文件，里面内容以下：npm

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。那么这个时候一旦将代码更改成：app

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的提供也是很强大的，具体本身感觉。