Learning TypeScript

import * as React from "react"
import * as ReactDOM from "react-dom"
import { Hello, HelloStyled, HelloTriangle, HelloProps } from "./components/Hello"
import { Manager, Target, Popper, Arrow } from 'react-popper'
const mainStyle = {
display: 'flex',
// alignItems: 'center',
// justifyContent: 'center',
margin: '100px'
}
type Main = (children?: any) => JSX.Elementconst Main: Main = ({children}) =>
<div style={mainStyle}>{children}</div>
//...additional code not shown
TS2322: Type '{ style: { display: string; alignItems: string; justifyContent: string; margin: string; }; childr...' is not assignable to type 'DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>'.
Type '{ style: { display: string; alignItems: string; justifyContent: string; margin: string; }; childr...' is not assignable to type 'HTMLAttributes<HTMLDivElement>'.
Types of property 'style' are incompatible.
Type '{ display: string; alignItems: string; justifyContent: string; margin: string; }' is not assignable to type 'CSSProperties'.
Type '{ display: string; alignItems: string; justifyContent: string; margin: string; }' is not assignable to type 'CSSProperties'.
// This interface is not complete. Only properties accepting
// unitless numbers are listed here (see CSSProperty.js in React)
interface CSSProperties {
/**
* Aligns a flex container's lines within the flex container when there is extra space in the cross-axis, similar to how justify-content aligns individual items within the main-axis.
*/
alignContent?: CSSWideKeyword | "flex-start" | "flex-end" | "center" | "space-between" | "space-around" | "stretch";

/**
* Sets the default alignment in the cross axis for all of the flex container's items, including anonymous flex items, similarly to how justify-content aligns items along the main axis.
*/
alignItems?: CSSWideKeyword | "flex-start" | "flex-end" | "center" | "baseline" | "stretch";
const mainStyle: CSSProperties = {
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
margin: '100px'
}

--

--

Love podcasts or audiobooks? Learn on the go with our new app.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store