JavaScript, TypeScipt and React Native

> true == "true"
true
> 1 == "one"
true
> 0 == "zero"
false
> true === "true"
false

Let's Talk about
JavaScript Types

JavaScript Types
string object function
number boolean undeﬁned

Runtime typed
→ undeﬁned is not a function
→ cannot read x of null/undeﬁned

prop-types
→ Documents intended types of properties.
→ Only logs warnings.

prop-types
import PropTypes from 'prop-types';

const propTypes = {
optionalString: PropTypes.string,
requiredString: PropTypes.string.isRequired,
unionType: PropTypes.oneOfType([
PropTypes.string,
PropTypes.number,
PropTypes.instanceOf(Message)
]),
}

class MyComponent extends React.Component {
render() {
// ... do things with the props
}
}
MyComponent.propTypes = {
...propTypes,
customProp: function(props, propName, componentName) {
if(not(valid)) {
return Error();
}
},
};

Vernacular crash course
Component ~>
UIViewController | UIView

Does React Native run in a web view?
No.

Does React Native compile to native code?
No.

let y: number;
y = 2; // OK
y = "2"; // Type Error
let x = 2;
x = "2"; // Type Error
x = null; // Type Error

let x?: number;
x = null;
x = "Swift";
x = 2; // Type Error

interface IRectangleConfig {
color?: string; // Nullable
width: number;
}
type SquareConfig = {
color?: string; // Nullable
width: number;
}

type idType = number;
type func = () => (x: string) => (p: boolean) => boolean;

type typedLiteral = "random-string";
type unionTypes = typedLiteral | "another-string";

type person = { name: string; age: number };
const personName = (p: person) => p.name
personName({name: "Jake", age: 42, class: "Magic Dog"})

class Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Hello, " + this.greeting;
}
}

class RudeGreeter extends Greeter {
greeting: string;
constructor(message: string) {
this.greeting = message;
}
greet() {
return "Bugger off" + this.greeting;
}
}

Let's talk about
TypeScript in React

{
"compilerOptions": {
...,
"jsx": "react-native",
/* or "react" for web projects */
"moduleResolution": "node",
...,
}
}

Install React Native Typings
npm install --save-dev @types/react
npm install --save-dev @types/react-native

type TalkProps = {
id: string
title: string;
speakerName: string;
};
class Talk extends Component<TalkProps> {
public render() {
return (
<TextView>
{this.props.title} by
{this.props.speakerName}
</TextView>
);
}
}

import Talk from "./components/talk";
class App extends Component {
public render() {
const talk = {
id: "1234"
title: "Typing React";
speakerName: "Mitchell";
}
return (
<Talk
id={talk.id}
title={talk.title}
speakerName={talk.speakerName} />
);
}
}

import Talk from "./components/talk";
class App extends Component {
public render() {
const talk = {
id: "1234"
title: "Typing React";
speakerName: "Mitchell";
}
return (
<Talk
{...talk} />
);
}
}

type TalkState = {
time: int
};
class Talk extends Component<TalkProps, TalkState> {
public state: TalkState = { time: 0, };
constructor(props) { super(props);
setInterval(() =>
this.setState({ time: this.state.time + 1})
)
}
public render() {
return ( <TextView> {this.state.time} </TextView> );
}
}

JS Wat's
https://www.destroyallsoftware.com/talks/wat

JavaScript, TypeScipt and React Native

More Related Content

What's hot (20)

Similar to JavaScript, TypeScipt and React Native (20)

Recently uploaded (20)

JavaScript, TypeScipt and React Native