Easy Steps: TypeScripts

TypeScripts

The quickest way to start a React/TypeScript app is by using create-react-app with the TypeScript template.

npx create-react-app my-new-app --typescript
or
npx create-react-app my-app --template typescript

Third-party Libraries

yarn add @types/<package-name>

npm install @types/<package-name>

Note -
npx is a command released with npm 5.2 which allows you to execute CLI commands and executables hosted by the registry — meaning global installations are no longer required.

Home.tsx

import React from 'react'
// Written as a function declaration
function Heading(): React.ReactNode {
return <h1>My Website Heading</h1>
}

// Written as a function expression
const OtherHeading: React.FC = () => <h1>My Website Heading</h1>

Happy Coding :)
............................................................................................................................................................................................................................................
Props
The next core concept we’ll cover is props. You can define your props using either an interface or a type. Let’s look at another example.

import React from 'react'
interface Props {
name: string;
color: string;
}

type OtherProps = {
name: string;
color: string;
}

// Notice here we're using the function declaration with the interface Props
function Heading({ name, color }: Props): React.ReactNode {
return <h1>My Website Heading</h1>
}

// Notice here we're using the function expression with the type OtherProps
const OtherHeading: React.FC<OtherProps> = ({ name, color }) =>
<h1>My Website Heading</h1>

Happy Coding :)

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';

export default function App() {
return (
<View style={styles.container}>
<Text>Open up App.tsx to start working on your app!</Text>
</View>
);
}

const styles = StyleSheet.create({
container: {
flex: 1,
backgroundColor: '#fff',
alignItems: 'center',
justifyContent: 'center',
},
});

Reuseable Component

import React from 'react';

import { View, Text, StyleSheet } from 'react-native';

interface Props {

}

export const Center: React.FC<Props> = ({ children }) => {

return (

{children}

</View>

)

}

const styles = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center'

}

})

...............................................

import React from 'react';

import { View, Text, StyleSheet } from 'react-native';

import { Center } from './src/components/Center'

function App() {

return (

<Text> Hello Tsx Example</Text>

</Center>

)

}

export default App

const style = StyleSheet.create({

container: {

flex: 1,

justifyContent: 'center',

alignItems: 'center',

}

})
Happy Coding :)

Example #2 [ Functional Component ]

import * as React from 'react';

interface IProps {
name?: string;
}

const Header: React.FC<IProps> = (props: IProps) => (
<h1>Hello, {props.name}! Welcome to React and TypeScript.</h1>
);

Header.defaultProps = {
name: 'world',
};

export default Header;

name?. We will make the name optional, so we indicate that with a ?. Marking a key as optional means that its type can be either string | undefined.

React.FunctionComponent
or
SFC
or
React.FC<Props>

Happy Coding :)

.................................................................................................................................................................................................................................
Example #3

import * as React from 'react';

interface IProps {
countBy?: number;
}

interface IState {
count: number;
}

class App extends React.Component<IProps, IState> {
public static defaultProps: Partial<IProps> = {
countBy: 1,
};

public state: IState = {
count: 0,
};

public increase = () => {
const countBy: number = this.props.countBy!;
const count = this.state.count + countBy;
this.setState({ count });
};

public render() {
return (
<div>
<p>My favorite number is {this.state.count}</p>
<button onClick={this.increase}>Increase</button>
</div>
);
}
}

export default App;

Note
The increase function is used to increment the counter. The countBy is extracted as
const countBy: number = this.props.countBy!,
The exclamation mark ! indicates to TypeScript that we know the value will exist and to not throw a potential undefined error.
Finally we create the HTML to wire up the component.

Happy Coding :)

Example #4

import React from 'react'

type CardProps = {
title?: string,
paragraph?: string // the paragraph is optional
}
// No need to define the defaultProps property

const App: React.FC<CardProps> = ({ title,paragraph = 'Hello World' }) => {
return (
<div>
<h4>{title}</h4>
<p>
{paragraph}
</p>
</div>
)
}

export default App

Happy Coding :)

Example #5 [ useState ]

import React, { useState } from 'react';
const App: React.FC<{ initilaValue?: number }> = ({ initilaValue = 10 }) => {
const [count, setCount] = useState(initilaValue)
return (
<>
<h3>{count}</h3>
<button onClick={() => setCount(count => count + 1)}>Increment</button>
</>
)
}
export default App

Happy Coding :)

Example #6 [ Functional Components ]
Stateless or functional components can be defined in TypeScript like so,
import * as React from 'react';

const App: React.FunctionComponent<{count?: number}> = (props) => {
return <h1>{props.count}</h1>;
};

export default App;

Happy Coding :)

Example #7

import * as React from 'react';
interface Props {
count?: number;
}
const App: React.FC<Props> = (props) => {
return <h1>{props.count}</h1>;
};
export default App;

Happy Coding :)

Example #8

import React from 'react';
interface Props {}

interface State {
count: number;
};

export default class App extends React.Component<Props, State> {
state: State = {
count: 0
};

increment = () => {
this.setState({
count: (this.state.count + 1)
});
};

decrement = () => {
this.setState({
count: (this.state.count - 1)
});
};

render () {
return (
<div>
<h2>{this.state.count}</h2>
<button onClick={this.increment}>Increment</button>
<button onClick={this.decrement}>Decrement</button>
</div>
);
}
}

Happy Coding :)

Example #9

import * as React from 'react';

interface Props {
count?: number;
}

export default class Count extends React.Component<Props> {
static defaultProps: Props = {
count: 10
};

render () {
return <h1>{this.props.count}</h1>;
}
}

Happy Coding :)

Example #10

Happy Coding :)

Easy Steps

Wednesday, October 31, 2018

TypeScripts

No comments:

Post a Comment