入门流程,大神绕行。

安装环境

这就不多说了,安装开发的环境。

安装vscode

下载地址:https://code.visualstudio.com/

安装Nodejs

下载地址:https://nodejs.org

配置

安装 TypeScript

官网:https://www.typescriptlang.org/

官网上,有文档,有视频,有Demo,隐约记得见过中文站,但是现在怎么都找不到了,找到的同学可以告诉我一下。

用node.js的npm安装TypeScript编译器

npm install -g typescript

安装Tpyings

npm install -g typings

typings 主要是用来获取.d.ts文件。当typescript使用一个外部JavaScript库时,会须要这个文件,当然好多的编译器都用它来增加智能感知能力。

配置项目

创建package.json

建一个目录的文件夹,起一个你喜欢的名字。

node项目嘛,当然要先建立一个package.json

npm init

跟着提示下一步就好了。

创建 tsconfig.json

typescript 的项目都需要一个tsconfig.json

tsc --init

会创建一个这样内容的tsconfig.json

{
"compilerOptions": {
"module": "commonjs",
"target": "es5",
"noImplicitAny": false,
"sourceMap": false },
"exclude": [
"node_modules"
]
}

因为写node.js你可以修改tagget为es6, 要调试把 sourceMap改为true, 添加allowjs为true,就可以ts和js混合玩了.

{
"compilerOptions": {
"module": "commonjs",
"target": "es6",
"noImplicitAny": false,
"sourceMap": true,
"allowJs": true
},
"exclude": [
"node_modules"
]
}

安装 node 的 .d.ts 库

还是因为是node.js开发,我们要安装node的ts库, 为了强类型,主要还是为了智能感知。

typings install dt~node --global

国内的用typings 的时候,而且就会抽风,好久都完成不了,不要紧,Ctrl+C掉了,再执行,多试几次,总会有成功的时候的。

typings 现在已经不推荐使用了。现在都用npm来弄。

    npm install @types/node --dev-save

配置 vscode

打开 vscode

code .

windows话 也可以右键菜单,open with Code.

配置 TypeScript 编译

按ctrl + shift + b, 如果没有配置过,task, 就会在上面提示。

选择【配置任务运行程序】

会在.vscode文件夹下生成一个 task.json, 基本不用动,我到现在是没有改过它。

{
// See https://go.microsoft.com/fwlink/?LinkId=733558
// for the documentation about the tasks.json format
"version": "0.1.0",
"command": "tsc",
"isShellCommand": true,
"args": ["-p", "."],
"showOutput": "silent",
"problemMatcher": "$tsc"
}

小试身手

我们来创建一个app.ts 文件,随便写点东西吧

/**
* person
*/
class person {
constructor() { } /**
* print
*/
public print() {
console.log('this is a person')
}
} let p = new person();
p.print();

按Ctrl+Shift+B,编译一下,就会生成一个app.js.

现在运行试试结果吧。

