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