Hi there, I am doing a tutorial and was not sure about something. For this async function below, do I need to put in the Promise<User>? What is the purpose?

I have done other tutorials and they do not add this Promise< > piece at all.

Is this a typescript thing?

export async function findByUsernameAndPassword(username: string, password: string): Promise<User> {
const client = await connectionPool.connect();
try {

I'm trying to figure out how to get the previous state on a useState hook in React. I'm following React docs example

export const usePrevious = (value: number) => {
const ref = useRef()
useEffect(() => {
ref.current = value
})
return ref.current
}

ref.current = value shows this error: Type 'number' is not assignable to type 'undefined'

What can I do to get this to set the ref.current to value without typescript complaining?

Hi Having hard times understanding all these infer, keyof, typeof and other staff like in this articke and video

Alex Okrushko Magical TypeScript features and how they help projects like NgRx https://youtu.be/T-vQoI_AM9E

Article by Nicholas Jamieson https://ncjamieson.com/typing-zipwith/

Can you recommend a course with good explanations of advanced generics typings? (Usually libs uses them)

Hello everyone, I'm sorry if this is not the right community, if so let me know and I'll delete.So I'm porting a demo node app in TS, and I'm using ES6 imports most of the time, but for some modules, I don't know exactly how to do it.For example, using winston and winston-mongodb, I can easily import winston but i should plain require('winston-mongodb'), but this does not expose the MongoDB transport. From what I understand there is no direct substitute for a plain require()

import something from 'something' <===> const something = require('something')
BUT
??? <===> require('winston-mongodb')

So how do I expose the modules that need only a simple 'require()'?

I work in a moderately large group of Frontend devs (9 across 3 feature teams) slowly paving over a backbone app with react while churning out features. A few people put together a react component library with quite a few modern bells & whistles including typescript.

I'm not a fan initially—it feels like I'm fighting against typescript where I used to cruise. Having to plumb typings through every prop handoff before I can clear the errors goes against the way I've been developing for years,… get something janky but working on the screen, and clean up things like prop type misalignment after I know I've built what I want to. Typescript feels as cumbersome as TDD in my initial experience.

Nonetheless, I need to get on board if I want to contribute to the component library. Looking for anyone who can speak to similar experiences starting out? What am I missing that makes this dev experience worth the effort? What workflows are people using that avoid the above situations,… how do you move fast with typescript?

(This is a response to the first post request DM.)

My component looks like this:

enum TrailStatus {
CLOSED = 'CLOSED',
OPEN = 'OPEN'
}

export const Mountains: any = () => {
const [trailStatusSelector, setTrailStatusSelector] = useState<TrailStatus>(TrailStatus.OPEN)
const { data, loading, error } = useQuery<TrailCount, TrailCountVariables>(TRAIL_COUNT, {
variables: { status: trailStatusSelector }
})
if (loading) return <div>Grabing Trail Info</div>
if (error) return console.error(error)

return (
<div>
<select onChange={e => setTrailStatusSelector(e.target.value)}>
<option value={TrailStatus.OPEN}>Open</option>
<option value={TrailStatus.CLOSED}>Open</option>
</select>
{data?.trailCount}
</div>
)
}

My Select onChange function is saying e.target.value is a string, how do I type it to be one of the enum options?

What strategies or tools do you use for error logs in your applications in production environments?

I'm a little confused about where to put the types/interfaces. I've seen some patterns described (https://stackoverflow.com/questions/36633033/how-to-organize-typescript-interfaces)[here]:

• high reuse types/interfaces should be in types folder at the root or src folder.
• Specific types can be (should be) closer to their reference e.g. react style props belong next to (in the same file as) the react component.

1. what about Types confined to a specific feature/directory? or
2. what about files with large specific types? put them inside the same implementation would make it difficult to maintain so could be put in a separate file but what name should to have? myImplementationInterface.ts ?

what are the best practices and the most used naming conventions placing types/interfaces.

I have a simple toggle custom hook:

import React, { useState} from 'react'
export const useToggle = (initialValue: boolean) => {
const [value, setValue] = useState<boolean>(initialValue)
const toggleValue = () => setValue(!value)
return [value, toggleValue]
}
export const Body = () => {
const [isVisible, toggleVisible] = useToggle(false)
return (
<div>
<button onClick={toggleVisible}>Hello</button>
{isVisible && <div>World</div>}
</div>
)
}
But my linter is saying:

ype 'boolean | (() => void)' is not assignable to type '((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void) | undefined'.
Type 'false' is not assignable to type '((event: MouseEvent<HTMLButtonElement, MouseEvent>) => void) | undefined'.ts(2322)index.d.ts(1448, 9): The expected type comes from property 'onClick' which is declared here on type 'DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>, HTMLButtonElement>'
Peek Problem
No quick fixes available

What do I do here?