Skip to content

wayou/mium

Folders and files

NameName
Last commit message
Last commit date

Latest commit

 

History

5 Commits
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 

Repository files navigation

mium

A set of react components.

Installing

$ yarn

Running the examples

$ yarn start

Material resources

Some material resources for reference.

Notes

Some notes about the problems when setup the project.

The new react hooks in TypeScript

React hooks are in proposal and there's no official definition types. So we need to use a custom one from community. Fortunatly there's a pending PR of DefinitelyTyped. See the declartion file under definition folder.

props.children

TypeScript complains there's no such children property on props.

Give the Function Component the React.SFT type will solve the problem.

interface IMyComponentProps{
    //...
}

const MyComponent: React.SFC<IMyComponentProps> = props => {
    return {props.children}
}

See more: React Stateless Functional Component with TypeScript

default value for optional props

interface IMyComponentProps {
  foo?: string;
}

const MyComponent: React.SFC<IMyComponentProps> = props => {
  return props.foo.toUpperCase();
};

MyComponent.defaultProps = {
  foo: "allo"
};

But TypeScript will continue conplains that props with default value possibly undefined. And there's an issue for the TypeScript.

Fortunatly, TypeScript 3 comes a solution for this (see the Support for defaultProps in JSX section):

interface IMyComponentProps {
  foo?: string;
}

function MyComponent({ foo = "allo" }: IMyComponentProps) {
  return foo.toUpperCase();
}

Parcel dones't respect the TypeScript error

It just ignore and compile successfully. Related issue: 🐛 Not displaying or honoring Typescript errors

So we need to using a TypeScript plugin for parcel parcel-plugin-typescript. But seems not working with latest parcel, see the issue here and here

tslint and prettier conflicts