Armen's questions

2个问题：

1：为什么 ts 抱怨${R[K]}（不可分配给类型 string | ....）以及如何修复它

2：如何在没有显式类型重影的情况下做到同样的事情？recordWithRoot as ...

const getRecordWithRoot = <T extends string, R extends {}>(
  root: T,
  record: R
) => {
  const recordWithRoot = {
    ROOT: root,
  };
  for (const key in record) {
    Object.defineProperty(recordWithRoot, key, {
      get: () => {
        return root + record[key];
      },
    });
  }

  return recordWithRoot as { [K in keyof R]: `${T}${R[K]}` } & { ROOT: T };
};

const some = getRecordWithRoot(`core/A` as const, {
  get A() {
    return `/a` as const;
  },
  get B() {
    return `/b` as const;
  },
});

// result
// ROOT => core/A
// A => core/A/a
// B core/A/b

export default async function Home() {
  const res = await method();
  return <main></main>;
}

const method = async () => {
  const { cookies } = await import("next/headers");
  const value = cookies().get("some-cookie");

  const res = await fetch("/somewhere", {
    headers: {
      Cookie: `${value}`,
    },
  });

  // в res новые куки

  //как добавить новые куки к ответу от сервера next????

  return res;
};

为什么下面的例子this有一个类型？any

const x = {
  name: 'x',
  getX() {
    // this почему то any
    this.name;
  },
};

该项目是通过nest cli生成的nest new

封装版本：

"@nestjs/common": "^10.0.0",
"@nestjs/config": "^3.1.1",
"@nestjs/core": "^10.0.0",

tsconfig.json

{
  "compilerOptions": {
    "module": "commonjs",
    "declaration": true,
    "removeComments": true,
    "emitDecoratorMetadata": true,
    "experimentalDecorators": true,
    "allowSyntheticDefaultImports": true,
    "target": "ES2021",
    "sourceMap": true,
    "outDir": "./dist",
    "baseUrl": "./",
    "incremental": true,
    "skipLibCheck": true,
    "strictNullChecks": false,
    "noImplicitAny": false,
    "strictBindCallApply": false,
    "forceConsistentCasingInFileNames": false,
    "noFallthroughCasesInSwitch": false,
    "paths": {
      "@/*": ["./src/*"]
    }
  }
}

我将容器的端口设置为 3002，由于某种原因，我从 pgadmin 连接到端口 5432（当我尝试连接到 3002 时，它也会抛出错误）

配置主要是从 elestio/pgadmin 码头复制的

version: ' v2.23.3-desktop.2'
services:
  xy:
    image: postgres:latest
    restart: always
    environment:
      POSTGRES_USER: postgres
      POSTGRES_PASSWORD: postgres
      PGDATA: /var/lib/postgresql/data
    volumes:
      - ./data:/var/lib/postgresql/data
    ports:
      - '3002:5432'

  pgadmin4:
    image: elestio/pgadmin:latest
    restart: always
    environment:
      PGADMIN_DEFAULT_EMAIL: [email protected]
      PGADMIN_DEFAULT_PASSWORD: [email protected]
      PGADMIN_LISTEN_PORT: 8080
    ports:
      - '8080:8080'
    volumes:
      - ./servers.json:/pgadmin4/servers.json

端口不应该是3002吗？？？

问题：如何创建变量

• 数据库端口

在向上调用时定义，未指定 --env-file

调用时的选项有效：

docker-compose -f [file].yml --env-file ../.env up

像这样在 [file].yml 中不再有效： (.env 找不到) (finds) 从当前的答案我意识到这只是从 .env 复制变量（将在图像中可用），但不提供访问.yml 本身

env_file:
  - ../.env

完整文件：

version: 'v2.23.3-desktop.2'

services:
  postgres:
    image: postgres:${SOFTWARE_VERSION_TAG}
    restart: always
    env_file:
      - ../.env
    ports:
      - '${DB_PORT}:5432'

interface A {
  name: string;
  age: number;
}

type B = A | Record<keyof A, null>;

在第一个键的值之后，ts 确定正在使用哪个接口，这是合乎逻辑的，但是我们如何才能使混合版本也工作呢？

