TypeScript学习-5分钟上手TS教程

最近开始接触TypeScript，准备从官网5分钟上手TypeScript教程到手册指南写一系列学习笔记，本文是官网5分钟上手TypeScript教程学习笔记。

1.安装TypeScript

使用npm安装(node.js包管理器)

npm install -g typescript
复制代码

2.初识TypeScript

构建一个TypeScript文件

首先建立helloTs.ts代码以下：

function hello(person) {
    return 'Hello'+person;
}
let user = 'xiaoming'
document.body.innerHTML = hello(user)
复制代码

编译代码

因为使用了.ts 扩展名，在html中没法直接引用ts文件，因此咱们须要编译成JavaScript代码。

在命令行上运行TypeScript编译器：

tsc helloTs.ts
复制代码

输出结果为一个helloTs.js文件，它包含了和输入文件中相同编译后的JavaScript代码，如今咱们来看看它。

function hello(person) {
    return 'Hello' + person;
}
var user = 'xiaoming';
document.body.innerHTML = hello(user);
复制代码

因为默认编译成es5，因此只有声明方式let转成了var一点区别，其余代码同样。

类型注解

尝试了在ts文件里写js代码编译，接下来咱们尝试一下TypeScript工具带来的高级功能--类型注解。

在上述代码中，咱们给函数hello的参数person添加:string类型注解，以下：

function hello(person: string) {
    return 'Hello'+person;
}
let user = 'xiaoming'
document.body.innerHTML = hello(user)
复制代码

当咱们传入的实参user为字符串格式时，咱们进行编译，获得的js代码和未添加类型注解时同样。

TypeScript里的类型注解是一种轻量级的为函数或变量添加约束的方式。在上面的例子里，咱们但愿hello函数接收一个字符串格式的参数，如今咱们尝试把参数改为传入一个数字：

function hello(person: string) {
    return 'Hello'+person;
}
let user = 123
document.body.innerHTML = hello(user)
复制代码

从新编译，会看到产生了一个错误：

helloTs.ts:5:33 - error TS2345: Argument of type 'number' is not assignable to parameter of type 'string'.
5 document.body.innerHTML = hello(user)
Found 1 error.
复制代码

这时咱们发现，TypeScript告诉咱们参数类型错误，尽管告诉咱们有错误，但TypeScript编译器依旧会建立对应的js文件，但在这种状况下，TypeScript会警告你代码可能不会按预期执行。

接口(interface)

interface是TypeScript的核心原则之一，是对值所具备的结构进行类型检查，为这些类型命名和为你的代码或第三方代码定义契约。听起来很晕，直接上代码看看：

interface Person {
    firstName: string;
    lastName: string;
}

function hello(person: Person) {
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = { firstName: "xiaoming", lastName: "xiaohong" };

document.body.innerHTML = hello(user);
复制代码

在上述代码里，咱们能够理解为咱们能够用interface来定义一个对象、函数或类的结构和类型，后续使用时，必须严格遵照定义的规则，不然将报错。

类(class)

传统的JavaScript程序使用函数和基于原型的继承来建立可重用的组件，但对于熟悉使用面向对象方式的程序员来说就有些棘手，由于他们用的是基于类的继承而且对象是由类构建出来的。 从ES6开始，咱们可以使用基于类的面向对象的方式。 使用TypeScript，容许开发者如今就使用这些特性，而且编译后的JavaScript能够在全部主流浏览器和平台上运行。

看个例子：

class Greeter {
    greeting: string;
    constructor(message: string) {
        this.greeting = message;
    }
    greet() {
        return "Hello, " + this.greeting;
    }
}

let greeter = new Greeter("world");
复制代码

咱们声明一个 Greeter类。这个类有3个成员：一个叫作 greeting的属性，一个构造函数和一个 greet方法，能够看出，咱们在引用任何一个类成员的时候都用了 this，它表示咱们访问的是类的成员。

官网5分钟上手TypeScript教程内容很少，看完能对TS大概有个概念，进一步学习参考--手册。

下一步就是跟着官网手册学习啦，加油💪