小编Wil*_*llD的帖子

尝试在现有的 vite（vue 3，typescript）项目上设置 vitest。

我的 vite.config.ts 看起来像这样：

import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

export default defineConfig({
  test: {
    globals: true,
    environment: 'jsdom',
  },
  plugins: [vue()],
});

但在 VS 代码中它会抱怨：

悬停时我看到：

类型参数 '{ test: { globals: boolean; 环境：字符串；}; 插件：插件[]；}' 不可分配给“UserConfigExport”类型的参数。对象文字只能指定已知属性，并且“UserConfigExport”类型中不存在“test”。ts(2345)

如果我改变这一行，我可以让它消失：

import { defineConfig } from 'vite';

到：

import { defineConfig } from 'vitest/config';

但为什么？这是怎么回事？为什么我必须从 vitest 导入 DefineConfig 才能使其支持测试属性？

让我们假设我有这样的事情:

if (document.getElementById('div1').innerHTML &&
    document.getElementById('div2').innerHTML &&
    document.getElementById('div3').innerHTML &&
    document.getElementById('div4').innerHTML &&
    document.getElementById('div5').innerHTML &&
    ...
    document.getElementById('div100').innerHTML)

显然,输入和维护像这样的大条件语句是有问题的.

我想要一些解决方案,如:

var conditional = "";
for(var i = 1; i <= 100; i++){
  conditional += "document.getElementById('div" + i +"').innerHTML";
  if(i < 100) {
    conditional += " && ";
  }
}
if(interpretStringAsJSExpression(conditional)){
    console.log("all my divs have content");
}

这样的事情在JavaScript中是可能的吗？

已经提交了很好的答案,我相信我和其他人都会从中受益.但是,纯粹来自好奇的地方,是否可以在字符串中存储和运行JavaScript表达式或命令？

就像我在我的例子中提出的那样: interpretStringAsJSExpression(conditional)

我注意到 netflix 采用了一种方法来阻止用户在其基于浏览器的应用程序中录制甚至截取视频播放的静态屏幕截图。

如果您在 netflix（在我的情况下是 Windows 10 和 Chrome）上观看视频，如果您开始录制或截屏，视频将变成黑屏。

什么技术在这里发挥作用。如果检测到尝试截图，是否有 windows/chrome API 告诉屏幕上的内容隐藏？

Web 开发人员是否可以将此功能添加到他们的产品中？

和：

const myArray = [0,4,2];
myArray.at(-1);

我在下面收到以下错误.at

类型“number[]”上不存在属性“at”。ts (2339)

这是怎么回事，为什么不起作用Array.at()？我是否必须设置某种 browserlist 值才能让 TS 知道我希望能够使用此（最近指定的）功能？

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/at

这是我的 tsconfig.json

{
  "compilerOptions": {
    "target": "esnext",
    "useDefineForClassFields": true,
    "module": "esnext",
    "moduleResolution": "node",
    "strict": true,
    "jsx": "preserve",
    "sourceMap": true,
    "resolveJsonModule": true,
    "esModuleInterop": true,
    "lib": ["esnext", "dom"]
  },
  "include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue"]
}

数据源有一个没有偏移量的 ISO-8601 日期时间字段。

例子： 2019-07-09T18:45

但是，我知道有问题的时间被理解为时America/Chicago区。

如何在 UTC 中获得与该时间等效的 Luxon DateTime 对象？

我可以做 DateTime.fromISO('2019-07-09T18:45').plus({hours: 5})......但这只会在夏令时的半年（比如现在）有效。否则偏移量将是.plus({hours: 6})

Luxon 是否有一个日期感知（因此 DST 感知）的方法来从特定的分区本地时间转换为 UTC？

请考虑以下在 Windows 上的 Chrome 浏览器中显示的示例。

<input type="range">

它产生一个范围滑块。我发现如果我首先使用鼠标

1. 鼠标向下稍微低于范围滑块
2. 仍然按住鼠标按钮，将鼠标移过范围滑块到其顶部
3. 释放鼠标

我可以使范围滑块停止按预期运行。它显示一个“有一条线穿过的圆圈”光标，并不允许我向右或向左滑动手柄。

我的理论是，我采取的第一个操作“选择”或“突出显示”范围选择器，就像在浏览器中选择文本的一部分一样，然后我随后尝试操作范围滑块被解释为我想要拖动选择。

有什么解决办法或方法可以避免这个错误吗？

到目前为止，user-select: none;在input元素上设置 css 等尝试都不起作用，调用e.preventDefault()事件也不起作用drag。

看GIF效果：

我试图弄清楚如何在 vue 3 typescript 项目中输入 vuex 模块。这方面缺乏官方文档。

假设我有一个这样的项目：

import { createStore, useStore as baseUseStore, Store } from 'vuex';
import { InjectionKey } from 'vue';

interface FruitState  {
    apple: boolean,
    peach: boolean,
    plum: boolean
}

const FruitModule = {
    namespaced: true,
    state: (): FruitState => ({
      apple: true,
      peach: false,
      plum: true
    }),
    mutations: {},
    action: {}
}


export interface State {
    foo: string;
  }
  
  export const key: InjectionKey<Store<State>> = Symbol();
  
  export const store = createStore<State>({
      modules: {
        fruit: fruitModule
      }, …

我需要测试以查看三个布尔值中是否有两个为真。

像这样的东西：

if ((a && b && !c) || (a && !b && c) || (!a && b && c)) {
  // success
}

这是最直接的方法吗？有谁知道快捷方式/速记？

我有一个string.replace()使用正则表达式lookbehind 的函数。

myString.replace(/(?<!\\)'/gi, '"')

不过，我发现目前该功能的浏览器支持有限。 https://caniuse.com/#feat=js-regexp-lookbehind

有没有办法使用javascript来测试用户的浏览器对此功能的支持？

类似于CSS.supports()函数之类的东西？

想象一下，我有一个应用程序，它有 10 个组件，这些组件在某些方面相似，但包含不同的内容和一些功能差异。但它们都接收相同的 3 个 props 作为基础（换句话说，它们可能定义更多，但都定义至少 3 个特定的 props），它们也都有 1 个共同的发射。它们还调用const store = useStore()并具有相同的计算属性，从 vuex 存储中提取值。

有没有一种方法可以创建可组合的或其他策略，让这些组件组合或继承当前在 src 中重复的这些通用代码行。

例子：

//component 1
<script lang="ts" setup>

import { useStore } from 'vuex';

const store = useStore();

const props = defineProps<{
  a: number;
  b: string;
  c: boolean;
  uniqueToComp1: string;
}>();

const foo = computed(() => store.state.bar[props.a]);
const uniqueConstForComp1 = computed(() => props.a + Math.random());

const emit = defineEmits<{
  (e: 'exit'): void;
}>();

</script>

另一个例子：

//component 2
<script lang="ts" setup> …