Typescript – How to fix errors?

How to check TypeScript in project folders?

$ yarn tsc

Remember to exclude node_modules folders by configuring

{
  "compilerOptions": {
      ...
      "skipLibCheck": true,
  },
  ...
}

Could not find a declaration file for module ‘third-party-library-name’. ‘third-party-library-name.js’ has an ‘any’ type.

• Create “types\third-party-library-name\index.d.ts” file

declare module 'third-party-library-name';

• Edit tsconfig.json

"compilerOptions": {
    ...
    "typeRoots": ["./types", "node_modules/@types"]
},
"exclude": [
    ...
    "types"
]

How to define type for react-native style?

• Use StyleProp<ViewStyle>, StyleProp<TextStyle>, StyleProp<ImageStyle>

import React from 'react';
import { View, StyleProp, ViewStyle } from 'react-native';

interface Props {
  style: StyleProp<ViewStyle>;
}

const Empty = ({ style }: Props) => {
  return <View style={style} />;
};

export default Empty;

How to define type for react-native children prop?

...
const MyComponent: React.FC = ({ children }) => {
  return <StyledText>{children}</StyledText>;
};

export default MyComponent;

How to define type for styled-components?

interface StyledProps {
  readonly isAvailable: boolean;
}

const StyledContainer = styled(Card).attrs(() => ({}))<StyledProps>`
  border-radius: 6px;
  padding: 10px 10px;
  border-bottom-width: 4px;
  border-bottom-color: ${(props) =>
    props.isAvailable ? '#c0e43e' : '#be1e2b'};
  background-color: #f9f9fc;
`;