TypeScript 学习笔记 之插件安装

来源:互联网 发布:淘宝新娘饰品 编辑:程序博客网 时间:2024/06/05 10:35
关于类型定义文件的管理工具,经历了 tsd、typings 两代进化,现在官方推荐的方式是使用 npm 进行管理

1.安装之前,先用bower安装相应插件 例如安装CKEditor : 

    bower install --help
    bower install --save ckeditor#full/4.5.11
    bower home ckeditor
    bower search ckeditor
    bower install ckeditor
    bower install angular-ui-router --save

2.升级TypeScript  确认版本号在 2.0 以上

$ npm uninstall -g typescript$ npm install -g typescript$ tsc -v
npm install --save-dev typescript

3.类型定义库

Github 上的开源项目 DefinitelyTyped 用于维护常见 JavaScript 库的类型定义。

通过 TypeSearch 搜索对应库的类型定义文件。

4.安装类型定义文件

以 angularjs 为例,在工程根目录下执行如下命令以安装类型定义文件

$ npm install @types/angular --save-dev

对应的类型定义文件将被安装在 工程根目录/node_modules/@types 目录下。

5.配置 tsconfig.json

工程根目录/src 下的 tsconfig.json 用于配置 TypeScript 编译选项。在使用 npm 进行类型定义文件管理时,它的配置如下

{    "compilerOptions": {        "module": "commonjs",        "target": "ES5",        "noImplicitAny": true,        "removeComments": true,        "preserveConstEnums": true,        "sourceMap": true,        "rootDir": "./",        "outDir": "../www"    },    "exclude": [        "bower_components",        "components",        "../www"    ],    "include": [        "../node_modules/@types",        "./"    ]}

在未配置 typeroots 的前提下,TypeScript 编译器会自动寻找引入 node_modules/@types 目录中的类型定义文件。更多信息请参考 tsconfig-json types typeroots and types

5.如果你用的 Netbeans  要升级TypeScript Editor 插件

匹配 TypeScript 2,Netbeans 插件也需升级。在 nbts 下载最新的 .nbm 插件并导入 Netbeans 即可。


以下是typings时代的安转方法,可以参考:


2、然后再安装:typescript 相应支持插件 

插件地址(包含绝大部分插件):https://github.com/DefinitelyTyped/DefinitelyTyped

安装时要注意的事项:

先全局安装: npm install typings --global

让后cd 到项目typings 目录下,进行以下命令的操作

安装命令说明: typings install -h

Install:安装
typings install (with no arguments, in package directory)
typings install [<name>=]<location>

  <name>      Module name of the installed definition
  <location>  The location to read from (described below)

Valid Locations:
  [<source>~]<pkg>[@<version>][#<tag>]
  file:<path>
  github:<org>/<repo>[/<path>][#<commitish>]
  bitbucket:<org>/<repo>[/<path>][#<commitish>]
  npm:<pkg>[/<path>]
  bower:<pkg>[/<path>]
  http(s)://<host>/<path>

  <source>    The registry mirror: "npm", "bower", "env", "global", "lib" or "dt"
              When not specified, `defaultSource` in `.typingsrc` will be used.
  <path>      Path to a `.d.ts` file or `typings.json`
  <host>      A domain name (with optional port)
  <version>   A semver range (E.g. ">=4.0")
  <tag>       The specific tag of a registry entry
  <commitish> A git commit, tag or branch

Options:
  [--save|-S]       Persist to "dependencies"
  [--save-dev|-D]   Persist to "devDependencies"
  [--save-peer|-P]  Persist to "peerDependencies"
  [--global|-G]     Install and persist as a global definition
    [-SG]           Persist to "globalDependencies"
    [-DG]           Persist to "globalDevDependencies"
  [--production]    Install only production dependencies (omits dev dependencies)

Aliases: i, in
案例:

先全局安装 :      npm install typings --global

一般情况:
typings install debug --save

特殊情况:
typings install env~atom --global --save

typings install dt~ckeditor --save-dev -G

typings install dt~ng-file-upload --save-dev -G

typings install dt~angular-ui-router --save-dev -G

Uninstall 移除:
typings uninstall <name> [--save|--save-dev|--save-peer] [--global]

Options:
  [--save|-S]       Remove from "dependencies"
  [--save-dev|-D]   Remove from "devDependencies"
  [--save-peer|-P]  Remove from "peerDependencies"
  [--global|-G]     Remove from the global version of dependencies
    [-SG]           Remove from "globalDependencies"
    [-DG]           Remove from "globalDevDependencies"

Aliases: r, rm, remove, un

案例:

typings remove ckeditor -D -G
typings remove atom  -G
Init
Initialize a new typings.json file. If you're currently using TSD, you can use --upgrade to convert tsd.json to typings.json.
typings init

Options:
  [--upgrade]    Upgrade `tsd.json` to `typings.json`
List
typings list

Options:
  [--production] List only production dependencies (omit dev dependencies)

Aliases: la, ll, ls
Bundle
typings bundle --out <filepath>
Options:
  [--out|-o] <filepath>  The bundled output file path
  [--global|-G]          Bundle as a global definition
Search
typings search [query]

Options:
  [--name] <name>     Search for definitions by exact name (E.g. only "react")
  [--source] <source> The registry mirror (E.g. "npm", "bower", "env", "global", "dt", ...)
  [--offset] <x>      Skip first "x" results (default: 0)
  [--limit] <x>       Limit to "x" results (default: 20, max: 100)
  [--order] <order>   Direction to sort results (default: "asc", enum: "asc" or "desc")
  [--sort] <column>   Order results by a column (E.g. "versions", "name", ...)




0 0
原创粉丝点击