const obj: B = {
  age: null,
  name: 'some'
}

Type 'string' is not assignable to type 'null'

理论上，他应该发誓unknownLengthResArray: []，该方法声明这是一个对象数组，应该有key

const args = {
    unknownLengthResArray: [],
    t,
    keyName: 'service',
    namespace: 'services'
}

const sectionBody = unknownLengthDatagridRowSectionBody(args)


interface IInnerObject {
    key: string;
}

type TArgsType = {
    unknownLengthResArray?: IInnerObject[];
    t: any;
    keyName: string;
    namespace: string;
}

type TReturnType = Dictionary<string>[];

export const unknownLengthDatagridRowSectionBody = ({
    unknownLengthResArray,
    t,
    keyName,
    namespace
}: TArgsType): TReturnType => {
    const sectionBody = []
    if(unknownLengthResArray?.length) {
        let section = {}
        let denominator = 3
        unknownLengthResArray.forEach(({ key }, i) => {
            const sectionInfo = {
                [`${t(keyName)} ${i+1}`]: t(`${namespace}:${key}`)
            }
            while(i < denominator){
                section = {...section, ...sectionInfo}
                return
            }
            sectionBody.push(section)
            section = {}
            denominator += denominator
        })
    }
    return sectionBody
}

这是一个需要指定返回类型的函数

export const getDashboard = (date: TRange): any => {
    return Promise.all([
        StatisticService.getCustomerChart(date),
        StatisticService.getOrderChart(date),
        StatisticService.getPartnerChart(date),
        StatisticService.getWorkerChart(date),
    ])
};

这是从中获取方法的类

export class StatisticService {

    static getCustomerChart(date: TRange): TResponseMany<IStatistic> {
        const queryParams = getQueryParams(date);

        return customFetch(URLS.STATISTICS.CUSTOMER, queryParams);
    }

    static getOrderChart(date: TRange): TResponseMany<IStatistic> {
        const queryParams = getQueryParams(date);

        return customFetch(URLS.STATISTICS.ORDER, queryParams);
    }

    static getPartnerChart(date: TRange): TResponseMany<IStatistic> {
        const queryParams = getQueryParams(date);

        return customFetch(URLS.STATISTICS.PARTNER, queryParams);
    }

    static getWorkerChart(date: TRange): TResponseMany<IStatistic> {
        const queryParams = getQueryParams(date);

        return customFetch(URLS.STATISTICS.WORKER, queryParams);
    }
}

和更多接口

interface IResponseMany<T> extends IResponseDetails {
    body: T[];
}

export type TResponseMany<T> = Promise<IResponseMany<T>>;

export interface IStatistic {
    creationDate: string;
    count: number;
}

标记了一个我无法理解要放置什么类型的地方，因为在 Promise.all 类型中有几个可能的返回选项 TUser 或 TAddress 或同时返回两者或 null

我很乐意对代码发表评论

    type TUser = {
        name: 'a',
        surname: 'b'
    }

    type TAddress = {
        address: 'x'
    }
    const getList = async (resource: string, params: GetListParams) => {
    const finishedResult = {
        data: [],
        total: 0,
    };
    const {body: { result, totalCount }} = await CustomerService.getCustomerPage()
    finishedResult.total = totalCount
    //вот тут каким будет возвращаемый тип?
    const promises = result.map(({addressId, userId}):какой возвращаемый тип? => {
        if(!addressId && !userId) {
            return null
        }
        if(addressId && userId) {
            return Promise.all([
                UserService.getUserById(userId),
                AddressService.getAddressById(addressId)
            ])
        }
        if(!addressId) {
            return Promise.all([UserService.getUserById(userId)])
        }
        if(!userId) {
            return Promise.all([AddressService.getAddressById(addressId)])
        }
    })
    promises.filter(e => e !== null)
    //вид данных внизу
    const res = await Promise.all(promises)
    res.forEach(arr => {
        let finalRes = {}
        arr.forEach(({status, body}) => {
            if(status === 'success'){
                finalRes = {...finalRes,...body}
            }
        })
        if(isObjectWithProperties(finalRes)){
            finishedResult.data.push(finalRes)
        }
    })
    return Promise.resolve(finishedResult);
}

