Full Stack TypeScript
link Hello TypeScript
In this book, we learn about TypeScript, TypeORM and TypeGraphQL. We also build a complete mobile application with React Native.
What is TypeScript?
Source: TypeScript In Five Minutes
Why do we use TypeScript?
TypeScript lets us build apps with stricter code. We can utlize TypeScript as source code for all platforms (iOS, Android and web).
Who made TypeScript?
Microsoft made TypeScript (open source).
Where can I get started?
Before starting this project, try testing out the TypeScript compiler here.
Ready? Let's get started.
link Initial Setup - macOS
Download Homebrew, the missing package manager for macOS (or Linux):
/usr/bin/ruby -e "$(curl -fsSL https://raw.githubusercontent.com/Homebrew/install/master/install)"
Use brew to install the following tools:
brew install git brew install node brew install yarn brew install visual-studio-code
Finally, download Xcode.
link Initial Setup - Windows 10
- Npm or Yarn package managers installed on your machine
link Getting Started
Download and install the latest version of Android Studio
Expo-Cli globally by running:
npm install -g expo-cli npm install -g typeorm-cli
yarn add -g expo-cli yarn add -g typeorm-cli
Once both have finished installing we need to get our simulators ready to work with
Setting Up Our Simulators
Launch Android Studio and go through the initial setup steps.
Once you're done with all of the initial setup, create a new project in Android Studio.
Next we need to head into the AVD Manager to install our devices and Android Operating System.
Now we need to install a virtual device.
create virtual device button.
We now have to choose a device to run our application on, I'm going to use a Pixel 3 XL here, but feel free to use any other device.
Now it's time to install the OS of our choosing on our device. I'm going to use Android Pie but you can use any of your choosing above version Oreo.
Download the os version. Once complete we can close the prompt and our simulator will almost be ready to go.
link Linking our simulator to work on our system
From Android Studio, select File, then Settings... Under the Appearance & Behavior category, then under the System Settings category, select the Android SDK page.
Select the SDK Platforms tab, if it’s not selected by default. Select the Show Package Details checkbox. Under Android API 28, check the boxes for Intel x86 Atom System Image and Intel x86 Atom_64 System Image.
Select the SDK Tools tab. Check the boxes next to Android SDK Platform-Tools and Intel x86 Emulator Accelerator (HAXM installer). Click OK, then click OK again.
Accept all License Agreements and Recommended settings. If prompted for administrative access, login with an authorized account. Click Finish, then click Finish again.
Now we're ready to go!
From Android Studio, select Tools then AVD Manager. To the right of your installed device, press the green Play arrow to launch the Android emulator.
Once the device boots up, we can close just the Android Studio window. We can now run our Android Device from the Expo Client!
-- Thanks to Andre Pato (@anpato) for adding these instructions.
link Initial Setup - continued...
link Configure VS Code
Open VS Code and familiarize yourself with the code editor's interface.
Open the Command Palette (⇧⌘P) and type 'shell command' to find the Shell Command: Install 'code' command in PATH command.
Select the first dropdown menu option: Install 'code' command in PATH.
Open the Extensions Panel (⇧⌘X) and search for "eslint".
Select "ESLint by Dirk Baeumer" - click "Install"
For more information about ESLint, visit the extension's homepage.
link Configure Git
We want to set a default name an email address that Git will use to identify our commits.
git config --global user.name "YOUR NAME HERE" git config --global user.email YOUR_EMAIL@DOMAIN.COM
We will also tell Git to use VS Code as our default editor:
git config --global core.editor "code --wait"
link Configure Bash Profile
We would like to install global
npm packages. To do so, be sure to edit your
touch ~/.npm-global touch ~/.bash_profile code ~/.bash_profile
The third command (
code ~/.bash_profile) should open your
bash_profile in VS Code. If it does not, be sure to re-try the step labelled "Configure VS Code" and restart terminal.
Paste the following into your
bash_profile at the very bottom of the file:
Then reload your
bash_profile config file:
link Configure ZSH Profile
~/.zshrc file, and insert the following at the very bottom:
if [ -f ~/.bash_profile ]; then . ~/.bash_profile; fi
Then reload your
zsh config file: