构建纯TypeScript应用
现在只有命令行应用的例子。
前言
现在，应用开发的趋势是命令行接口应用和Web应用。
node.js 和 typescript的崛起所以，这里讨论如何创建纯的TypeScript CLI(Command Line Interface)应用和Web server-side应用。
概念
环境准备
- 安装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
-
@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的测试工具
请发表评论