
#### Table of Contents

1. Introduction
2. Install Packages
3. Create babel.config.js
4. Create jest.config.ts
5. Change the Code sample.js to TypeScript sample.ts
6. Change the Jest sample.test.js to TypeScript sample.test.ts
7. Run npm run test

### Introduction

This blog shows how to get start use TypeScript to write code and also write in Jest.

### Install Packages

If you have not use Jest, can reference this to get start with Jest with JavaScript, [Get Start with Jest](/blog/post/start-setup-jest).

At here, we'll start install necessary NPM packages for use TypeScript at Jest and the code.

```
npm install --save-dev @babel/core @babel/preset-env @babel/preset-typescript @jest/globals @types/jest babel-jest ts-jest ts-node typescript
```

### Create `babel.config.js`

```JavaScript
module.exports = {
    presets: [
      ['@babel/preset-env', {targets: {node: 'current'}}],
      '@babel/preset-typescript',
    ],
  };
```

### Create `jest.config.ts`

```JavaScript
export default {
    clearMocks: true,
    collectCoverage: true,
    coverageDirectory: "coverage"
}
```

### Change the Code `sample.js` to TypeScript `sample.ts`

### Change the Jest `sample.test.js` to TypeScript `sample.test.ts`

```JavaScript
import {exponent, subtraction, sum} from '../src/sample';
import {describe, expect, test} from '@jest/globals';

describe('calculator', () => {
    test('test sum', () => {
        expect(sum(1, 2)).toBe(3);
    });

    test('test subtraction', () => {
        expect(subtraction(10, 2)).toBe(8);
    });

    test('test exponent', () => {
        expect(exponent(5, 2)).toBe(25);
    });
})
```

### Run `npm run test`

Now, if run `npm run test` and if everything works, should see test all passed and 100% coverage.


This blog shows how to get start use TypeScript to write code and also write in Jest.

How to use TypeScript with Jest

## Table of Contents

