Node 基本命令

npm安装依赖

【npm install xxx】利用 npm 安装xxx依赖到当前命令行所在目录

【npm install xxx -g】利用npm安装全局依赖xxx

【npm install xxx –save】 安装并写入package.json的”dependencies”中

【npm install xxx –save-dev】安装并写入package.json的”devDependencies”中

npm删除依赖

【npm uninstall xxx】删除xxx依赖

【npm uninstall xxx -g】删除全局依赖xxx

VScode中使用ts

1. 基本配置:安装Node后,在终端安装typescript,

1.安装到当前项目和安装到全局

npm i typescript //安装到当前目录

npm i typescript -g //安装到全局

2. 安装配置文件tsconfig.json

执行之后自动生成一个 .json配置文件

tsc --init //自动生成一个配置文件tsconfig.json

3.配置文件tsconfig.json基本设置

"outDir": "./", /Redirect output structure to the directory.(将输出结构重定向到目录)/转换为js的目录

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

例如:放到这个项目的js文件目录下

outDir": "./js"

4.设置配置文件监视:不用每次运行自动转换ts转换为js

vscode2020版本:

点击终端找到运行任务--->>>选择tsc:监视

1.

2.

HBuilderX中使用ts

1.安装插件

工具-->插件安装-->找到typescript进行安装

2.设置编写监听自动将ts文件转换为js

创建一个.ts文件右击-->外部命令-->typescript-->插件配置

插件配置如下

Package.json

插件配置详细链接

修改:"onDidSaveExecution": false //是否在保存时自动触发。如配为true,就会在保存时自动触发

{

"name": "typescript",

"id": "compile-typescript",

"version": "1.0.1-2018080916",

"external": {

"type": "node",

"programPath": "${pluginPath}",

"executable": "/node_modules/.bin/tsc",

"programName": "typescript",

"commands": [

{

"id": "TYPESCRIPT_COMPILE",

"name": "编译TypeScript",

"command": [

"${programPath}",

"${file}"

],

"extensions": "ts",

"key": "",

"showInParentMenu": false,

"onDidSaveExecution": true

}

]

},

"dependencies": {

"typescript": "^2.8.3"

},

"extensionDependencies": [

"npm"

],

"description": "compile-typescript插件用于typescript文件编译"

}

HBuilderX中使用ts 不如在vs中加载文件使用顺畅。hb中ts转换为js中文件创建与ts文件同级,未发现如何更换

配置文件tsconfig.json详解

通过在终端输入 tsc --init 自动下载