资源中的数据

const res = [
[
    {
        status: '',
        body: {}
    },
    {
        status: '',
        body: {}
    },
],
[
    {
        status: '',
        body: {}
    },
    {
        status: '',
        body: {}
    },
],

]

我可以以某种方式获得带有原始空格的输出文本和 -

const translateHelper = (f,text) => {
    return text.split(/[\s-]]/).map(e => {
        const str = e[0].toLowerCase() + ' ' + e.slice(1)
        //функция f изменяет текст но на выходе мне нужнен измененный текст с пробелами и с -
        return f(str)
    }).join('')
}

有这样的“anno bem ci drag-error”我需要将每个单词发送到 f 并在输出时使用空格和 - 'alfa beta cxc delta-enum'

我之前没有接触过eslint...

我可以在 eslintconfig 中添加设置吗？

"eslintConfig": {
    "extends": [
      "react-app",
      "react-app/jest"
    ]
  },

或者您需要创建一个单独的 .eslintrc 并在那里添加设置

另一个问题是 .eslintrc 是如何被编译器定位和运行的？

组件本身

import React from 'react';
import styles from './ImgCreator.module.scss';

interface IImgProps{
    imgArr:Array<string>,
}

const getData = (data:Array<string>) => {
        let arr = data.map(e => {
            //каждый раз пробежатся по data нет смысла данные не меняются
            console.log(`maping`);
            return (
                <React.Fragment key={e}>
                    {/* <img className={styles.img} src={e} alt={e}/> */}
                    <span style={{color:'red'}}>{Math.random()}</span>
                </React.Fragment>
            )
        })
        return arr
    }

export const ImgCreator:React.FC<IImgProps> =({imgArr}) => {
    //тут как то нужно сохранить arr чтобы при следующем рендере getData не сработал
    const arr = getData(imgArr)
    return (
        <div className={styles.root}>
            {arr}
        </div>
    )
}

怎么称呼

export const MyTabs = () => {
    const imgArr = [
      pictures.rect5_1,
      pictures.rect5_2,
      pictures.rect5_3,
      pictures.rect5_4,
      pictures.rect5_5,
      pictures.rect5_6,
    ]
  return (
    <div className={styles.root}>
         {imgArr.map((e) => {
           return <TabPanel key={e.replace(/\s/g,'')}>
           <ImgCreator imgArr={imgArr}/>
         </TabPanel>
         })}
    </div>
  )
}

由于某种原因，我有 svg 标签的高度和宽度 150h * 300w 但图标19*19
如何通过 css 做这样的事情：

svg{
  width: inner-content-width;
  height: inner-content-height;
}

当然，我可以像这样设置 svg，但这是不可取的，我有不同大小的 svg

svg{
  width: 19px;
  height: 19px;
}

svg 示例

<svg id="search" width="19" height="19" viewBox="0 0 19 19" fill="none" 

xmlns="http://www.w3.org/2000/svg">
<path d="M19 17L13.846 11.846C14.7988 10.3979 15.1805 8.64774 14.917 6.93442C14.6536 5.22111 13.7638 3.66648 12.4199 2.57154C11.076 1.47659 9.37369 0.919227 7.64247 1.00735C5.91125 1.09547 4.27431 1.82281 3.04857 3.04855C1.82283 4.27429 1.09549 5.91123 1.00737 7.64245C0.91925 9.37366 1.47662 11.076 2.57156 12.4199C3.6665 13.7637 5.22113 14.6535 6.93445 14.917C8.64777 15.1804 10.3979 14.7988 11.846 13.846L17 19L19 17ZM3 7.99998C3 5.24298 5.243 2.99998 8 2.99998C10.757 2.99998 13 5.24298 13 7.99998C13 10.757 10.757 13 8 13C5.243 13 3 10.757 3 7.99998Z" fill="white"/>
</svg>

是否有可能以某种方式将容器中的函数传递给按钮

export const PopupContainer = ({children}) => {
const [isOpen, setIsOpen] = useState(false)

const closePopup = () => {
    setIsOpen(false);
  }

  const openPopup = () => {
    setIsOpen(true);
  }

return (
        {children}
);
}

