活动编写翻译TypeScript的不二法门,3搭建TypeScri

时间:2019-10-06 14:17来源:编程技术
1、首先进入nodejs里安装typescript npm install -g typescript Typescript 是 JavaScript 的一个超集,在 ECMAScript6基础上演化并吸收了生成 Javascript类别和接口的一些特性。它编译后生成普通的 JavaScri

1、首先进入nodejs里安装typescript

npm install -g typescript

Typescript 是 JavaScript 的一个超集,在 ECMAScript6 基础上演化并吸收了生成 Javascript 类别和接口的一些特性。它编译后生成普通的 JavaScript 代码。TypeScript 支持任意浏览器,任意环境,任意系统,并且是开源的。

2、创建相应的项目目录,打开nodejs 进入当前项目目录

例:我的项目地址E:examplets,nodejs里 e:回车,复制地址(E:examplets),点击nodejs右键,粘贴,回车,即进入项目目录E:examplets。

这篇文章我们使用 Sublime 来作为TS的开发工具。

3、创建tsconfig.json文件

 tsc --init

首先安装TypeScript,这里假设你的电脑上已经安装了nodejs和npm,打开命令行窗口,运行命令:

4、打开tsconfig.json文件修改和删除相应配置(如果想快速修改配置,请复制下列配置)

{ "compilerOptions": { "target": "es5", "noImplicitAny": false, "module": "amd", "removeComments": false, "sourceMap": false, "outDir": "src/js"//你要生成js的目录 }}
npm install -g typescript

5、创建src目录,打开vscode新建文件,保存到src下扩展名为.html的文件,然后在编辑器里代码区输入此快捷方法,快速创建html布局代码

!+tab自行添加js引入代码

<!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Document</title> <script type="text/javascript" src="js/test.js"></script><!--自行添加js引入--></head><body> </body></html>

稍作等待,安装完毕之后做个小测试。新建一个文件夹,在文件夹中新建一个文件命名为test.ts,代码如下:

6、回到E:examplets 目录,创建ts文件夹,然后新建ts为扩展名的ts文件,测试代码如下:

class Student { firstName : string; lastName : string; constructor(fiestName : string, lastName : string) { this.firstName = fiestName; this.lastName = lastName; } greeter() { return `Hello,您好${this.firstName}${this.lastName}`; }}var user = new Student;var ele = document.body || document.documentElement;ele.innerHTML = user.greeter(); 
function greet(msg: string){
    console.log("Say " + msg);
}

greet("hello!");

7、点击菜单 任务-运行任务,点击 tsc:构建-tsconfig.json

打开命令行窗口,进入 test.ts 文件所在目录,运行命令

8、此时src目录下会自动生成js/test.js文件了;打开test.js文件,点击编辑器的拆分编辑器菜单,即把js和ts文件拆开,自行编辑ts文件的时候,右侧会自动生成js代码。

(如果此时不会自动生成js代码,点击菜单 任务-运行任务 点击 tsc:监视-tsconfig.json 然后就同步了)

tsc test.ts

对 .ts 文件进行编译,编译成功后可以看到在同级目录下生成了一个 test.js 文件。

没错,TypeScript已经安装成功了,就是这么简单!

然后为Sublime添加TypeScript支持。TypeScript 包可以通过 Package Control 得到。打开Sublime,preference -> Package Control,找到 Install Package,输入 TypeScript,找到 TypeScript 点击进行安装,稍等一会,待安装完毕,进行一下测试。新建一个文件命名为 hello.ts,输入跟刚才相同的代码,你会发现,自动补全有了,代码高亮有了,自动检测语法错误也有了,很爽啊有木有。

接下来我们创建一个 TypeScript 项目。从1.5版本开始,TypeScript 支持一个名为 tsconfig.json 的轻量级项目文件,我们可以在前面的文件夹中添加一个 tsconfig.json 文件,代码如下:

{
    "compilerOptions":{
        "sourceMap": true
    },
    "files": ["hello.ts"]
}

tsconfig.json 文件有两个部分:传递给编译器的选项和文件列表。例子中将sourceMap设为TRUE,TypeScript的编译器会创建一个 .map 文件,通过它我们能直接调试 TypeScript 而不用将其编译成 JavaScript 代码。files 选项列出需要编译的 .ts 文件。若不指定此选项,tsconfig.json 会编译该目录下的所有 .ts 文件。

现在万事俱备,打开命令行窗口,cd 到我们的项目路径下,直接运行 tsc 命令,可以看到生成了 hello.js 和 hello.js.map 两个文件。

下面我们看看怎样用 .map 文件来对 TypeScript 代码进行调试。新建一个 HTML 文件命名为 test.html,代码如下:

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Examples</title>
</head>

<body>
    <script type="text/javascript" src="hello.js"></script>
</body>
</html>

在浏览器中打开此文件, F12,看到控制台已经打印出了 Say hello!

点击浏览器开发者工具的 Sources 选项卡,打开 hello.js 文件,如下图所示:

图片 1

在第四行打上一个断点,你会看见啪一下,断点跳到了 hello.ts 文件的对应行上:

图片 2

刷新页面,进入断点,就可以直接对 TypeScript 代码进行调试了。

编辑:编程技术 本文来源:活动编写翻译TypeScript的不二法门,3搭建TypeScri

关键词:

  • 上一篇:没有了
  • 下一篇:没有了