{

"compilerOptions": {

/* Basic Options (基本操作) */

"incremental": true, /* (启用增量编译)*/

"target": "es5", /* Specify ECMAScript target version: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. (指定 ECMAScript 目标版本:"ES3"(默认)、"ES5"、"ES2015"、"ES2016"、"ES2017"、"ES2018"、"ES2019"、"ES2020"或"ESNEXT") */

"module": "commonjs", /* Specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'.(指定模块代码生成:'无','Commonjs','AMD','system','UMD','es2015','es2020',或'ESNext')*/

"lib": [], /* Specify library files to be included in the compilation. (指定要包含在编译中的库文件。)*/

"allowJs": true, /* Allow javascript files to be compiled. (允许编译javascript文件。)*/

"checkJs": true, /* Report errors in .js files. (报告.js文件中的错误。)*/

"jsx": "preserve", /* Specify JSX code generation: 'preserve', 'react-native', or 'react'.(指定JSX代码生成:'preserve'、' reactive -native'或'react'。) */

"declaration": true, /* Generates corresponding '.d.ts' file. (生成相应的.d.ts文件。)*/

"declarationMap": true, /* Generates a sourcemap for each corresponding '.d.ts' file.(为每个对应的“.d.ts”文件生成源映射。) */

"sourceMap": true, /* Generates corresponding '.map' file. (生成相应的“.map”文件。)*/

"outFile": "./", /* Concatenate and emit output to single file. (连接并将输出发送到单个文件。)*/

"outDir": "./", /* Redirect output structure to the directory.(将输出结构重定向到目录) */

"rootDir": "./", /* Specify the root directory of input files. Use to control the output directory structure with --outDir. (指定输入文件的根目录。用于使用--outDir控制输出目录结构)*/

"composite": true, /* Enable project compilation (启用项目编译)*/

"tsBuildInfoFile": "./", /* Specify file to store incremental compilation information(指定文件以存储增量编译信息) */

"removeComments": true, /* Do not emit comments to output.(不要向输出发出注释。) */

"noEmit": true, /* Do not emit outputs.(不要发出输出。) */

"importHelpers": true, /* Import emit helpers from 'tslib'. (从“tslib”发出帮助程序。)*/

"downlevelIteration": true, /* Provide full support for iterables in 'for-of', spread, and destructuring when targeting 'ES5' or 'ES3'. (在针对“ES5”或“ES3”时,在“for of”、“spread”和“destructuring”中为iterables提供完全支持。)*/

"isolatedModules": true, /* Transpile each file as a separate module (similar to 'ts.transpileModule'). (将每个文件作为单独的模块进行传输(类似于“ts.Transpile module”)。)*/

/* Strict Type-Checking Options (严格类型检查选项)*/

"strict": true, /* Enable all strict type-checking options. (启用所有严格类型检查选项。)*/

"noImplicitAny": true, /* Raise error on expressions and declarations with an implied 'any' type.(对隐含“any”类型的表达式和声明引发错误。) */

"strictNullChecks": true, /* Enable strict null checks.(启用严格的空检查。) */

"strictFunctionTypes": true, /* Enable strict checking of function types.(启用函数类型的严格检查。) */

"strictBindCallApply": true, /* Enable strict 'bind', 'call', and 'apply' methods on functions. (对函数启用严格的“bind”、“call”和“apply”方法。)*/

"strictPropertyInitialization": true, /* Enable strict checking of property initialization in classes.(在类中启用属性初始化的严格检查。) */

"noImplicitThis": true, /* Raise error on 'this' expressions with an implied 'any' type. (对隐含“any”类型的“this”表达式引发错误。)*/

"alwaysStrict": true, /* Parse in strict mode and emit "use strict" for each source file.(以严格模式解析并为每个源文件发出“使用严格”) */

/* Additional Checks (附加检查)*/

"noUnusedLocals": true, /* Report errors on unused locals. (报告未使用的局部变量的错误。)*/

"noUnusedParameters": true, /* Report errors on unused parameters.(报告未使用参数的错误) */

"noImplicitReturns": true, /* Report error when not all code paths in function return a value.(不是函数中的所有代码路径都返回值时报告错误。) */

"noFallthroughCasesInSwitch": true, /* Report errors for fallthrough cases in switch statement.(在switch语句中报告故障转移情况的错误。) */

/* Module Resolution Options (模块分辨率选项) */

"moduleResolution": "node", /* Specify module resolution strategy: 'node' (Node.js) or 'classic' (TypeScript pre-1.6).(指定模块解析策略:“node”(node.js)或“classic”(TypeScript pre-1.6)。) */

"baseUrl": "./", /* Base directory to resolve non-absolute module names. (用于解析非绝对模块名的基目录。)*/

"paths": {}, /* A series of entries which re-map imports to lookup locations relative to the 'baseUrl'.(将导入重新映射到相对于“baseUrl”的查找位置的一系列项。) */

"rootDirs": [], /* List of root folders whose combined content represents the structure of the project at runtime.(其组合内容表示运行时项目结构的根文件夹列表。) */

"typeRoots": [], /* List of folders to include type definitions from.(包含类型定义的文件夹列表) */

"types": [], /* Type declaration files to be included in compilation. (要包含在编译中的类型声明文件。)*/

"allowSyntheticDefaultImports": true, /* Allow default imports from modules with no default export. This does not affect code emit, just typechecking.(允许从没有默认导出的模块进行默认导入。这不会影响代码发出,只会影响类型检查。) */

"esModuleInterop": true, /* Enables emit interoperability between CommonJS and ES Modules via creation of namespace objects for all imports. Implies 'allowSyntheticDefaultImports'. (通过为所有导入创建命名空间对象,启用CommonJS和ES模块之间的互操作性。表示“AllowSyntticDefaultImports”。)*/

"preserveSymlinks": true, /* Do not resolve the real path of symlinks. (不要解析符号链接的实际路径。)*/

"allowUmdGlobalAccess": true, /* Allow accessing UMD globals from modules.(不解析符号链接的实际路径。允许从模块访问UMD全局变量。) */

/* Source Map Options (源映射选项) */

"sourceRoot": "", /* Specify the location where debugger should locate TypeScript files instead of source locations.(指定调试器应在其中定位TypeScript文件而不是源位置。) */

"mapRoot": "", /* Specify the location where debugger should locate map files instead of generated locations. (指定调试器应定位映射文件而不是生成位置的位置。)*/

"inlineSourceMap": true, /* Emit a single file with source maps instead of having a separate file. (使用源映射生成单个文件,而不是使用单独的文件。)*/

"inlineSources": true, /* Emit the source alongside the sourcemaps within a single file; requires '--inlineSourceMap' or '--sourceMap' to be set. (在单个文件中沿源映射发出源;需要设置“--inlineSourceMap”或“--sourceMap”。)*/

/* Experimental Options (试验选项) */

"experimentalDecorators": true, /* Enables experimental support for ES7 decorators. (启用对ES7装饰器的实验性支持。)*/

"emitDecoratorMetadata": true, /* Enables experimental support for emitting type metadata for decorators.(启用对为装饰器发出类型元数据的实验性支持。) */

/* Advanced Options (高级选项)*/

"forceConsistentCasingInFileNames": true /* Disallow inconsistently-cased references to the same file.(不允许对同一文件进行大小写不一致的引用。) */

}

}

