构建纯TypeScript应用

构建纯TypeScript应用

现在只有命令行应用的例子

前言

现在,应用开发的趋势是命令行接口应用和Web应用。 node.js 和 typescript的崛起所以,这里讨论如何创建纯的TypeScript CLI(Command Line Interface)应用和Web server-side应用。

概念

  • typescript
  • node.js node.js是一个javascript的运行环境。
  • npm npm是一个javascript包管理器。也是node.js的默认包管理器。

环境准备

  • 安装node.js 从node.js网站上下载,并安装。 这时,npm也一并被安装了。
:: check version
node -v
npm -v
  • 更新npm node.js带的npm不一定是最新的,所以要更新npm
:: Update npm to the latest version
npm install npm@latest -g
npm -v
  • 安装typescript
:: install typescript
npm install -g typescript
:: check version
tsc -v

构建typescript CLI应用

  • 创建一个新的项目
mkdir myproj
cd myproj
npm init

这个命令会在当前目录创建一个项目配置文件:package.json 内容类似如下:

{
  "name": "myproj",
  "version": "1.0.0",
  "description": "",
  "main": "App.ts",
  "scripts": {
    "test": "ts-node .\\src\\App.ts name address"
  },
  "keywords": [
    "my",
    "example"
  ],
  "author": "your name",
  "license": "MIT",
}
  • 下一个App.ts代码 创建目录src 在目录src下,创建一个文件App.ts
class Startup {
    public static main(): number {
        var args = process.argv;
        args.splice(0, 2);
        console.log(args);
        return 0;
    }
}

Startup.main();
  • 运行App.ts 运行目录: myproj ts-node .\src\App.ts name address :: or run script 'test' in the package.json npm run test
  • 设置项目的依赖 运行目录: myproj npm install @types/node --save-dev

这时,npm会下载@types/node到./node_modules下,package.json文件会增加下面内容:

{
  "devDependencies": {
    "@types/node": "^8.0.33"
  }
}

构建typescript Web server-side应用

好吧。我还不会。

Type Script 的文件

  • .ts TypeScript源码文件。
  • .tsx 主要是支持React的jsx文件,是一种可以嵌入XML-like的TypeScript源文件。
  • .d.ts TypeScript源码的声明文件,一般是可以自动生成的。 有些像是C++的.h文件。我想一个作用是方便参照使用,性能更好一些。
  • tsconfig.json tsconfig.json是Type Script项目的配置文件。

了解tsconfig.json

tsconfig.json是Type Script项目的配置文件。主要包含如下信息:

  • 编译器选项 - compilerOptions 在下一小节里,专门介绍主要的编译器选项。
  • 项目的文件 - files/include/exclude 基本上可以使用下面这个统一形式:
{
    "include": [
        "src/**/*"
    ],
    "exclude": [
        "node_modules",
        "../**/*.spec.ts"
    ]
}
  • extends 指定一个基本配置文件。 详见tsconfig-json
  • compileOnSave 是否自动编译

编译器选项 - tsconfig.json - compilerOptions

详见Compiler Options

    "compilerOptions": {
        "emitDecoratorMetadata": true, // for typeorm
        "experimentalDecorators": true, // for typeorm
        "lib": ["esnext"],
        "strict": true,
        "noUnusedLocals": true,
        "noUnusedParameters": true,
        "pretty": true,
        "target": "esnext",
        "module": "commonjs", // work with node.js only
        "moduleResolution": "node"
    }
  • lib
  • target/module/moduleResolution

了解一下npm

npm提供了丰富的功能,可以做很多事情,包括:

  • manage packages install/uninstall/update/docs/doctor/star/unstar
  • manage a project /init/install/uninstall/update
  • run a project build/rebuild/run/scripts/start/test/restart/stop
  • publish a project pack/registry/publish/unpublish/deprecate/adduser/owner
  • options config/root/prefix/bin

npm folders and files

  • Prefix folder %AppData%\npm
  • Global install path %AppData%\npm\node_modules
  • Global cache %AppData%\npm-cache
  • Package install path .\node_modules
  • npmrc npm 配置文件。四个Level: per-project config file (/path/to/my/project/.npmrc) per-user config file (~/.npmrc) global config file ($PREFIX/etc/npmrc) npm builtin config file (/path/to/npm/npmrc)
  • package.json 项目配置文件
  • package-lock.json 自动生成的配置文件,不会被发布。 精确描述依赖包,辅助安装、发布功能。
  • npm-shrinkwrap.json 由npm shrinkwrap命令产生,完完全全和package-lock.json内容一样,但是会被发布。

