typescript 学习教程（1）

最新推荐文章于 2025-09-10 14:53:18 发布

weixin_33834628

最新推荐文章于 2025-09-10 14:53:18 发布

阅读量62

点赞数

CC 4.0 BY-SA版权

文章标签： javascript python ViewUI

原文链接：https://my.oschina.net/shuinian/blog/751005

本文详细介绍了如何使用npm及WebStorm搭建TypeScript开发环境，并通过实例演示了TypeScript的基本用法。

2019独角兽企业重金招聘Python工程师标准>>>

古人云，工欲善其事，必先利其器。所以在学习，typescript 先要学习搭建环境，据官方介绍，主要有两种工具，一种是使用npm ，另外一种是通过visual studio 插件。其实还有别的工具，比如说使用webstrom 。我先学一下使用npm进行typescript的编译。首先是要安装typescript，前提是得安装nodejs。这个可以百度。然后打开nodejs终端。输入如下代码进行安装typescript。

npm install -g typescript

接着我们建立一个ts文件,我们命名为demo.ts。

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

var user = "Jane User";

然后呢打开终端，在终端中输入如下代码。

tsc demo.ts

这个时候我们能够到会生成另外的一个文件，就是demo.js，我们打开demo.js,里面的内容如下所示。

function greeter(person) {
    return "Hello, " + person;
}
var user = "Jane User";

接着，我们继续按照官网上面的例子，敲进去之后输使用同样的方法进行编译。

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

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

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

document.body.innerHTML = greeter(user);

我们继续看demo.js，看起编译的结果。如下所示

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

这个算是基本的使用方法。

接着我们使用webstrom，对于webstrom来说，这个是相对简单的。我们使用webstrom打开我们的项目文件夹，新建一个ts文件，比如说demo.ts然后，接着webstrom 会自动帮我们进行编译，编译的结果和上面的内容是一样的。好了，目前，我们的环境已经搭建好了。接下来，我们来开始进行typescript的学习。

转载于:https://my.oschina.net/shuinian/blog/751005