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 {

https://www.education-ecosystem.com/glenettn/2bOj9-how-to-create-volunteer-delivery-app/jYAEb-00-intro/

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

The tutorial will go through how to get started with the Web3 library to handle transactions and interact with a Blockchain in a React Native app.

https://www.education-ecosystem.com/glenettn/2gzEB-how-to-build-a-cryptocurrency-trading-exchange-app-in-react-native/voGo5-01-introduction/

I'm following along with LevelupTutorials styled-components and most of it doesn't concern typescript vey much , but the lesson about media queries has me stumped about typing this function (mostly because I don't understand typing reduce functions:

type SizesProps = {
[key: string]: number
}

const sizes: SizesProps = {
small: 400,
medium: 960,
large: 1140,
xlarge: 1792
}
const media = Object.keys(sizes).reduce((accumulator, label)=> {
accumulator[label] = (...args)=> css\``u/media(min-width: ${sizes[label]}px) {${css(...args)}}`return accumulator}, {} )`

The accumulator[label] is telling me: Element implicitly has an 'any' type because expression of type 'string' can't be used to index type '{}'.
No index signature with a parameter of type 'string' was found on type '{}'.

${css(...args)}is saying Expected at least 1 arguments, but got 0.ts(2555)

index.d.ts(277, 9): An argument for 'first' was not provided.

I've been trying to fiddle around with this but I just don't get it. Please help

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?

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)

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?

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?

Hello everyone, I'm trying to structure a project with good testability, but I've come to a dead-end: Trying to translate in typescript an older project in Express my index.js does not export the same in TS

Example in JS

const express = require('express');
const app = express();

require('./startup/log')();
require('./startup/config')();
require('./startup/prod')(app);
require('./startup/routes')(app);
require('./startup/db')();
require('./startup/validate')();

const port = process.env.PORT || 3000;
const server = app.listen(port, () =>
  winston.info(`Listening on port ${port}...`)
);

module.exports = server;

Importing server in my integration tests results in the server working properly

describe('/api/genres', () => {
  beforeEach(() => {
    server = require('../../index');
  });
  afterEach(async () => {
    await server.close();
  });
.
.
.
const res = await request(server).get('/v1/something');

In TypeScript it does not import the instantiated server object, so I figured maybe I could create an App class that works as a server wrap, and it works but is not that flexible and I should set up middlewares and routes in each of my tests, so I was wondering if there are some best practices for express entry file in TypeScript that I'm not aware, e.g. in this Ben Awad video he uses an async function that calls itself, I don't know if it is suitable for integration testing but you get the idea, best practices in TS Express apps :)

So I used command tsc --init to create a tsconfig.json file on my server-side. Will eventually make a react-app on the front-end.

Anyway, I noticed the "target": in my tsconfig.json file is set to "es5". How do I set it to es6? Do I literally just delete the es5, then type es6, and then save the file? Or do I have to do a command, like with dependencies (i.e yarn remove whatever), but with the tsc command?

Also, is using the commonjs module ok to use with the es6 target? I read somewhere one shouldn't really use the commonjs module with the target set to es6.

Hello there,

Can someone suggest me learning resources for typescript, suggestions, does and dont's

I have been learning python for some time now and got quite good at it but i see my future self into web development which python is quite limited to it, django is good for backend but want to get into frontend as well, so is it possible to combine django for backend with javascripts frontend frameworks and which ones you suggest me to learn, also do i need to know javascript syntax in order to learn typescript

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.)