1. [Introduction](#introduction)
2. [Prerequisites](#prerequisites)
3. [Setup npm Repo](#setup-npm-repo)
4. [Install Dependencies Packages](#install-dependencies-packages)
5. [Install Dev Dependencies Packages](#install-dev-dependencies-packages)
6. [Update Main Field at package.json](#update-main-field-at-packagejson)
7. [Start Writing Code index.ts](#start-writing-code-indexts)
8. [Create tsconfig.json](#create-tsconfigjson)
9. [Ready to Deploy Code](#ready-to-deploy-code)
10. [Deploy from Local](#deploy-from-local)
11. [TypeScript Deployment with Cloud Function and Firestore](#typescript-deployment-with-cloud-function-and-firestore)
12. [Other Choices](#other-choices)
13. [Conclusion](#conclusion)

## Introduction

This blog tries to demonstrate how to deploy a `Google Cloud Function` that will interact with `Firestore` NoSQL database, using `TypeScript` for static typing at development. Instead of using a CI/CD pipeline, we will use `husky` locally to guard and watch the quality of the code and deploy to Google Cloud locally.

## Prerequisites

Before we start writing the code, there are a few prerequisites not included in this blog but required for the application to run.

- GCP Account/Project - make sure you have an active GCP account and GCP project set up.
- Firebase Account/Project - Your Firebase should connect with GCP. Log on to Firebase and find the Firestore.
- Run `gcloud config list` - to make sure your local environment is connected to the correct project.

## Setup npm Repo

Now, let's get started. First we'll need to initialize the npm repo by running the following command on your local machine. This will create a `package.json` file with default settings.

```
npm init -y
```

## Install Dependencies Packages

We'll install the following dependency packages since we'll interact with Firebase.

```
npm install --save firebase-admin firebase-functions
```

## Install Dev Dependencies Packages

Install the following packages during build time, such as TypeScript for static typing and ESLint for syntax analysis.

```
npm install --save-dev typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-google eslint-plugin-import firebase-functions-test
```

## Update `main` Field at `package.json`

Update the `package.json` for the start file.

```
"main": "dist/index.js",
```

## Start Writing Code `index.ts`

Let's create a file `index.ts` under the root folder and add the following code. These imports bring in packages we'll use later. The `firebase-functions/v2` will use Google Cloud Functions gen2, which has better performance.

```Javascript
import * as functions from "firebase-functions/v2";
import {initializeApp} from "firebase-admin/app";
import {getFirestore} from "firebase-admin/firestore";
```

Next, we'll initialize the app and start using Firestore, so add the following code.

```Javascript
initializeApp();

const db = getFirestore();
```

Finally, we'll hook into Firebase's `functions` to listen to the request. Now inside the `onRequest` we will add our main logic, which can either get data from Firestore or perform update or delete operations.

```Javascript
exports.main = functions
 .https.onRequest(async (request, response) => {

 console.info('on request');

 });
```

## Create `tsconfig.json`

Since our first code is ready, let's create our `tsconfig.json` to compile the TypeScript into JavaScript. We'll also add the following command to the `package.json`'s `scripts` section.

Once you run `npm run build`, the code will start to compile `index.ts` and create a JavaScript file under `dist/index.js`.

```
"scripts": {
 "build": "tsc"
}
```

## Ready to Deploy Code

So that's all we need for now. We should be able to continue adding code to the TypeScript file `index.ts` and use the simple TypeScript build by running `npm run build` to compile the TypeScript into JavaScript, ready to deploy to production.

## Deploy from Local

In this blog, we don't have many developers working on the same repo. When many people work on the same repository, it's better to use CI/CD with git pull requests so that whenever someone creates a new pull request to the main branch, continuous integration can start and deploy the latest code to the correct environment.

So instead, we'll add the following `gcloud` command to the `scripts` section. When you are ready to deploy to Google Cloud, we can just run `npm run deploy`, which will set the gcloud project and deploy the Cloud Function.

```JSON
"scripts": {
 "deploy": "npm run deploy:project && npm run deploy:run",
 "deploy:project": "gcloud config set project set-to-the-correct-project-id",
 "deploy:run": "gcloud functions deploy your-cloud-function-name --trigger-http --region=us-central1 --runtime=nodejs16 --gen2 --allow-unauthenticated --entry-point=main --run-service-account=service-account-can-run-the-cloud-function"
}
```

## TypeScript Deployment with Cloud Function and Firestore

That's all for creating a TypeScript Cloud Function that interacts with Firestore and deploying locally.

## Other Choices

Since we use `Firestore`, which is part of `Firebase`, we could use Firebase's `firebase-tools` to generate a list of files to support TypeScript. When using `firebase-tools` to set up the Cloud Function, there are a few settings you'll have to follow with Firebase's configuration.

set node.js version

```Json
"engines": {
 "node": "16"
}
```

set region

```Javascript
functions.setGlobalOptions({
 region: 'us-west1-a'
});
```

set gen2

```Javascript
import * as functions from "firebase-functions/v2";
```

set function name

Now, following is how you set the function name. One thing I don't like is that `exports.main` limits the name that can be defined. Using `gcloud` to define the function name, entry point, or gen2 is much easier than Firebase's settings.

```Javascript
exports.main = functions
```

## Conclusion

Using Firebase's `firebase-tools` can simplify setting up TypeScript for Firebase Cloud Functions. After trying both approaches, using `gcloud` has maximum flexibility compared with `firebase-tools`. It could improve, but at this point I feel just using `TypeScript` directly with `gcloud` is much easier.

This blog shows how to set up TypeScript with Cloud Functions and deploy to Google Cloud locally.

Use TypeScript with Google CloudFunction and Deploy locally


#### Table of Contents

1. A resource to Learn Angular2
2. Resource for other languages/tools relative to Angular2
3. Environment for start doing Anglar2
4. Angular2 Tags
5. Angular2 Coding Styles
6. How to Learn Angular2
7. Question for Angular2

### A resource to Learn Angular2

This blog just provides a few links to learn Angular2, I create this page just
want to memo a few links of how to learn Angular2.

  - BadAssList - Resource of Learn Angular2

    - A very helpful list to learn Angular2

PDF - Become a Ninja with Angular2

Info - Angular2 Home Page

    - Go to the Angular2 home page to check what's the main features.

Try 1 - Angular2 Quick Start

    - Use this Angular.io's quick start to learn how to build a Hello world by
Angular2.

Try 2 - Angular2 Tutorial

    - This Angular2.io's tutorial will learn how to use angular2 Components,
services, Routing, and HTTP.

Document - Angular.io's guide

    - A basic guide for the developer

Document - Angular.io's developer guide

    - More information about Angular2.

Angular2 API

Example - generator-gulp-angular2

    - Yeoman generator's angular2 version

Angular.io quick start's github location

Blog - how to learn Angular2

News - Positive - Google Preps Angular 2 for Final Release

Video - Angular2 Tutorial for beginner

Video - egghead - Learn Angular2

Video - Angular 2 : First Look

Video - Angular 2 - Getting Started

Video - Play by Play

site - learnangular2.com

    - a website build for people who want to learn angular2

site - angular2.com

Tool - Node.js - You need this to try angular2

Tool - TypeScript - Angular2 could build with TypeScript

Course - Paid to learn Angular2 - Pluralsight

    - If you pay you can take the angular2 course here.

### Resource for other languages/tools relative to Angular2

1. TypeScript

2. SystemJs

### Environment for start doing Anglar2

  - node.js

    - http://nodejs.org/

    - version: 4.x is better stable than 5.x (7/72016 point)

npm

    - version: 2.x, will come along when installing node.js

IDE

    - Visual Studio Code

      - https://code.visualstudio.com/Docs/?dv=win

Cloud9
WebStorm
Sublime

Git

    - http://git-scm.com/

### Angular2 Tags

  - TypeScript

  - SystemJs

  - Single Responsibility Principle

  - dash case (aka kebab-case)

  - decorator

  - Injectable

  - @Injectable()

  - Dependency Injection

  - Promise

  - ngOnInt

  - Angular Lifecycle Hook

  - Pipes

  - interpolation

  - one-way data binding

  - two-way data binding

  - Multi-line template strings

  - template strings feature in ES2015

  - double curly braces of interpolation

  - ngFor

    - build-in directive

ngIf
Structural Directives
property binding
Attribute Directives
@Input()
angular2 promise service
Async Angular Service with Promises
ES2015 Promises
ES2015 arrow function
Angular2 base href
component-relative paths
parent component property binding
ActivateRoute
ngOnDesroy
angular2's subscribe -> params.subscribe
angular2's unsubscribe -> this.sub.unsubscribe();
Javascript(+) operator
CanDeactivate guard
routerLinkActive

### Angular2 Coding Styles

  - service

    - .service

    - MyGreateService -> my-greate.service.ts

### How to Learn Angular2

1. Angular2

2. First, learn basic angular2, tutorial, read documentation, build a
prototype.

3. TypeScript

4. Learn basic with angular2, also dive deep into TypeScript

5. Visual Studio Code

6. SystemJs

7. Npm

8. Grunt/Gulp

9. Visual Studio

10. How to integrate the above technology into visual studio, let's say,
ASP.NET MVC, MVC5

### Question for Angular2

1. When should we use Angular2?

2. Angular2 for SEO?

3. Why need to unsubscribe()? -> this.sub.unsubscribe();

4. The angular component could add CSS URLs, but how to work with SASS or
minified CSS?


Start Angular2 - Resources


## Table of Contents

1. [TypeScript Version](#typescript-version)
2. [Install TypeScript](#install-typescript)
3. [Create TypeScript File](#create-typescript-file)
4. [Use TypeScript Syntax](#use-typescript-syntax)
5. [How to Learn TypeScript](#how-to-learn-typescript)

## Introduction

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. This post covers the basics of getting started with TypeScript, including installation, creating files, and using TypeScript syntax.

## TypeScript Version

How to check TypeScript's version using the command line. Type `tsc -v` to show TypeScript's version.

```
tsc -v
Version 1.0.3.0
```

If you're in a Windows environment, the above command line might not give you the latest version of TypeScript, because the command line is probably using the Windows environment's default path for TypeScript to check the version. That's probably why it returns `1.0.3.0`, but you have already installed `1.7`. To change this, you can try the following different approaches:

### Change Windows Environment Path for TypeScript

Or install Visual Studio 2015 Update 2, because this version of Visual Studio contains TypeScript Build, and if you already installed the latest version of TypeScript, it will warn you and update Visual Studio for you.

> TypeScript Visual Studio 2015 Update 2 includes TypeScript 1.8, which includes
> the following new and improved features. Support for string literal types,
> F-bounded polymorphism, 'this'-based type guards, and improved union type
> inference. The compiler now highlights common bugs such as unreachable code,
> missing return statements, and unused labels. JSX support has been updated to
> recognize and colorize the latest changes in the JSX syntax. Improved
> tsconfig.json support for better control over build configurations. Ability to
> design more modular libraries using module augmentation. JavaScript source
> files can be included as input to the TypeScript compiler. For more
> information, see the TypeScript blog on MSDN.

## Install TypeScript

You can install TypeScript by either running `npm install -g typescript` if you have NPM installed, or you can download the TypeScript executable file for Windows and install it.

## Create TypeScript File

TypeScript files end with the `*.ts` extension. Let's say you create a file like the following:

```
function appendName(name) {
	return "Hi, " + name;
}
```

Go to the file's location in your command line and type `tsc {your file}.ts`. Then you should get a JavaScript file generated by the TypeScript compiler, `{your file}.js`.

## Use TypeScript Syntax

Let's change the method to `appendStringName(name: string)`. This is TypeScript syntax that specifies the parameter only accepts a string. When you run the command `tsc {your file}.ts`, it will throw an error, but the JavaScript file will still be regenerated.

### Why TypeScript Sometimes Generates JavaScript and Sometimes Does Not

Sometimes TypeScript will generate JavaScript even with errors, and sometimes it does not. This depends on the severity and type of errors encountered.

Now, the following TypeScript will output the second snippet's JavaScript result.

### TypeScript Example of Using Class

```
function appendStringName(name: string) {
	return "Hi, " + name;
}

class User {
	name: string;
	age: number;
	constructor (public firstName, public lastName, public age) {
	this.name = firstName + " " + lastName + " " + age;

	}
}

// passing number to the string is ok
appendStringName(1);
// passing string to the int is not okay
var user = User("john", "kenny", "1");
```

### TypeScript's Output Result in JavaScript

```
function appendStringName(name) {
    return "Hi, " + name;
}

var User = (function () {
    function User(firstName, lastName, age) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
        this.name = firstName + " " + lastName + " " + age;
    }
    return User;
})();

// passing number to the string is ok
appendStringName(1);

// passing string to the int is not okay
var user = User("john", "kenny", "1");
```

## How to Learn TypeScript

Check the TypeScript documentation for all the aspects, and try it out!

## Conclusion

TypeScript provides type safety on top of JavaScript, making it easier to catch errors at compile time. Start by installing TypeScript, creating `.ts` files, and experimenting with its type system to improve your development workflow.


This blog shows how to get started with TypeScript.

TypeScript

How to use TypeScript with Jest

Use TypeScript with Google CloudFunction and Deploy locally

Start Angular2 - Resources

Getting Started with TypeScript