TypeScript, Programming Language, Web Development, 

What is TypeScript? 

NextJS & Google Analytics 

Function Types - TypeScript - adding types to functions

Interfaces And Types in TypeScript

Import Google Analytics to your NextJS Web App

TypeScript / Coding / Software Web Development / Digital Nomad / Programing 

Narrowing

React Native, mobile and web software development, Career Changing, SEO, Digital Products

How and What is React Native?

Code Data Types in TypeScript - Understand the basics of the language

Core Data Types

Software Development, React Native, Mobile Development, Consulting, building an online business

NFTs are a great example of how we can protect our own work from beginning duplicated 

Proof Of Ownership with little help of NFTs!!

Remote Business Ideas - Slavo3 , NRG Nomad, Digital Marketing, SEO, Software Web Development

Featured Remote Business Ideas

Remote Business Ideas

Definitely Typed. TypeScript, Programming, 3rd Party Library 

Definitely Typed

Function Types TypeScript adding types to functions 

Interfaces and Types in TS

Definitely Typed, TypeScript, Programming, JavaScript, FrontEnd

TypeScript - Programming, Software Development

Intersection Types

TypeScript, Programming, Career Change ... learning Software Development 

Core Data Types, TypeScript, Learning Programming Language 

TypeScript Logo, Programming Language, Web Development

TypeScript Logo

React is a JavaScript library for building user interfaces. 

React Native is a cross-platform solution for building mobile apps. 

React Native is a collection of "special React components" that you can use in your React Native App. These "components" are unique because React Native knows how to translate them and compile them to native widgets for iOS and Android. React Native gives you access to some Native Platform APIs exposed to JavaScript. 

React Native is different than other technologies for cross-platform development. 

Technologies like Ionic, for example, what do they gravure JavaScript Code. They will put it on frame or web page, a native application that gets installed on the phone, and what it will do is render a web view with your translated code. But this is not native code. The only thing it's such as native, it's going to be that frame or that web. 

Whit React Native is different because when we create our application, React Native will recognize that JavaScript code will compile and make two native bundles, one for Android and one for iOS. 

If you develop your app with React code, that doesn't mean that React Native app will recognize that code. Most of the things will be the same, but you are halfway there. Still needs to be adjustments in your code. 
For example: with React, you know that you can create "div," and the browser will recognize him, but on iOS you have "UIview." On Android, you have "android.view" instead of "div" with ReacNative; you can not use "div"; you are using the particular component "View," that they will give you to render "div" or "UIview.". So you still need to use all the "components" that React Native will provide you to create the application. 

How does React Native works? 

We build normal React Components with JavaScript because JavaScript is our language to build React Native apps. Still, we use "Special React Components" like View and Text ( as you can see in the example below ) because the standard HTML elements are not supported, the native platforms don't know how to use them. 

It's important to understand that the View component is compiling to real native widgets. Your JavaScript logic where you manage your business logic will not be compiled into the native code. Still, your views will be, and that, of course, also means that you get excellent performance when you build React Native apps because of the large chunk of the is actual native code. 

```js
 const App = props => {
     return(
         <View>
            <Text>Prototype.NEXT</Text>
         </View>
         )
}
```

React Native gives you unique components, which are then compiled to native code/views. For other logic, if you are sending HTTP requests, you are transforming data... all your other JavaScript code is not compiled to Native Code, but instead, it's running on a particular thread hosted by React Native. You can imagine it, like a mini javascript app running inside your app, hosted and started by React Native, which runs all your JavaScript code and then talks to the native platform. It is happening because that JavaScript Core ( Virtual Machine ) knows how to communicate to the native platform features. Your app's operating system communicates through the bridge, and React Native automatically provides that bridge and the virtual machine. 

Now you understand that you have a real native app at the end. Not all your code is compiled, that would be impossible, but your views are compiled. That is most important when it comes to performance for an app because re-rendering the UI and all of that, that's typically the performance-intensive part. Therefore, it is excellent that this is compiled, and that's one of the enormous strengths of React Native. 

How & What is React Native

##### History?

