配置TypeScript工作环境

更新日期: 2019-09-28阅读: 2.2k标签: 环境

 一、TypeScript入门学习引言

进入主题之前,首先说明这个系列的博客是我刚刚接触TypeScript的学习笔记,可能不会太深入的解读一些原理方面的东西。但尽可能的把基础的入门使用解析清楚,毕竟使用TypeScript来实现的项目一般是比较复杂的项目,不仅仅只是简单的语法使用,而是它带来的特性所解决的问题才更值得我们关注,所以在这个系列之后还会有更深入的工程应用方面的博客,也希望大家能给我提供一些意见和思路。

引用阮大佬博客中这样一段描述:JavaScript 是一种弱类型(或称动态类型)语言,即变量的类型是不确定的。TypeScript 是微软2012年推出的一种编程语言,属于 JavaScript 的超集,可以编译为 JavaScript 执行。 它的最大特点就是支持强类型和 ES6 Class。

支持强类型,这可能会颠覆你对JavaScript这门语言的认知,但这也是JavaScript在面对日益复杂的项目的机遇,至于为什么这么说请等到后期的工程应用方面的博客吧。TypeScript不一定成为每一个项目中的必需品,但是当你需要它的时候你就会知道它的价值。


 二、配置手动编译TS文件工作环境

第一步:安装nodejs环境;


第二部:安装TypeScript插件:

npm install -g typescript

创建一个工作区间:

TS_App//文件夹
    index.html
    index.ts

然后将下面这段TS代码拷贝到index.ts中:

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

let greeter = new Greeter("world");

let button = document.createElement('button');
button.textContent = "Say Hello";
button.onclick = function() {
    alert(greeter.greet());
}

document.body.appendChild(button);

然后在控制台使用tsc命令将index.ts换行成一个js文件

tsc index.ts

编译完成后会在当前区间生成一个index.js文件,这时候你可以使用index.html引入这个生成的index.js查看效果。

这里介绍使用一个VS Code编辑器插件:live server

安装这个插件以后可以直接右键html文件界面点击右键(选择):Open with Live Server,这时候可以使用一个自动服务在浏览器打开这个html页面,并且可以动态监听这个页面最新的状态,当页面或者js文件发生改变时会自动刷新页面,这样就不需要每次通过tsc编译完js还要手动刷新页面。


第三步:编译全部ts文件

tsc --init //生成tsconfig.json文件
tsc         //tsc直接可以将全部ts文件转换成js文件了

在VS Code中使用TypeScript Auto Compiler插件自动编译ts文件,生成js文件。这个插件需要tsconfig.json文件的配合,通过tsc --init命令将当前目录下的ts文件相关编译描述设定,只要其中一个ts文件发生更改就可以实现被tsconfig.json监控的文件全部编译刷新。

在tsconfig.json文件中可以通过target字段,设置编译的js文件代码符合ES5、ES2015、ES2016...等版本的语法;还可以通过module字段,设置不同的模块化规范,比如commonjs、none、amd、system、umd、es2015、ESNext;还有strict字段可以设置js代码是否为严格模式;esModuleInterop则控制是否允许es2015模块与commonjs某块相互导入的互操作。


链接: https://fly63.com/article/detial/6180

Webpack配置区分开发环境和生产环境

在项目开发的时候,我们通常会将程序分为开发环境和生产环境(或者叫线上环境),开发环境通常指的是我们正在开发的这个阶段所需要的一些环境配置,也就是方便我们开发人员调试开发的一种环境;

vue 全局环境切换

前端开发经常碰到切换环境的情况,测试环境,开发环境,正式环境,我们在utils中创建一个global.js文件main.js中使用

typescript开发环境搭建

ts为typescript的缩写,是javascript的超集。由于 Node 的官方模块仓库网速太慢,模块仓库需要切换到阿里的源。执行下面的命令,确认是否切换成功。如果输出为 taobao字样,则表示切换成功

vue ssr服务端渲染环境搭建

网上有关ssr开发环境搭建的文章不算多,就算找到也是比较高级的,不太适合新手入坑;这篇内容只抽取了其中最重要的部分,实现最基础的开发环境搭建;所谓开发环境无非两件事:自动打包·自动刷新页面,叫法比较土,也可以叫热更新,热加载。

Mac配置PHP开发环境

众所周知,Mac对开发者非常友好,内置了很多开发语言的环境,比如Ruby、Python、PHP,本文主要给大家说一下小明 PHP环境的配置。我们编写好的PHP文件需要在Apache下运行,但Apache服务在Mac种默认是关闭的

vue需要nodejs环境吗?

vue需要nodejs环境,vue是一个js,但是安装它却有点与众不同。安装vue一般是通过npm进行安装,node.js中包括了这个npm,所以安装完node.js就可以使用npm了。使用vue-cli搭建项目时也需要nodejs。

JavaScript运行时环境和标准

JavaScript 主要运行在浏览器端,随着技术不断发展出现很多服务端 JavaScript 运行时,甚至可以做硬件相关的嵌入式开发。

dependencies和devDependencies有区分意义吗?

其实我们并不会去关心哪些是生产环境所需依赖,哪些是开发环境所需依赖,但是这也正常,因为其实在SPA项目中,这两个东西并不需要区分!所以我们平时没有过多了解也正常!

又出新JS运行时了!JS运行时大盘点

在前端技术日新月异的今天,新的 JavaScript 运行时环境不断涌现,它们为开发者提供了更多的选择和可能性。近期,诸如 LLRT 和 WinterJS 等新运行时环境的发布

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!