标签: tsconfig

在 package.json 中配置本地打字稿编译器

编辑 #1:似乎我有一个有效的配置,但欢迎提出所有改进建议。见答案:https : //stackoverflow.com/a/42269408/1155847


原问题

我目前正在尝试设置我的环境,以便使用我package.jsondevDependencies打字稿版本。什么是一些我们的最佳实践,所以它是“编辑不知道”,最好可以用作NPM脚本,如:npm run tscompile

需要明确的是 - 我可以在使用时让一切正常npm install typescript -g- 但是我依赖于全局安装版本,这不是我想要的 - 因为我们希望在一个团队中工作并为每个版本设置特定的打字稿版本升级之前的会员,所以我们都在同一页面上。

我目前正在尝试像这样设置它 - 但是npm然后抱怨它无法将“node_modules”识别为内部或外部命令......我想我也必须将 tsconfig.json 传递给 tsc,或者在至少给它一个“工作目录”——但我什至无法从我本地下载的 npm 缓存中启动 tsc。

包.json

{
  "name": "tswithnodejsgettingstarted",
  "version": "1.0.0",
  "description": "",
  "main": "app/index.js",
  "scripts": {
    "start": "node app/index.js",
    "tscompile": "node_modules/typescript/tsc"
  },
  "author": "",
  "license": "ISC",
  "devDependencies": {
    "typescript": "2.1.6"
  }
}
Run Code Online (Sandbox Code Playgroud)

配置文件

