1. TS安装与调试

安装与调试

因为种种原因，首先需要用命令行设置一下淘宝源。

npm config set registry https://registry.npm.taobao.org/

安装

首先安装ts，这里指定了版本是为了避免不同版本的差异，影响学习进度。

<!-- 安装ts -->
npm install typescript@2.9.2 -g
<!-- 安装ts node，可使node支持ts -->
npm install ts-node@7.0.0 -g

调试

使用的是微软的vs code编辑器。 创建一个目录tsdemo，结构如下

 {
     "configurations": [
         {
         "name": "ts-node",
         "type": "node",
         "request": "launch",
         "program": "这里填写ts-node的bin.js文件目录",
         "args": ["${relativeFile}"],
         "cwd": "${workspaceRoot}",
         "protocol": "inspector"
         }
     ]
 }

在1.ts中输入我们的hello world代码。

console.log("Hello world!");

编译时&运行时

我们按照官方5分钟教程来走一下

function greeter(person) {
    return "Hello, " + person;
}

let user = "Jane User";

// document.body.innerHTML = greeter(user); 
// 改为
console.log(greeter(user));

在当前目录下运行

tsc greeter.ts

将ts转换为js文件。ts是强类型的，在编译过程中如果出现错误，编译则不会通过。
然后为形参person加类型显示 :string

function greeter(person: string) {
    return "Hello, " + person;
}

编译后发现js代码没有改变,仍然是

function greeter(person) {
    return "Hello, " + person;
}

而如果将person参数改变类型，则编译不会通过。

在tsc编译的过程中会进行类型检查，而js在运行时才会发现出错。避免用户使用的时候出错。

继续5分钟教程

接口

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

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

let user = { firstName: "Jane", lastName: "User" };

console.log(greeter(user));

这里首先声明了一个interface，叫Person。
接着在greeter函数中接受的person参数就是这种Person结构。
其后声明了一个user对象，结构与Person相同。
最后调用了greeter函数，打印出Hello, Jane User。

类

class Student {
    fullName: string;
    // 在构造函数的参数上使用public等同于创建了同名的成员变量。
    constructor(public firstName, public middleInitial, public lastName) {
        this.fullName = firstName + " " + middleInitial + " " + lastName;
    }
}

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

function greeter(person : Person) {
    // 这里是没有middleInitial的，只有Person上的firstName和lastName。
    return "Hello, " + person.firstName + " " + person.lastName;
}

let user = new Student("Jane", "M.", "User");

console.log(greeter(user));