• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

构建纯TypeScript应用

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

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

前言

现在,应用开发的趋势是命令行接口应用和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的测试工具

参照


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
如何在Vue项目中使用TypeScript发布时间:2022-07-18
下一篇:
react-native-typescript-项目环境搭建发布时间:2022-07-18
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap