构建纯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。

• @types, typeRoots, types
  
  默认，编译器会从本地的node_modules/@types找types的声明文件。
  
  所以，一般不要含有typeRoots和types设定（空的也不行）。
  
  如果有typeRoots设定，编译器将忽略node_modules/@types
  
  如果有types设定，编译器将只找types定义的声明文件包。

• Pure Type Script 编译器选项

    "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的测试工具

参照

• npm document
• Typescript Handbook