- NFTs have been around since as early as 2012. They gained popularity in the crypto community in 2017 when a company, Dapper Labs, started selling NFTs linked to unique digital cat cartoons known as CryptoKitties, and people went crazy for these cute digital kitties.
##### Examples

NFT’s record prices are being reached for NFTs linked to different underlying assets. For example:
- Beep’s digital artwork “Everydays — The First Five Thousand Days” sold for a record US$69 million by Christie’s auction house.
- Twitter’s CEO, Jack Dorsey, auctioned an NFT of his first-ever tweet, “just setting up my Twitter,” which sold for over US$2.9 million.
- NBA Top Shot crossed the US$500 million mark, making it the biggest NFT marketplace as of the date of publication.

##### What are NFTs? And why are they being sold for so much money?
##### What is NFT?

- NFT stands for “non-fungible token,” It can technically contain anything digital, including drawings, animated GIFs, songs, or items in video games. Non-fungible means it is individual.
NFTs are cryptographic assets on a blockchain with unique identification codes and metadata that distinguish them from each other. Unlike cryptocurrencies, they cannot be traded or exchanged at equivalency.
How do NFT’s Work?

- NFTs are digital certificates, or “tokens” stored on decentralized ledgers popularly referred to as the blockchain. NFTs use software code, referred to as “smart contracts,” to transfer the digital certificate of ownership, ensuring proof of ownership in the process. It also uses the blockchain to record transactions. Cryptocurrency creates interchangeable (or “fungible”) tokens; NFTs create unique, noninterchangeable “tokens” with distinct identifiers.

##### Proof of Ownership as NFT?

- Proving you own an NFT is similar to proving you have ETH in your account. For example, let’s say you purchase an NFT, and the ownership of the unique token is transferred to your wallet via your public address. The “token” proves that your copy of the digital file is the original.
When someone buys an NFT from the creator, they obtain ownership because it becomes their property. After all, an NFT is a digital certificate of ownership representing the purchase of a digital asset traceable on the blockchain.

##### Value to Creators?

- Some NFTs include a structure for automatically collecting royalties each time a sale of the NFT occurs. For example, an artist of a work represented by an NFT may receive a 10% royalty each time the NFT sells on the blockchain.

##### Do you own your content?

- Suppose you’re Marc, a talented comedian. You upload a new comedy talk show to YouTube, and it gets 1 million plays (a viral). Unfortunately
Intermediaries take most of your earnings: YouTube only pays between $2000 and $4,000 for 1M views.

- Intermediaries own your content rights: Like many new artists, you gave up your show’s rights to the record label. Without your show’s rights, you can’t even perform it live to fans without your label’s approval.
Intermediaries control how many fans see your content: YouTube can change its discovery algorithms or even take down your content at any moment.
Intermediaries help you create content, reach fans, and make money. But they also capture most of the value from your content. Even the real Joe Rogan had to re-record his show to own her show.

##### How can NFTs help YOU?

- You create an NFT (URL to show ) for your comedian talk show, and you are selling for $30,000.
- A fan buys your NFT for $30,000. The marketplace takes 15%, earning 85% or $25,500. After a month, she resells it to another fan for $40,000 (you make 10% or $4,000 in royalties). Instead of only making $800, you’ve earned $29,500 from just two transactions.
Why will someone buy NFT’s?
- Most people buy NFTs to make money
- NFTs make it possible for super fans to make money by owning content that can appreciate by the creator.
Suppose you paid $30,000 to buy an NFT from an unknown artist. If that artist became famous a year later, you could sell the same NFT at a much higher price.
- Like stocks, NFTs let fans make a bet on the creator’s potential.
- 
##### NFT Examples

The NFT world is relatively new. In theory, the scope for NFTs is anything unique that needs provable ownership. Here are some examples of NFTs that exist today to help you get the idea:
- A unique digital artwork
- A unique sneaker in a limited-run fashion line
- An in-game item
- An essay
- A digital collectible
- A domain name
- A ticket that gives you access to an event or a coupon

###### These ideas hook us in [Prototype NEXT](https://www.prototypenext.com) with NFT’s and dApps. There is an exciting time ahead of us, especially for content creators, anonymous artists.

