Chapter 1: Getting Started

Full Stack TypeScript

Welcome

Welcome to Typescript! With TypeScript, we write a superset of types that compile to regular Javascript. Often enough, those who start the transition to TypeScript feel that regular JavaScript is no longer enough. TypeScript integrates well with existing JavaScript projects and includes useful features that increase developer productivity, such as:

Static checking
Code refactoring
Type safety

With these features, most runtime errors are resolved by the compiler. This saves innumerable hours at scale, and can effectively save time and money on production costs.

By the end of this lesson, developers will be able to:

Use the Expo Command Line Interface (CLI)
Structure a React Native Typescript application
Create their first TypeScript element (App.tsx)
Install dependencies (with npm or yarn).

Start it up

Let's create a new Expo application using their typescript template:

npm install -g expo-cli
expo init <app-name>

Following the Expo Setup Wizard

Let's create a React Native app using the Expo CLI wizard:

1) Select black (TypeScript) - this is a blank TypeScript app template.

? Choose a template: 
  ----- Managed workflow -----
  blank                 a minimal app as clean as an empty canvas 
❯ blank (TypeScript)    same as blank but with TypeScript configuration 
  tabs                  several example screens and tabs using react-navigation

2) Name your app. Again, do not name it app-name! Typing the full app name will edit it in your package.json file.

{
   "expo": {
     "name": "<app-name>",
     "slug": "<app-slug>"
   }
 }

If you followed these steps successfully, you should have a new app with the following structure:

.
.expo-shared/
assets/
node_modules/
.gitignore
.watchmanconfig
App.tsx
app.json
babel.config.js
package.json
tsconfig.json
yarn.lock

Once set up, please cd into the app's root directory and run yarn start:

cd <app-name>
yarn start

Great! We are now running our first React Native TypeScript application.

Our first app will allow users to read and write about travel on the go.

Ready to continue building our first view? Edit your App.tsx to greet your new Typescript app:

export default function App() {
  return (
    <View style={styles.container}>
      <Text>Hello World! Welcome to my app.</Text>
    </View>
  );
}

If your app reloads with the updated text, well done! Up next, we will integrate our first component library.

Component Libraries

React Native Paper

Wouldn't it be nice to have a set of generic Material-UI components? Well, let's just say Christmas came early, because React Native Paper is exactly that. We are going to utilize this amazing library to spruce up our apps interfaces.

First, let's install react-native-paper:

yarn add react-native-paper

Source

Let's integrate our first app theme provider, called PaperProvider. Include a default theme inside App.tsx:

import React from 'react';
import { StyleSheet, Text, View } from 'react-native';
import { DefaultTheme, Provider as PaperProvider } from 'react-native-paper';

const theme = {
  ...DefaultTheme,
  roundness: 2,
  colors: {
    ...DefaultTheme.colors,
    primary: '#3498db',
    accent: '#f1c40f'
  }
};

export default function App() {
  return (
    <PaperProvider theme={theme}>
      <View style={styles.container}>
        <Text>Hello World! Welcome to my app.</Text>
      </View>
    </PaperProvider>
  );
}

Card Component

Let's create a new card component that utilizes a Card from React Native Paper.

mkdir src/components
touch src/components/CardView.tsx
touch src/components/index.ts

Add the following snippet inside src/components/CardView.tsx:

import * as React from 'react';
import { Avatar, Button, Card, Title, Paragraph } from 'react-native-paper';

const CardView = ({ title, description, imageUrl, onPress, user }) => (
  <Card onPress={() => onPress && onPress()}>
    {!!user && (
      <Card.Title
        title={user.username}
        subtitle={user.email}
        left={props => (
          <Avatar.Icon
            {...props}
            style={{ backgroundColor: 'lightblue' }}
            color="#fff"
            size={42}
            icon="image"
          />
        )}
      />
    )}
    <Card.Cover source={{ uri: imageUrl || 'https://picsum.photos/700' }} />
    <Card.Content>
      <Title>{title}</Title>
      <Paragraph>{description}</Paragraph>
    </Card.Content>
  </Card>
);
export default CardView;

Add the following inside src/components/index.ts, where we export the CardView component:

import CardView from './CardView';

export { CardView };

Now that we have a card, let's add dummy data to display three sample trips.

Add the following imports to your top level App.tsx:

import React from 'react';
import { StyleSheet, Text, ScrollView } from 'react-native';
import { DefaultTheme, Provider as PaperProvider } from 'react-native-paper';
import { CardView } from './src/components';

const theme = {
  ...DefaultTheme,
  roundness: 2,
  colors: {
    ...DefaultTheme.colors,
    primary: '#3498db',
    accent: '#f1c40f'
  }
};

const trip1 = {
  title: 'Sundown Town',
  description: 'Awaiting daybreak',
  imageUrl: 'https://i.picsum.photos/id/695/700/700.jpg'
};

const trip2 = {
  title: 'The Stars',
  description: 'Astro vigil',
  imageUrl: 'https://i.picsum.photos/id/683/701/701.jpg'
};

const trip3 = {
  title: 'Coastal Cruise',
  description: 'Serene scene',
  imageUrl: 'https://i.picsum.photos/id/51/701/701.jpg'
};

export default function App() {
  return (
    <PaperProvider theme={theme}>
      <ScrollView
        style={styles.container}
        contentContainerStyle={styles.contentContainer}
      >
        <CardView {...trip1} />
        <CardView {...trip2} />
        <CardView {...trip3} />
      </ScrollView>
    </PaperProvider>
  );
}

const styles = StyleSheet.create({
  container: {
    flex: 1,
    backgroundColor: '#fff'
  },
  contentContainer: {
    paddingVertical: 40
  }
});

By now, you should see three new cards displayed with trip information.

Well done!

Wrapping Up

Today we built a sample travel application with Typescript. Up next, we will get started with setting up our backend using TypeGraphQL.