hbuilderx设置新建jsx后缀名_TypeScript编写前基本配置操作相关推荐

  1. VSCode设置隐藏固定后缀名文件

    前言 在用Angular CLI构建工程时,每次创建组件.服务等都会带有.spec.ts结尾的文件,这是用来单元测试用的.在平时构建工程时作用不大,在VSCode中显得非常繁琐. 在VSCode中设置 ...

  2. 联通光纤猫虚拟服务器设置,【2017年整理】联通光猫配置操作手册.doc

    [2017年整理]联通光猫配置操作手册 光猫安装调测 一.将光猫放置在用户要求的位置. 二.设备开通推荐操作步骤 1.将设备上电后开机启动,等待设备启动完毕(LOS红灯闪烁则启动完毕): 2.网线分别 ...

  3. 文件的拓展名(后缀名)怎么快速修改

    最近有很多朋友在问,如何快速改名,比如将多个文件的后缀名进行修改,该如何操作呢?不知道的宝贝们,下面请随小编一起来试试吧,希望能给大家带来帮助. 所需工具 文件素材若干 操作步骤 将需要修改的所有文件 ...

  4. php自定义文件后缀名,显示文件扩展名 显示文件后缀名设置篇-DIV CSS网页开发准备...

    显示扩展名-DIV CSS网页开发准备 一.为什么需要显示扩展名?   -   TOP 因为很多时候我们需要辨别文件的扩展名如是.txt..js..css..php..htm..asp..aspx等文 ...

  5. 在python语言中可作为源文件后缀名的是_在计价软件中可以新建下列哪些类型的项目( )...

    [多选题]在2013清单计价中,其他项目界面,包括( ) [单选题]锂离子电池最常用的负极材料是碳材料,其理论嵌锂容量是() [单选题]某企业为增值税一般纳税人,购买原材料取得增值税专用发票上注明的价 ...

  6. win7 搜索 php 文件内容,window_win7文件后缀名怎么设置实现文件内容搜索?,文件有广义的文件,那就是公 - phpStudy...

    win7文件后缀名怎么设置实现文件内容搜索? 文件有广义的文件,那就是公文书信件等等纸质材料等等.而更广泛的是我们现在办公中所用到的电子文件,它在我们现有的办公中起到了不可忽视的作用.下面就说一些办公 ...

  7. httpModule过滤无后缀名的文件夹路径请求,iis6和iis7的设置

    对无后缀名的文件夹路径请求,设置过滤条件需要注意的设置: 无后缀名文件夹路径如:http://www.abc.com/ 或 http://www.abc.com/news IIS6的设置 在" ...

  8. 怎么设置计算机显示列表格式,(怎样显示excel的文件后缀名)excle后缀格式怎么显示...

    我的电脑excel表格文件名怎么不显示扩展名 这是因没有开启文件扩显示,具体开启该功能的方法(以windows10为例): 1.打开Windows10,随后点击桌面上的此电脑按钮. 2.在随后打开的界 ...

  9. excel 修改设置(将excel修改后缀名,解压缩方式)

    1 新建一个excel文件 2 修改后缀名为.zip格式 3解压缩出文件夹 4 文件结构如下,可以进行修改,给excel添加一些功能键可结合VBA添加事件. 5修改完成后,全选文件,进行压缩.注:不要 ...

最新文章

  1. 黑马程序员-4 String类和StringBuffer类
  2. 笔记-项目人力资源管理
  3. cv::imread导致段错误_网络诊断举例LSO导致的网络性能问题
  4. mysql 利用触发器(Trigger)让代码更简单
  5. Unicode和ASCII的区别
  6. Reading HTML content from a UIWebView
  7. UVA10427 Naughty Sleepy Boys【数学】
  8. 多线程编程-之并发编程:同步容器
  9. html语言的前景,HTML5语言的优势有哪些?2021年还有前景么?
  10. 【STL源码剖析】总结笔记(1):开篇
  11. 在几何画板中如何制作圆柱的侧面展开动画_几何画板制作圆柱体的形成动画演示方法...
  12. [原创]Javascript 利用mousetrap.js进行键盘事件操作
  13. excel冻结窗口_冻结窗口怎么冻结多行
  14. C语言使用 gzip 算法压缩数据
  15. 使用spark-submit工具提交Spark作业
  16. java代码随机取名字
  17. Juc_无juc情况
  18. 【Linux】动静态库及gdb的使用
  19. 微信小程序-退款业务
  20. 利用selenium 爬取豆瓣 武林外传数据并且完成 数据可视化 情绪分析

热门文章

  1. 大一计算机专业,大一计算机专业学生
  2. Mybatis mapper代理SqlMapConfig.xml配置详解
  3. Git常用指令——持续补充中
  4. 什么是 devops_DevOps对您意味着什么?
  5. 深圳增强互动科技_增强女性在科技领域的十项原则
  6. 2020年这个副业,能让你彻底告别死工资,你敢试吗?
  7. luci编程 openwrt_openwrt开源系统LUCI配置界面
  8. CAN笔记(16) CANOpen简介
  9. 计算机编程常用指令,加工中心几个常用指令的编程技巧
  10. python中如何快速注释_python中如何快捷添加注释