执行

<PopupContainer>
    <button onClick={openPopup}></button>
</PopupContainer>

当然，结果我得到了一个被点击的复选框的名称数组，但是我不明白如何根据点击的原理来控制它们 -> 调度 -> 用点击的复选框重绘

//компонент
export const Icons = () => {
const dispatch = useDispatch()
const checkedArray = useSelector(state => state.iconForm)
console.log(checkedArray);
const changeHandler = (e) => {
    if(!e.target.checked){
        dispatch({type:UNCHECK,payload:e.target.name})
        return
    }
    dispatch({type:CHECK,payload:e.target.name})
}

const submitHandler = (e) => {
    e.preventDefault()
}
return (
    <div className={styles.iconsForm}>
        <form>
            <label className="label" onChange={changeHandler}>
                <input name="111" type="checkbox"/>
            </label>
            <label className="label" onChange={changeHandler}>
                <input name="222" type="checkbox"/>
            </label>
            <label className="label" onChange={changeHandler}>
                <input name="333" type="checkbox"/>
            </label>
            <button onClick={submitHandler}>abcd</button>
        </form>
    </div>
)
}



//редюсер
const initialState = {
activeIcons:[],
}
export const iconFormReducer = (state = initialState, action) => {
switch(action.type){
    case CHECK:
        return {
            ...state,
            activeIcons:[...state.activeIcons,action.payload]
        }
    case UNCHECK:
        return {
            ...state,
            activeIcons:state.activeIcons.filter(e => e != action.payload)
        }
    default:
        return state
}
}

export const CHECK = 'APP/CHECK'
export const UNCHECK = 'APP/UNCHECK'

1.如果您创建一个新用户，是否所有相同的程序都具有干净的设置，并且他不会以任何方式与同一台计算机上的另一个用户关联？2.在ubuntu中，除了通过命令行，能不能安装一些东西（比如windows.exe）？

这是一项任务的答案，我不确定变量作业中带有 * 的行在添加时是否包含一个承诺，就我而言，为了使 fetch 函数的结果完全在作业中，它必须在await之前

async function getUsers(names) {
  let jobs = [];

  for(let name of names) {
    let job = fetch(`https://api.github.com/users/${name}`).then(
      successResponse => {
        if (successResponse.status != 200) {
          return null;
        } else {
          return successResponse.json();
        }
      },
      failResponse => {
        return null;
      }
    );
    jobs.push(job); //*
  }

  let results = await Promise.all(jobs);

  return results;
}

getUsers([1,2,3,4,5]).then(n => console.log(n))

我只是想知道这是否可能，因为只要有x，那么d它也在环境中，还是х必须引用d它才能生存？

那不是这样的

let a = () => {
  let d = 5
  return () => d
}
let x = a()
console.log(x())

但怎么会

let a = () => {
  let d = 5
  return () => {}
}
let x = a()
console.log(x().`any Obj.d` или x.`anyObj.d`);

如果有视觉滚动（有滚动条）在我的情况下没有滚动条，它就可以工作

当鼠标滚轮移动时，我需要调度一个事件

document.addEventListener('scroll',e => {
    console.log(`scroll`)
})

如果我理解正确，UI 的任何更改都应该通过状态发生（状态已更改，UI 已重绘）...有一个汉堡菜单，单击时会从 X 更改为 -- 如何在此处使用状态? 或者根本没有使用状态的意义？

const Burger = (props) => {
const [state, setState] = useState('')
const toggleHandler = (event) => {
    event.target.classList.toggle('active')
}
return (
    <div 
    className="my"
    onClick={toggleHandler}
    ></div>
)
}

这是正确的解决方案还是不值得？

const Burger = (props) => {
const [isPressed, setPressed] = useState(false)
const toggleHandler = (event) => {
    setPressed(!isPressed)
    if(isPressed){
        event.target.classList.add('active')
    }
    else{
        event.target.classList.remove('active')
    }
}
return (
    <div 
    className="my"
    onClick={toggleHandler}
    ></div>
)

}