【vscode】如何在vscode 中配置:TypeScript开发node环境的更多相关文章

  1. 如何在Eclipse中配置python开发环境

    考虑到网上关于Eclipse中配置Python开发环境的文章千篇一律,故写此文以总结. 本文主要内容是:三种Pydev配置方法和一种PyDev卸载方法. 本文的前提是你已经安装了Eclipse和pyt ...

  2. IDEA中配置Scala开发编译环境

    安装JDK 因为Scala是运行在JVM平台上的,所以安装Scala之前要安装JDK. 安装Scala Windows安装Scala编译器 访问Scala官网http://www.scala-lang ...

  3. 如何在Pycharm中配置Python和Django(环境搭建篇)

    一.准备好以下必备条件,并且按照先后顺序进行安装: Python 3.6 (64-bit).或Python27(64-bit) Django-1.11.tar.gz pycharm 开发工具 安装好了 ...

  4. 如何在appconfig中配置服务的ip

    开发了一个WindowsService消息服务器,刚开始一直都是在代码中把IP地址写死,所以每次只要是更换了新的IP地址后,都需要重新编译项目.所以考虑把ip配置到config文件中, 这样做的好处是 ...

  5. VC 6中配置OpenGL开发环境

    2010,2012中配置类似 http://hi.baidu.com/yanzi52351/item/f9a600dffa4caa4ddcf9be1d VC 6中配置OpenGL开发环境 这里,我习惯 ...

  6. 如何在sharepoint2010中配置Google Anlytics 分析服务

      简介 Google Analytics(分析)不仅可以帮助您衡量销售与转化情况,而且能为您提供新鲜的深入信息,帮助您了解访问者如何使用您的网站,他们如何到达您的网站,以及您可以如何吸引他们不断回访 ...

  7. eclipse中配置c++开发环境 Eclipse + CDT + MinGW

    转自eclipse中配置c++开发环境 Eclipse + CDT + MinGW 基本框架:Eclipse + CDT + MinGW 背景知识: CDT:CDT 是完全用 Java 实现的开放源码 ...

  8. 如何在Eclipse中配置Tomcat(免安装版)

    如何在Eclipse中配置Tomcat(免安装版) 2013-10-09 23:19wgelgrsh | 分类:JAVA相关 | 浏览642次 分享到:   2013-10-10 17:10提问者采纳 ...

  9. Visual Studio Code中配置GO开发环境

    在Visual Studio Code中配置GO开发环境 一.GO语言安装 详情查看:GO语言下载.安装.配置 二.GoLang插件介绍 对于Visual Studio Code开发工具,有一款优秀的 ...

随机推荐

  1. 使用kindeditor文本编辑器

    aspx中代码: <%@ Page Language="C#" ValidateRequest="false" AutoEventWireup=" ...

  2. My English Dictionary

    A axis 坐标轴 architecture 结构 B C consider 考虑 closure  闭包 clip  修剪 convert 改变 D default 默认的 valid 有效的 d ...

  3. phantomjs和angular-seo-server实现angular单页面seo

    1.下载phantomjs,并配置环境变量为   eg:E:\phantomjs-2.1.1-windows\bin 2.下载angular-seo-server 3.windows下:cmd eg: ...

  4. sqlserver开启'xp_cmdshell'命令

    --sql server中开启xp_cmdshell命令 1. --允许配置高级选项 GO RECONFIGURE GO . --开启xp_cmdshell服务 RECONFIGURE GO . -- ...

  5. BZOJ1742[Usaco2005 nov]Grazing on the Run

    Description John养了一只叫Joseph的奶牛.一次她去放牛,来到一个非常长的一片地,上面有N块地方长了茂盛的草.我们可 以认为草地是一个数轴上的一些点.Joseph看到这些草非常兴奋, ...

  6. js弹出公告

    调用: $(document).ready(function(){ sAlert("公告","内容"); }); 方法 function sAlert(strT ...

  7. Echarts给柱状图每一条顶部都添加数值

    在 series中添加 itemStyle : { normal: {label : {show: true}}}, 不过目测要把markPoint等去掉,不然最大值和最小值会和label冲突,应该有 ...

  8. 在Windows上编译最新的CURL,含有zlib,openssl

    最近,从网上下载了一个curl库,使用时各种报错,都无法启动,于是干脆就直接自己编译了. 1. 准备工作 a. 下载zlib zlib可以使得HTTP请求支持gzip压缩,其地址如下: 官网:http ...

  9. Android Application类作用简单说明

    每个程序运行时创建一个Application类的对象且只创建一个 Application对象的生命周期是整个程序中最长的,它的生命周期就等于这个程序的生命周期. Application来进行一些,如: ...

  10. 基音周期提取2-基于线性相关系数的Matlab实现

    基音周期提取2-基于线性相关系数的Matlab实现 基音周期提取结果 图1 基音提取结果 算法说明 线性相关系数 也称"皮尔逊积矩相关系数"(Pearson product-mom ...