文档章节

vs code和node的相关使用 一一 typescript的配置

noonoo
 noonoo
发布于 2015/11/28 20:36
字数 714
阅读 352
收藏 3

昨天的时候,用tsd  install 其它库后,要想引用,必须在顶部加入

/// <reference path="underscore/underscore.d.ts" />  这样的引用,才能在ts中有提示。

后来我想是不是安装顺序有误? 原来是先安装vs code,后安装node  ,tsc。

于是我重新安装了遍  vs code。

参考网上说明来配置typescript可在vs code中编译,因为总不能使用 控制台去 一次次的 用 tsc 来编译吧!

1、在项目目录下添加 tsconfig.json 。内容如下  。这段内容似乎没什么工具自动添加的。

{
 "compilerOptions": {
  "target": "ES5",
  "noImplicitAny": false,
  "module": "amd",
  "removeComments": false,
  "sourceMap": true
 }
}

2、借助vs code的编译功能,自动生成tasks.json 文件 。

按下ctrl +shift +B 来启动编译。这时编译不知道要做什么,因为你没有任务配置文件 ,它要为你添加一个默认的。

点击后     .vscode/tasks.json 的文件自动生成。

这个文件内容很长,是好多类型的任务的模板。 有typescript 编译、glup 编译less文件等样式,以供参考 。

编译typescript的有两段,一看就明白意思,我们用第2段的内容。

{
 "version": "0.1.0",

 // The command is tsc. Assumes that tsc has been installed using npm install -g typescript
 "command": "tsc",

 // The command is a shell script
 "isShellCommand": true,

 // Show the output window only if unrecognized errors occur.
 "showOutput": "silent",

 // Tell the tsc compiler to use the tsconfig.json from the open folder.
 "args": ["-p", "."],

 // use the standard tsc problem matcher to find compile problems
 // in the output.
 "problemMatcher": "$tsc"
}

3、 此时建个  ts后缀的文件来试试手吧

         可以在ts文件里,写个  $ 看是否有提示,

        代码写好后,按下 ctrl+shift +B来编译。此时会在ts文件旁边生成js  ,map两个文件 。

大家注意:

            1、在红色的1处, 看到我已经  tsd install jquery 

            2、在2处,我并未引用  /// <reference path="jquery/jquery.d.ts" /> 之类的话

            3、输入 $  ,它已经能智能提示了,看来tsd.d.ts是全局可见,作用类似_referece.js 。


typescript的配置到此结束了!



---------------------------------------------------------------------------------------------------------- 

后来我又在新文件 夹中,建个项目,同样的操作,但是输入$,却不出现智能提示,为什么呢?于是我尝试

 1、我在编写的 ts文件上手动添加引用,就可以提示,删了引用后,智能提示就没了。

2、我随便把这个ts文件复制到另一个目录里, 奇怪,此时不加引用又可以智能提示了。

3、 我再删除这个文件和目录,刚才不能智能提示的,竟然现在可以提示了 ,功能正常了!。。。。。。。

最后我认为这是   vs code的一个bug!


另外,vs code把许多功能放到了Command palette里面,我个人认为变相的减少了菜单项,不知道微软是出于什么目的这样做,总之给初学者会带来烦恼,如图:




© 著作权归作者所有

共有 人打赏支持
noonoo
粉丝 15
博文 65
码字总数 34160
作品 0
深圳
程序员
TypeScript 模块导入那些事

ES6 模块导入的限制 我们先来看一个具体的例子: 在 Node 项目里,使用 CommonJS 规范引入一个模块: 改写为 TypeScript(1.5+ 版本)时,通常有两种方式: 使用 ES6 模块导入方式: 使用 Ty...

三毛丶
06/11
0
0
详解配置VS Code/Webstorm来调试JavaScript

译者按: 本文介绍了使用Node Inspector来调试 JavaScript和TypeScript应用。 原文: Debugging JavaScript/TypeScript Node apps with Chrome DevTools, VS Code and WebStorm 🐞🔫 译者......

Fundebug
05/10
0
0
TypeScript 3.0 正式发布:引入“项目引用”新概念

北京时间7月31日,微软宣布推出 TypeScript 3.0 正式版。 TypeScript 3.0 是一个新的里程碑。官方表示,尽管版本号是一个大变化,但 3.0 版本几乎没有破坏性的变更(这意味着我们可以很轻松地...

局长
07/31
0
29
TypeScript系列1-简介及版本新特性

简介 随着PC端快速向移动端迁移,移动(体验)优先的概念也越来越响。由于ReactJS目前移动端仅仅支持iOS,因此移动端Web开发框架只能选择: AngularJS/Angula2 + Ionic框架 + Cordova。想要学...

一配
2015/08/15
0
0
开始使用 TypeScript

简介 TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。安德斯·海尔斯伯格,C#的首席架构...

施立
2017/11/02
0
3

没有更多内容

加载失败,请刷新页面

加载更多

Kali Linux Docker 練習

docker pull kalilinux/kali-linux-docker docker run -t -i kalilinux/kali-linux-docker /bin/bash apt-get update apt-get install htop apt-get install nmap apt-get install wpscan ap......

BaiyuanLab
15分钟前
0
0
通俗大白话来理解TCP协议的三次握手和四次分手

最近在恶补计算机网络方面的知识,之前对于TCP的三次握手和四次分手也是模模糊糊,对于其中的细节更是浑然不知,最近看了很多这方面的知识,也在系统的学习计算机网络,加深自己的CS功底,就...

onedotdot
20分钟前
1
0
TiDB 在爱奇艺的应用及实践

爱奇艺,中国高品质视频娱乐服务提供者,2010 年 4 月 22 日正式上线,推崇品质、青春、时尚的品牌内涵如今已深入人心,网罗了全球广大的年轻用户群体,积极推动产品、技术、内容、营销等全方...

TiDB
25分钟前
0
0
Web系统大规模并发:电商秒杀与抢购

一、大规模并发带来的挑战 在过去的工作中,我曾经面对过5w每秒的高并发秒杀功能,在这个过程中,整个Web系统遇到了很多的问题和挑战。如果Web系统不做针对性的优化,会轻而易举地陷入到异常...

xtof
今天
3
0
代码质量管理平台-sonarqube

在工作中,往往开发的时候会不怎么注重代码质量的人很多,存在着很多的漏洞和隐患等问题,sonarqube可以进行代码质量的审核,而且十分的残酷。。。。。接下来我们说下怎么安装 进入官网下载:...

落叶清风
今天
7
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部