Proof Of Ownership with NFT!!

## Core Types (TS & JS)

### Number

#### In TypeScript, as the same is true for TypeScript, there is only one number type. There are no special types for integers or floats

#### All numbers, no differentiation between integers or floats

```js
  const age: number = 39;
  const height: number = 6.1
```

### String

#### That would be a text that you can define in one of these three ways: single quotes, double quotes and backticks

#### The last notation with backticks is a special syntax provided in modern JavaScript and also in TypeScript, which allows us to write so-colled template literals that are regular strings where you can dynamically inject some data into them

```js
  const firstName: string = "Slavo";
  const lastName: string = "Slavo";
  const username: string = 'nrgnomad';
  const city: string = `Miami`;
  const greeting: string = `Hello ${firstName} ${lastName}`
```

### Boolean

#### The most basic datatype is the simple true/false value, which JavaScript and TypeScript call a boolean value

#### The boolean know those two values, true or false. There is a Truthy/Falsy concept in JavaScript, which you should know is not related to data types. That some behind the scenes work JavaScript does at runtime when it sees specific values and if conditions. For example, number zero is a false value. 

```js
  const isGood: boolean= true;
  const isLazy: string = false;
```


Core Types - TS

__Requirments__:
 - __Next.js project__
 - __a Google Analytics account__

#### Step 1:

Create a .env.local file where you will place your Google Analytics key.
```js
  NEXT_PUBLIC_GOOGLE_ANALYTICS=<Your_tracking_ID>
```
Tip: Check your .gitignore to make sure that you don't commit this file by accident. .env.local

#### Step 2:

You need to inject and configure Google Analytics' Global site tag (aka gtag) into your browser window.

To access the head element in your Next.js application, you need to create a custom _document.js file into your pages folder.