{
    "compileOnSave": true,
    "compilerOptions": {
        "module": "commonjs",
        "noImplicitAny": true,
        "sourceMap": true,
        "outDir": …
Run Code Online (Sandbox Code Playgroud)

node.js npm typescript tsconfig visual-studio-code

10
推荐指数
2
解决办法
1万
查看次数

获取nyc/istanbul覆盖率报告以使用打字稿

我正在努力为我的打字稿/ mocha/gulp项目获得适当的nyc/istanbul报道.我尝试了很多方法,其中一些似乎无法使用源映射,而其他方法由于ts-node/ tsc错误而失败.我目前的设置是:

nyc 相关配置 package.json

"scripts": {
    "test:coverage": "nyc npm run test:unit",
    "test:unit": "gulp mocha"
}
"nyc": {
    "check-coverage": true,
    "all": true,
    "extension": [
      ".js",
      ".jsx",
      ".ts",
      ".tsx"
    ],
    "include": [
      "src/**/!(*.test.*).[tj]s?(x)"
    ],
    "reporter": [
      "html",
      "lcov",
      "text",
      "text-summary"
    ],
    "report-dir": "docs/reports/coverage"
  }
Run Code Online (Sandbox Code Playgroud)

gulpfile.js mocha 相关部分

const SRC_DIR = path.join(__dirname, 'src');
const SRC_FILES = path.join(SRC_DIR, '**', '*.[jt]s?(x)');
const TEST_FILES = path.join(SRC_DIR, '**', '*.test.[jt]s?(x)');
const MOCHA_CONFIG = {
    src: [
        TEST_FILES
    ],
    watchSrc: [
        SRC_FILES,
        TEST_FILES
    ], …
Run Code Online (Sandbox Code Playgroud)

javascript mocha.js typescript istanbul tsconfig

10
推荐指数
1
解决办法
4550
查看次数

Karma,Typescript定义文件未加载

我正在使用karma,webpack和typescript设置开发环境,但我遇到的问题是karma没有在测试中应用自定义定义文件.

这是我的项目文件结构:

// file structure
project/
    config/
        karma.conf.js
    tests/
        test-files.ts 
        ...        
    src/
        tsdefinitions.d.ts
        other-ts-files.ts
        ...
    tsconfig.json
Run Code Online (Sandbox Code Playgroud)

这里是与webpack和typescript相关的karma配置部分

webpack: {
  devtool: 'eval-source-map',
  resolve: {
    extensions: ['.webpack.js', '.web.js', '.ts', '.tsx', '.js']
  },
  module: {
    loaders: [{
      test: /\.tsx?$/,
      loader: 'awesome-typescript-loader'
    }]
  }
},
webpackMiddleware: {stats: 'errors-only'},
mime: {'text/x-typescript': ['ts','tsx']},
basePath: '../',
files: [{
  pattern: './test/**/*.ts',
  watched: false
}],
preprocessors: {
  './test/**/*.ts': ['webpack', 'sourcemap']
}
Run Code Online (Sandbox Code Playgroud)

最后是tsconfig.json

{
  "compilerOptions": {
    "removeComments": true,
    "allowSyntheticDefaultImports": true,
    "baseUrl": "./",
    "sourceMap": true,
    "noImplicitAny": true,
    "allowJs": true,
    "module": "commonjs", …
Run Code Online (Sandbox Code Playgroud)

typescript karma-runner tsconfig webpack

10
推荐指数
1
解决办法
765
查看次数

配置具有公共依赖项的TypeScript项目以构建多个纯JavaScript输出文件

我目前正在为Bot Land编写一些脚本。Bot Land是一款实时策略游戏,您无需编写代码即可通过API控制机器人,而无需使用鼠标和键盘来控制自己的单位,然后您的机器人就可以与其他机器人进行对抗。如果您熟悉SC2中的单元,则可以创建类似于眨眼潜行者,攻城坦克,医护人员和超能力的机器人。(对于软件工程师来说,这是一个非常有趣的游戏,但这超出了此问题的范围。)

机器人土地

Bot控件具有三个级别,这些级别的复杂性不断提高:默认的AI,类似于Scratch的编程语言以及减少了的称为BotLandScript的JavaScript集。尽管BotLandScript的内置编辑器是合理的,但是您必须将所有代码作为一个文件上载,并在各处使用全局顶级功能。自然,如果您的代码开始变长并且不同的机器人共享相同的功能,那么一段时间后,这将变得很痛苦。

编程环境

为了方便为多个机器人编写代码,减少使用裸露的JS编码时发生意外错误的机会,并增加击败其他玩家的机会,我设置了上述TypeScript项目,以提供一个公共库以及每个机器人的代码。当前目录结构大致类似于以下内容:

lib/ 
  bot.land.d.ts
  common.ts
BlinkStalker/
  BlinkStalker.ts
  tsconfig.json
Artillery/
  Artillery.ts
  tsconfig.json
SmartMelee/
  SmartMelee.ts
  tsconfig.json
Run Code Online (Sandbox Code Playgroud)

lib是bot之间共享的通用代码,并为(非TS)Bot Land API提供TypeScript定义。然后,每个机器人都有自己的文件夹,其中一个文件包含机器人代码,另一个文件包含样板tsconfig.json

lib/ 
  bot.land.d.ts
  common.ts
BlinkStalker/
  BlinkStalker.ts
  tsconfig.json
Artillery/
  Artillery.ts
  tsconfig.json
SmartMelee/
  SmartMelee.ts
  tsconfig.json
Run Code Online (Sandbox Code Playgroud)

tsconfig.json构建每一个组件时,它都会创建一个对应的对象bot.js,其中包含来自bot本身的转译代码以及中的所有代码common.js。此设置由于以下几个原因而欠佳:需要大量重复的样板,使其很难添加新的bot,每个bot都包含很多不必要的代码,并且需要分别构建每个bot。

但是,根据我到目前为止的研究,似乎没有一种简单的方法可以完成我想要的事情。特别是,使用new tsc -b选项和引用不起作用,因为这需要对代码进行模块化,而Bot Land需要一个文件,且所有功能都在顶层定义。

达成以下尽可能多的最佳方法是什么?

  • 不需要新的样板即可添加新的机器人(例如,tsconfig.json每个机器人不需要)
  • 使用import了常用的功能,以避免输出无用的代码,但随后...
  • 仍以Bot Land的特定格式将所有功能输出为一个文件
  • 一个生成多个输出文件的构建步骤,每个机器人一个
  • 奖励:将构建过程与VS Code集成在一起。当前有一个tasks.json用于构建每个子项目的样板。

我含糊地猜测答案可能除了之外还涉及Grunt之类的东西tsc,但是我对此一无所知。

javascript typescript tsconfig visual-studio-code

10
推荐指数
1
解决办法
316
查看次数

打字稿 npm 包 - 如何不必从“dist/”导入

我正在尝试构建一个实用程序 npm 包。在我的src目录中,我有一堆声明多个接口/类型的打字稿文件。例如在src/value-updatable.ts我有:

export interface UnaryValueUpdatable<T> {
  value: T;
  onChange: (value: T) => void;
}
Run Code Online (Sandbox Code Playgroud)

我将整个源代码编译为dist/,因为它是一个实用程序包,没有入口或主文件,我只想在其他项目中使用这些类型。我什至不确定是否需要编译,但问题仍然相同。当我在不同的项目中安装包时,我必须从dist/orsrc/而不是从包名本身导入。

例如:

import {UnaryValueUpdatable} from "my-utility-package/dist/UnaryValueUpdatable"

我必须如何配置我的包以公开这样的“漂亮”路径:import {whatever} from "my-utility-package/whatever"

包.json:

{
  "name": "my-utility-package",
  "version": "1.0.0",
  "files": [
    "dist/**/*"
  ],
  "scripts": {
    "build": "tsc"
  },
  "license": "MIT",
  "dependencies": {
    "typescript": "^3.6.4"
  }
}
Run Code Online (Sandbox Code Playgroud)

配置:

{
  "compilerOptions": {
    "target": "es5",
    "lib": ["dom", "dom.iterable", "esnext"],
    "skipLibCheck": true,
    "esModuleInterop": true,
    "allowSyntheticDefaultImports": true,
    "strict": true, …
Run Code Online (Sandbox Code Playgroud)

npm typescript tsconfig package.json

10
推荐指数
1
解决办法
1668
查看次数

tsc - 不编译别名路径

我有打字稿并使用别名。这是 tsconfig.json 的一部分

"compilerOptions": {
  "baseUrl": "./src",
   ...
},
Run Code Online (Sandbox Code Playgroud)

通过设置基本网址,我可以改变

import User from "src/models/User.model.ts"
Run Code Online (Sandbox Code Playgroud)

import User from "models/User.model.ts"
Run Code Online (Sandbox Code Playgroud)

问题是 tsc 将 src 文件夹编译为 dist 文件夹,因此用户导入路径应更改为相对路径,如下所示:

"../models/User.model.js"
Run Code Online (Sandbox Code Playgroud)

但它没有改变,所以我收到以下错误:

"models/User.model.js" not found
Run Code Online (Sandbox Code Playgroud)

我搜索了答案,但没有运气。

typescript tsc tsconfig tsconfig-paths

10
推荐指数
3
解决办法
6996
查看次数

ts-node 执行带有模块导入和模块定义的打字稿

我尝试通过打字稿初始化数据库库。

我的 ts 是这样的:

import { User, UserRole } from '../entity/User';
import crypto from 'crypto';
import {dbManager, pwhash } from '..';

async function inituser() 
{
    const user = new User();
    user.email = 'sheng.lu@mq.edu.au';
    user.own_organization = []
    user.salt = crypto.randomBytes(16).toString('hex');
    user.password = pwhash("password", user.salt);
    user.role = UserRole.admin;
    await dbManager.save(user);
    const duser = await dbManager.findOne(User);
    return duser;
}
const duser = inituser();

console.log("Loaded users: ", duser);
Run Code Online (Sandbox Code Playgroud)

当我尝试通过 ts-node 运行脚本时:

npx ts-node db/initializers/inituser.ts
Run Code Online (Sandbox Code Playgroud)

有错误:

SyntaxError: Cannot use import statement outside a module
    at …
Run Code Online (Sandbox Code Playgroud)

typescript tsconfig package.json ts-node

10
推荐指数
2
解决办法
1万
查看次数

使用 Yarn 工作区为 monorepo 配置 tsconfig.json 和 eslint

我在 TypeScript React 项目中使用 Yarn 工作区 monorepo 结构:

packages
  admin
    package.json
  user
    package.json
package.json // Workspace Root. Sets "workspaces": ["packages/*"]
Run Code Online (Sandbox Code Playgroud)

我正在努力设置eslintTypeScript。

这是我当前的.eslintrc.json文件:

在此输入图像描述

但我不太确定我需要多少个文件.eslintrctsconfig.json

选项1

每个包都会处理自己的.eslintrc.jsontypescript.json

packages/
  admin/
    package.json
    .eslintrc.json
    tsconfig.json
  user/
    package.json
    .eslintrc.json
    tsconfig.json

package.json
Run Code Online (Sandbox Code Playgroud)

选项#2

拥有根级别.eslintrc.json,并且tsconfig.json只需对内部包进行一些扩展和覆盖(如果需要)。

packages/
  admin/
    package.json
    .eslintrc.json  // Some extends/overrides
    tsconfig.json   // Some extends/overrides
  user/
    package.json
    .eslintrc.json  // Some extends/overrides
    tsconfig.json   // Some extends/overrides

package.json
.eslintrc.json
tsconfig.json
Run Code Online (Sandbox Code Playgroud)

我应该遵循这 2 个选项中的哪一个?如果我选择选项 2,我是否需要针对该级别进行任何 .eslintrc.json …

typescript reactjs eslint tsconfig yarn-workspaces

10
推荐指数
1
解决办法
1676
查看次数

“resolveJsonModule”的目的?

我引用的设置显示在下面的代码片段中

{
  "compilerOptions": {
    "resolveJsonModule": true,
  }
}

Run Code Online (Sandbox Code Playgroud)

我不太明白为什么 TS 语言工程师会为 ? 添加一个标志"resolveJsonModule"?环境支持通过import语句(或require()方法)将 JSON 解析为模块,或者环境不支持。为什么要费心额外的复杂性呢?


json typescript tsconfig

10
推荐指数
1
解决办法
1万
查看次数

在 Typescript 中导入“rootDir”之外的文件

我有一个具有以下文件结构的项目

\n
project\n|\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 App1/static/App1\n|   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 ts\n|   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 js\n|   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 tsconfig.json\n|\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 App2/static/App2\n|   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 ts\n|   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 js\n|   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 tsconfig.json\n|\n\xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 App3/static/App3\n|   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 ts\n|   \xe2\x94\x9c\xe2\x94\x80\xe2\x94\x80 js\n|   \xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 tsconfig.json\n|\n\xe2\x94\x94\xe2\x94\x80\xe2\x94\x80 tsconfig.json\n
Run Code Online (Sandbox Code Playgroud)\n

每个应用程序都需要在目录中找到已编译的 Typescript 文件ts才能进入js同一目录中的每个文件夹。为了使这项工作到目前为止,我tsconfig.json在“项目”目录的顶部找到了一个全局文件。然后,tsconfig.json在每个应用程序内部找到的文件具有以下配置:

\n
{\n    "extends": "../../../tsconfig.json",    // Path to global tsconfig.json\n    "compilerOptions": {\n        "outDir": "js",                     // Where the transpiled Javascript files go\n        "rootDir": "ts",                    // Where the Typescript files are\n    },\n}\n
Run Code Online (Sandbox Code Playgroud)\n

然后,tsc -p App1/static/App1例如,当我运行时,App1\ 文件夹内的 Typescript 文件ts将被编译并放置在该文件夹内js。到目前为止一切都还好。

\n …

typescript tsconfig

10
推荐指数
1
解决办法
6366
查看次数