TypeScript学习笔记1:安装与使用

165 阅读2分钟

安装TypeScript

TypeScript的安装方式有两种:

  • 通过npm(Node.js包管理器)
  • 安装Visual Studio的TypeScript插件

对应Visual Studio安装我们在此不错介绍,如果想要了解,请自行百度。

我们今日主要介绍通过npm方式的安装方法,只需要运行一下语句即可完成安装:

> npm install -g typescript

这样就按装好了TypeScript,下面我们通过命令来测试一下是否成功:

> tsc --version

// 如果返回Version 3.1.6,表示安装成功

如果我们执行的命令返回版本信息,那么代表TypeScript安装成功。

构建你的第一个TypeScript文件

首先,在你想要创建文件的目录中新建文件greeter.ts,并用编辑器录入一下代码

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

let user = "Jane User";

document.body.innerHTML = greeter(user);

上述文件我们虽然使用了.ts类型的扩展名,但是里面的代码只是普通的js代码。下面我们在命令行中编译这个文件,看会有什么输出。在命令行中执行以下命令:

tsc greeter.ts

运行成功后,会发现在文件夹中多出一个greeter.js文件,查看里面内容会看到和greeter.ts中内容相同,说明编译成功。

下面我们给上面的.ts文件同的代码添加一些TypeScript特有的属性,代码如下:

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

let user = "Jane User";

document.body.innerHTML = greeter(user);

我们在greeter函数参数person后面添加了冒号string,这个是用来对参数进行类型检测的,也就是TypeScript中的“类型注解”,此时我们运行编译命令,生成的js文件会发现内容和原来是相同的,但是如果我们把user变为数组类型,会有什么效果呢,代码如下:

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

let user = [0, 1, 2];

document.body.innerHTML = greeter(user);

重新编译,会得到一个错误报告:

greeter.ts:7:35 - error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.

7 document.body.innerHTML = greeter(user);

要注意的是尽管有错误,greeter.js文件还是被创建了。就算你的代码里有错误,你仍然可以使用TypeScript。但在这种情况下,TypeScript会警告你代码可能不会按预期执行。

结束

本篇只是简单介绍了一下TypeScript的安装以及使用,后续会继续深入讲解关于TypeScript更多的内容。