ref - [NEXTJS DOCUMENTATION](https://nextjs.org/docs/advanced-features/custom-document) - 

```js

import Document, { Html, Head, Main, NextScript } from 'next/document'

export default class MyDocument extends Document {

const url: string = `https://www.googletagmanager.com/gtag/js?   id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}`

  render() {
    return (
      <Html>
        <Head>
          {/* Global Site Tag (gtag.js) - Google Analytics */}
          <script
            async
            src={url}
          />
          <script
            dangerouslySetInnerHTML={{
              __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}', {
              page_path: window.location.pathname,
            });
          `,
            }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    )
  }
}
```

#### Step 3:

In order to correctly track your user's behaviours, you will need to log page views and optionally, specific events triggered in your application.

To do so, I suggest you create a lib folder where you will put all your code related to third-party libraries and another folder inside called ga for Google Analytics.

Inside your lib/ga folder, create an index.js with two functions: one to log pageviews and the other events.

```js

// log the pageview with their URL
export const pageview = (url) => {
  window.gtag('config', process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS, {
    page_path: url,
  })
}

// log specific events happening.
export const event = ({ action, params }) => {
  window.gtag('event', action, params)
}

```

#### Step 4:

The simplest way to log pageviews in your Next.js app is to subscribe to your router and listen for the routeChangeComplete event.

Go into your _app.js file and with useEffect, check for new events happening with your router. There are many types of events but we only care when users navigate to a new page successfully (routeChangeComplete).

```js

import { useEffect } from 'react'
import { useRouter } from 'next/router'

import * as ga from '../lib/ga'

function MyApp({ Component, pageProps }) {
  const router = useRouter()

  useEffect(() => {
    const handleRouteChange = (url) => {
      ga.pageview(url)
    }
    //When the component is mounted, subscribe to router changes
    //and log those page views
    router.events.on('routeChangeComplete', handleRouteChange)

    // If the component is unmounted, unsubscribe
    // from the event with the `off` method
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange)
    }
  }, [router.events])

  return <Component {...pageProps} />
}

export default MyApp

```

Once deployed to production, don't forget to add your Google Analytics secret key to your environment variables.

It takes between 24-48 hrs for data to show up in Google Analytics. However, you can check if your tag is working by looking at the Realtime view.



The narrowing is moving a variable from a less precise type to a more accurate type. We can use type narrowing to avoid type errors.

Let's see the example:

Imaginge that we have a function usersHandler

```js
export function usersHandler(){

  }

```

Inside the function we are initilaze random & transfoormRandomToUpperCase variable.  

```js
  export function usersHandler(){
      let random = Math.random() > 0.5 ? "nrg nomad" : [1,2]
      let transfoormRandomToUpperCase;
  }
```

As you can see, a random variable can be a type of string or array of numbers. We are dealing here with multiple types of the variable.

```js
    let random: string | number[] 
```

Suppose we try to transform random variable to upperCase using javascript toUpperCase() function and assign the initialized value transfoormRandomToUpperCase. TypeScript will scream error.

Since we don't know if we will get it here, a string or a number, we can't be sure that this will be a string, and we will be able to call here function to toUpperCase().

```js

  export default function play(){

      let random = Math.random() > 0.5 ? "NRG NOMAD" : [1,2]
      let transfoormRandomToUpperCase; 

       let transfoormRandomToUpperCase = random.toUpperCase()  // error 
    /* error 
       Property "toUpperCase" doesnt exit on type "nrg nomad | number[]"  
       Property "toUpperCase" doesnt exit on type "number[]" . ts(2339)
       */
  }

```

So we need to do NARROWING.

In the example below, we can narrow type specification is with a simple "Else IF statement." We can check if a variable random type is a string. We can use the "toUpperCase()" function to make a "random" string to the upper case.

```js

  export default function play(){

      let random = Math.random() > 0.5 ? "NRG NOMAD" : [1,2]
      let transfoormRandomToUpperCase;

       // Narrowing
       // typeof type guard

       typeof random === "string" ? upper = random.toUpperCase() : console.log(random)

  }

```

Ways to narrow types in TypeScript

```js

// conditional value check
type random = {
  userName: string;
  userID?: number;
};

// typeof type guard
typeof random === "string" ? upper = random.toUpperCase() : console.log(random)

// instanceof type guard
class User {
  constructor(
    public firstName: string,
    public surname: string
  ) {}
}
class Member {
  constructor(public name: string) {}
}
type Contact = User | Member;

function greetUser(contact: Contact) {
  if (contact instanceof Person) {
    console.log("Hello " + contact.firstName);
  }
}

// in type guard
interface User {
  firstName: string;
  surname: string;
}
interface Member {
  name: string;
}
type Contact = User | Member;

function greetUser(contact: Contact) {
  if ("firstName" in contact) {
    console.log("Hello " + contact.firstName);
  }
}

// type guard function with a type predicate

type Rating = 1 | 2 | 3 | 4 | 5;

async function getRating(productId: string) {
  const response = await fetch(
    `/products/${productId}`
  );
  const product = await response.json();
  const rating = product.rating;
  return rating; //The return type of the function is inferred to be Promise<any>
}
// This means that no type checking 
const rating = await getRating("1"); // type of rating is `any`

// We can use a type guard function that has a type predicate to make this code more type-safe. 
function isValidRating(
  rating: any
): rating is Rating {
  if (!rating || typeof rating !== "number") {
    return false;
  }
  return (
    rating === 1 ||
    rating === 2 ||
    rating === 3 ||
    rating === 4 ||
    rating === 5
  );
}

```

The narrowing is moving a variable from a less precise type to a more accurate type. We can use type narrowing to avoid type errors. TypeScript automatically narrows the type of a variable in conditional branches. Doing a truthly condition check will remove null and undefined from a type.


Narrowing 

We do not use regular JavaScript syntax if you use a 3rd party libraries ( React, jQuery, Vue, Angular), and we want to include TypeSript in our codebase. 

TypeScript, we will not understand what react, nextjs or jsx/tsx is. We need to add 3rd parties libraries that will help us to understand that library's syntax.

Adding TypeScript to React and NextJS: 

- React we will use 
  ```js 
    npx create-react-app-typescript
  ``` 
  to add TypeScript to our React project.

- NextJS, You can create a TypeScript project with 
  ```js 
  npx create-next-app -ts
  ```  
  flag --ts ( typescript ) or to existing projects create empty "tsconfig.json" file in the root folder and run your project.

The packages that we installed should explain what is "jsx/tsx" for us.

TypeScript allows you to use 'Declaration Files", which are files that will enable describing the shape of code written. You can add files that we can reference to tell TypeScript, and I am also using this library. Use these types that just made up for you.

TypeScript is complex, but it is worth learning & using. It's a lot of learning, especially when using some framework or library. We must be familiar with all our 3rd party library files and learn the new TS types that these 3rd party libraries provide.

The repository for high quality TypeScript type definitions, please follow - [Definitely Typed](https://definitelytyped.org/)


Intersection and Union types are one of the ways in which you can compose types.
It's allow us to combine other types.

Suppose that you have two types: UserName and MemberName

```js
   type userName = {
        name: string;
        privileges= string[];
   }

    type MemberName = {
        name: string;
        paidSubscription: Date;
    }

    // The following defines two intersection types:
    type User = guestUser & memberName

    const userOne: User  = {
        name: "Slavo_3",
        privileges: ["admin"].
        paidSubscription: new Date() | string 

    }

   } 
```

When you intersect types, the order of the types doesn’t matter.

As we are doing in the example above, intersection types can be helpful when used with object types. 
You can use them with any types. 

```js 

  type Numeric = string | number;
  type Combinable = number | boolean 

  type Universal = Combinable & Numeric; // type number

```

TypeScript sees that universal as type number because that is the only intersection we have in the example. 
Intersection operator can be used with any type and then builds the intersection of these types 

Intersection Type

## When you think of starting a business, one thing may pop into your head: risk. Our culture is filled with stories of bootstrap businesses, business success despite early rough starts and businesses going under despite everyone’s best efforts.

### If you’re considering starting a small business online, now is the right time – e-retail revenues are projected to grow to $6.5 trillion in 2022.

#### Keep in mind starting an online business requires plenty of effort and time to succeed.

### To increase the chances of success, consider picking an idea that suits your skills and interests. Having some prior knowledge about the field can make for easier business management.

### Self-Publish an eBook
- Depending on the platform, you can get 35%-75% of royalties for each eBook sold. Bear in mind that book production expenses can range between $100 and $6000
Thanks to the internet, becoming an author no longer requires sending a manuscript to a publisher. It’s now possible to sell eBooks using a personal website or self-publishing sites, like Amazon KDP.

### Launch an Online Store
- Estimated Income: $1000-$100,000+/year, depending on the market size as well as eCommerce store and operational expenses
- Requirements: Business management, digital marketing, and site maintenance skills

Creating an online store is one of the most rewarding internet business ideas you can try. With the right strategy, you can become the next person to launch a multi-million dollar brand.

Try tapping into a micro-niche. It may have low traffic at first, but this also comes with low competition and considerable growth potential.

### Launch a Subscription Box
- Estimated Income: Based on Starter Story’s reports, the revenue can range from $6000 to $400,000+/month
- Requirements: Business management, digital marketing, and site maintenance skills
A subscription box service is a business model that delivers a package of products periodically to customers, like Dollar Shave Club.

These services have gained more traction in recent years. Reports reveal that 54% of online shoppers are subscribed to at least one subscription box service, usually for reasons like personalized experience and convenience.

A good example is Butcher Box. This subscription service delivers various kinds of meat, a grocery staple for many households. The brand uses its organic sourcing as its unique selling point to provide customers with more value when purchasing their product.

### Design Website Themes
- Estimated Income: $5-$200+/theme licence for each theme sold
- Requirements: Other than skills in web design and front-end development, it’s good to be familiar with CMSs, like WordPress

Selling site themes is an excellent online business idea for web designers looking to earn money on the side. As more people launch their own websites, the demand for beautiful and easy-to-use pre-made designs also increases.

To boost a theme’s value, consider including regular updates and priority support into the package. Alternatively, provide a custom theme service. Online businesses are usually willing to pay thousands of dollars for a one-of-a-kind design.

### Develop Apps
- Estimated Income: According to Codementor, the average salary is $61-$80/hour
- Requirements: Skills in app development, UI/UX design, product management

If you have a concept that can translate well into a mobile or web app, consider this business idea. Nowadays, people turn to apps to solve various problems – from increasing productivity to maintaining mindfulness.

### Work as an SEO Consultant
- Estimated Income: According to Ahrefs, the average rate is $68/hour
- Requirements: On-page, off-page, and technical search engine optimization skills

SEO has become one of the most critical success factors for online businesses. It’s a cost-effective way to not only raise brand awareness but also generate high-quality traffic.

SEO consultants advise clients on how to optimize their websites for search engines. Since the job market is competitive, consider choosing a specialization or customer segment to target. Doing so can make you the go-to person for specific services.

### How to Start an Online Business
- Now that you have the list of the best online business ideas, it’s time to pick one and get started
1. Choose a Product or Service
2. Conduct Market Research
3. Create a Business Plan
4. Legally Register Your Business
5. Sign Up for Web Hosting
6. Register a Domain Name
7. Set Up Your Website or Online Store
8. Publish and Promote Your Online Business

#### If you need help with any of those steps we will be happy to help You [click here](https://slavo3.com)


### There are two different ways in TypeScript how you can specify the structure of your data

### We can use Interface and Types

#### They are very similar, almost everything you can do with the Interface, you can also do with the Type

#### In TypeScript is recommending to use Interface over Type alias when it's possible

#### Interface describes data structure in a more natural way

#### Interface keyword exists only in TypeScript non in vanilla JavaScript. It is helping us to write structured and very explicit code that can help you force classes to have certain features or objects in general to have a specific structure. They allow for optional properties and all optional methods if you add a question mark after the method name  

#### You can't assign a default value inside the Interface, just the property's name, and type  

```js
  interface User {
    username: string
    project: string
    years: number

    hello?(name: string): void 
  }

  const userOne: User = {
    username: "slavo3dev",
    project: "NRG Nomad",
    years: 1
  }
```

### Type Alias

```js
  type Username = string
  type PersonLogFunction = (name: string) =>  string 

  const username: string = "Slavo3 NRG Nomad"

  const logUser: PersonLogFunction = (name) => {
    return name;
  }

  const firstUser: Username = logUser(username)
```


## When we are writing TypeScript code, we are just writing JavaScript. 

```js
  // TypeScript = JavaScript + A Type System 
  const name: string = "NRG Nomad";
  const isBlog: boolean = true;
```

### TypeScript is very powerful compiler that you can run over your code to compile your typescript code to JavaScript.

### Type System is helping us catch errors during the development. The Type System is only available during the development. Once we deploy our application or even run inside of our browser in a development environment, the entire type of system falls away. Before we are running code, we need to compile our typescript code, and we are going to get some JavaScript out of that.  

### TypeScript is going to be constantly analyzing our code and looking for bugs. If it finds any possible bug, it will pop an open error message inside your code editor. 

# FYI - The TypeScript compiler does not do any performance optimization.

### TypeScript Compiler is using  "TYPE ANNOTATIONS" to analyze our codebase.  A developer is responsible for adding these "type annotations .". Imagine these "type annotations " as being like comments to describe your code's purpose or the information flowing through our program.  

#### ( Learn JavaScrtipt First to understand TypeScript )
## TypeScript Code -> TypeScript Compiler -> JavaScript :):):) 

#### A developer using TypeScript is impressive because it gives you extra error checking where errors you would otherwise get as runtime can be caught and fixed early during development. 

#### Whit types, we need to be way more explicit about how things work, and we can avoid many unexpected errors

#### We can use certain next-generation JavaScript features, which you can write and use in our typescript files, and then they will get compiled down to JavaScript code to workarounds that even work in older browsers. 

#### VS Code gets support in non TypeScript Projects. VS Code gives you better help in plain JavaScript files because it can use some types of features under the hood without explicitly using typescript.  

#### Start with TypeScript: 
- install nodejs - https://nodejs.org/en/
```js
 const command: string = "sudo npm install -g typescript"
```

foo(Nomad)

Featured Posts