#### Table of Contents

1. TypeScript + Node.js + CloudFunction + FireStore
2. Pre Requirement
3. Setup npm repo
4. Install dependencies packages
5. Install dev dependencies packages
6. Update main field at package.json
7. Start writing Code index.ts
8. Create tsconfig.json
9. Ready to Deploy Code
10. Deploy from Local
11. TypeScript deployment with Cloud Function with fireStore
12. Other choice?
13. Conclusion

## TypeScript + Node.js + CloudFunction + FireStore

This blog try to demo how to deploy a `Google Cloud Function` that will interact with `fireStore` NOSQL database, and use `TypeScript` for static typing at development, and instead of use CI/CD pipeline will just use `husky` at local to gard and watch the quality of the code and deploy to the Google cloud locally.

## Pre Requirement

Before we start writing the code, there're few pre requirement are not include in this blog but require the application to run.

- GCP Account/Project - make sure has active GCP account and GCP project setup.
- Firebase Account/Project - Your fireBase should connect with GCP, logged on to the Firebase and find the fireStore.
- Run `gcloud config list` - to make sure your local environment are connect to the correct project.

## Setup npm repo

Now, let's get started, first we'll need to initialize the npm repo by run the following command on your local. This will create `package.json` file with default setting.

```
npm init -y
```

## Install dependencies packages

We'll install following dependencies packages since we'll interact with firebase.

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

## Install dev dependencies packages

Install following package during the build time, such as typescript for static typing and eslint for syntax analyzer.

```
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 start file.

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

## Start writing Code `index.ts`

let's create a file `index.ts` under root folder, and add following code. These are import some package we'll use later, the `firebase-functions/v2` will use the Google Cloud Function gen2, which will have 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 use the fireStore, so add following code.

```Javascript
initializeApp();

const db = getFirestore();
```

Finally, we'll hook with firebase's `functions` to listen to the request, no inside the `onRequest` will be add our main logic, which either get data from fireStore or some update or delete operations.

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

 console.info('on request');

 });
```

### Create `tsconfig.json`

Since we have our first code is ready, let's create our first `tfconfig.json` to compile the typescript into javascript. We'll also add following command to the `package.json`'s `scripts` section.

Once run the `npm run build`, so our code will start to compile the `index.ts` and create javascript file under the `dist/index.js`.

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

### Ready to Deploy Code

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

### Deploy from Local

In this blog, we don't have lots developer works on the same repo, when many ppl work on the same repository it'll be better to use CI/CD with git pull request so whenever some one create new pull request to the main branch can start continue integration and deploy the latest code to the correct environment.

So instead we'll add following `gcloud` command to the `scripts` section, when you ready to deploy to the google cloud, we can just run the `npm run deploy`, which will set the gcloud project and deploy 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 with fireStore

That'a all for create typescript for cloud function and interact with fireStore and deploy locally.

### Other choice?

Since we use `fireStore`, which is part of `firebase`, we could use firebase's `firebase-tools` to generate list of files to support typescript, now when use with `firebase` tools, to setup the cloud function, few setting you'll have to follow with firebase's setting.

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, once I don't like is that `exports.main` limit the name can be define, use `glcoud` to define the function name, entry point, or gen2 are much more easlier than the `firebase`'s settings.

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

### Conclusion

Use `firebase`'s `firebase-tools` could simply setup typescript for firebase cloud function, and after tried a while use `gcloud` has maximum flexibility compare with `firebase-tools`, it could be improve but at this point I feel just use the `typescript` is much more easier.

This blog show how to setup TypeScript with CloudFunction 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. 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. TypeScript Version
2. Install TypeScript
3. Create TypeScript file
4. Use TypeScript Syntax
5. How to learn TypeScript

  - URL where to download TypeScript

  - gulp-typescript

  - grunt-typescript

  - TypeScript Document

  - TypeScript Release Note

  - Use TypeScript with Gulp

### TypeScript Version

How to check TypeScript's version by MS Command. Type
`tsc -v` will show TypeScript's version.

```
tsc -v
Version 1.0.3.0
```

If you're in windows enviroment, above command line might not give you the
latest version of TypeScript, because the command line is probably use the
windows enviroment's default path for TypeScript to check the version. That's
probably why it's return `1.0.3.0`, but you have already install
`1.7`. For change this, you can try following different things,

###### Change windows enviroment path for TypeScript.

Or install the Visual Studo 2015 version 2, becausae this version of visual
studio will contains TypeScrit Build on the Visual Studio and if you already
installed latest version of TypeScript, it'll warn you and will update the
visaul 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
`npm install -g typescript` if you have NPM installed, or you can
download TypeScritp Executable file to windows and install.

### Create TypeScript file

TypeScript end up extension with `*.ts`, let's say you create file
like following.

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

Go to the location at that file at your command line, type
`tsc {your file}.ts`, then you should get a javascript generate by
TypeScript command, {your file}.js.

### Use TypeScript Syntax

Let's change the method to `appendStringName(name: string)`, it is
TypeScript syntax that it will only take string for the parameter, when you
run the command `tsc {your file}.ts`, it will throw error but the
javascript file will regenerated. I'm kind of not really TypeScript at this
point already...

###
Why? becuase sometime TypeScript will generate Javascript, sometime it doesn't
generate Javascript.

Now, following TypeScript will output be 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 TypeScript Document's all the aspects, and try it out!


This blog shows how to get started with TypeScript.

Category TypeScript

Use TypeScript with Google CloudFunction and Deploy locally

Start Angular2 - Resources

How to use TypeScript with Jest

Getting Start with TypeScript