npm 命令

  • init
:: 问一系列问题,产生一个package.json
npm init [-f|--force|-y|--yes]

init的参数: -f|--force|-y|--yes: 没有提示,产生一个默认的package.json文件。

  • install
:: 安装当前项目的依赖包.
npm install (with no args, in package dir)

:: 安装包
npm install [<@scope>/]<name>
npm install [<@scope>/]<name>@<tag>
npm install [<@scope>/]<name>@<version>
npm install [<@scope>/]<name>@<version range>

:: 安装一个online的包
npm install <git-host>:<git-user>/<repo-name>

:: 安装一个online的包
npm install <git repo url>

:: 安装一个已下载的包
npm install <tarball file>

:: 安装一个online的包
npm install <tarball url>

:: 安装一个已经下载并解开(或者是没有打包)的包,<folder>是包的位置。
npm install <folder>

install的别名: npm i install的参数: -P|--save-prod: 默认,并保存到项目的dependencies配置中。 -D|--save-dev: 并保存到项目的devDependencies配置中。 -O|--save-optional: 并保存到项目的optionalDependencies配置中。 -E|--save-exact: 使用精确的版本信息保存 -B|--save-bundle: 并保存到项目的bundleDependencies配置中。 --no-save: 不保存到项目配置中。 -g|--global: 安装包到global位置。 -f|--force: 强制重新安装。

  • run|run-script
npm run-script <command> [--silent] [-- <args>...]
:: or alias
npm run <command> [--silent] [-- <args>...]

其它工具

参照Integrating with Build Tools

  • gulp: 构建系统
  • Karma: JavaScript的测试工具

参照

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

发表于

我来说两句

0 条评论
登录 后参与评论

相关文章

来自专栏黑泽君的专栏

day20_day23课堂笔记

    2. 在首页上点击类别链接时会跳转到 product_list.jsp 页面展示相关商品信息

15020
来自专栏云计算教程系列

如何在CentOS 7上使用OTRS设置帮助台系统

OTRS是一个开源的票证请求系统。它为用户,客户,IT人员,IT服务和任何外部组织提供单点联系。该程序是用Perl编写的,支持各种数据库(MySQL,Postg...

1.1K40
来自专栏Python自动化测试

Jmeter4.0接口测试之案例实战(七)

在前面的知识体系中介绍了Jmeter的基本应用,下来通过具体的案例来看Jmeter在接口测试中的具体案例实战部分。

46630
来自专栏安智客

GP规范中定义的四种SE访问控制架构

GP规范给人的感觉好像有点晦涩难懂,由于是规范,所以比较抽象,而且GP这个组织的专家们来自世界各地,大家都用英语文档交流,所以不同的文档风格不同,难免大家阅读起...

22020
来自专栏跟着阿笨一起玩NET

win7组件服务COM+应用程序编录错误解决办法

一般情况下,我们遇到过的COM+应用程序编录错误共有两个:(1)第一个是打开COM+应用程序时出现“编录错误,执行最后操作发生错误,错误代码8007042C-依...

30010
来自专栏地方网络工作室的专栏

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十)打包项目并发布到子目录

Vue2+VueRouter2+Webpack+Axios 构建项目实战2017重制版(十)打包项目并发布到子目录 前情回顾 通过上一章《Vue2+VueRou...

26180
来自专栏超然的博客

web攻击

  最常见和基本的攻击WEB网站的方法。攻击者在网页上发布包含攻击性代码的数据。当浏览者看到此网页时,特定的脚本就会以浏览者用户的身份和权限来执行。通过XSS可...

15010
来自专栏喵了个咪的博客空间

phalcon-进阶篇2(拦截器)

#phalcon-进阶篇2(拦截器)# ? 本教程基于phalcon2.0.9版本 ##前言## 先在这里感谢各位phalcon技术爱好者,我们提供这样一个优秀...

32870
来自专栏菩提树下的杨过

基于spring-boot的rest微服务框架

周末在家研究spring-boot,参考github上的一些开源项目,整了一个rest微服务框架,取之于民,用之于民,在github上开源了,地址如下:

18910
来自专栏程序猿DD

Jenkins:配置信息变更历史

作者:sparkdev 出处:http://www.cnblogs.com/sparkdev/ 像 Jenkins 这样的系统,使用的过程就是配置文件变更的过程...

28150

扫码关注云+社区

领取腾讯云代金券