Tanya  Shields

Tanya Shields

1596940020

A Walk Through Setting the Types in Typescript: Annotations vs Inference

In this article, we will discuss:

  • What are types
  • Two systems to set types in typescript: annotations vs inference
  • Usage of types for primitive values
  • Types with functions: arrow functions, function keyword, anonymous functions
  • Why we should always use annotations to set the return type
  • Types with objects: object destructuring, nested objects

In typescript, any value —anything at all that can be saved to a variable, has a type.

In plain words, we can think of a type as a way to easily refer to the different properties and functions that a value has. When we think of a value having methods, first thing that comes to mind is a class or an object with custom methods in them. But remember, that even primitive types have many built-in methods associated with the type. For example, type of number has toString() method and type of string has charAt() method. When we use proper types for the values, typescript will also check for this built-in methods availability on a certain type.

There are two different systems that are used by typescript to figure out the type of a value, type annotations and type inference, which work side by side.

In essence, when we use type annotations it means that the developer explicitly told the typescript what the type is. On the other hand, type inference means that the typescript “guessed” the type (derived it from the code around the value).


Using types with primitive values

In most cases, it is totally fine to rely on inference system for primitive types. For example, this code will result in the same exact error in both cases:

let apples: number = 5;

let count = 7;
// Type '"plenty"' is not assignable to type 'number'
// Type '"a lot"' is not assignable to type 'number'
apples = 'a lot';
count = 'plenty';

However, there are three cases when we are better off using type annotations and setting the types explicitly. Let’s go over them one by one:

Image for post

Function returns ‘’any” type

The first case is when the function returns type any and we want to clarify it. In this situation JSON.parse returns valid JS from a string. It can be any number of things, depending on the passed string. Here we use type annotation to set explicitly that we expect coords value to be an object with x and y properties; both are a number.

Image for post

Delayed variable initialization

Granted, this is a bit of a strange example; and in reality, we would possibly initialize foundGreen to false or, even better, use includes() array method. However, if for any reason we need to declare a variable before initializing it, we have to use type annotations to specify the type.

Image for post

Type cannot be reasonably inferred

In this example, we want to have a variable with a positive number or false . If we intend for a variable to change type — we have to specify all of the possible types ahead of time.

To sum it up, for primitive values we will rely on type inference as much as we can, and use type annotations for the three cases described above.

#javascript #best-practices #development #typescript #coding #programming

What is GEEK

Buddha Community

A Walk Through Setting the Types in Typescript: Annotations vs Inference
Tanya  Shields

Tanya Shields

1596940020

A Walk Through Setting the Types in Typescript: Annotations vs Inference

In this article, we will discuss:

  • What are types
  • Two systems to set types in typescript: annotations vs inference
  • Usage of types for primitive values
  • Types with functions: arrow functions, function keyword, anonymous functions
  • Why we should always use annotations to set the return type
  • Types with objects: object destructuring, nested objects

In typescript, any value —anything at all that can be saved to a variable, has a type.

In plain words, we can think of a type as a way to easily refer to the different properties and functions that a value has. When we think of a value having methods, first thing that comes to mind is a class or an object with custom methods in them. But remember, that even primitive types have many built-in methods associated with the type. For example, type of number has toString() method and type of string has charAt() method. When we use proper types for the values, typescript will also check for this built-in methods availability on a certain type.

There are two different systems that are used by typescript to figure out the type of a value, type annotations and type inference, which work side by side.

In essence, when we use type annotations it means that the developer explicitly told the typescript what the type is. On the other hand, type inference means that the typescript “guessed” the type (derived it from the code around the value).


Using types with primitive values

In most cases, it is totally fine to rely on inference system for primitive types. For example, this code will result in the same exact error in both cases:

let apples: number = 5;

let count = 7;
// Type '"plenty"' is not assignable to type 'number'
// Type '"a lot"' is not assignable to type 'number'
apples = 'a lot';
count = 'plenty';

However, there are three cases when we are better off using type annotations and setting the types explicitly. Let’s go over them one by one:

Image for post

Function returns ‘’any” type

The first case is when the function returns type any and we want to clarify it. In this situation JSON.parse returns valid JS from a string. It can be any number of things, depending on the passed string. Here we use type annotation to set explicitly that we expect coords value to be an object with x and y properties; both are a number.

Image for post

Delayed variable initialization

Granted, this is a bit of a strange example; and in reality, we would possibly initialize foundGreen to false or, even better, use includes() array method. However, if for any reason we need to declare a variable before initializing it, we have to use type annotations to specify the type.

Image for post

Type cannot be reasonably inferred

In this example, we want to have a variable with a positive number or false . If we intend for a variable to change type — we have to specify all of the possible types ahead of time.

To sum it up, for primitive values we will rely on type inference as much as we can, and use type annotations for the three cases described above.

#javascript #best-practices #development #typescript #coding #programming

Verdie  Murray

Verdie Murray

1636240140

What Is The Main Difference Of TYPES Vs INTERFACES in TypeScript

TypeScript has two ways of declaring structures of your objects in the form of  #types (type aliases) and #interfaces.

In this lesson we will look at the technical differences between these two, when you should use which, along with real world #TypeScript code analysis, and community thoughts

#typescript 

Fredy  Larson

Fredy Larson

1613612291

Type Annotation vs. Type Inference in TypeScript

A look into how to add types to variables in TypeScript

Welcome to the land of TypeScript! A superset of the JavaScript language where every value has a type associated with it.

In this article, we will get our feet wet with TypeScript by understanding the difference between type annotation and type inference. I will assume you have some JavaScript experience and know about basic types, like string, number, and boolean. If you are not familiar with types, have a look at the documentation below to get started.

Handbook — Basic Types

#javascript #programming #typescript

Flo  D'Amore

Flo D'Amore

1602575127

Typescript Type Declaration

Most programming languages are designed in a way to limit the amount of typing a user has to perform because well, people are naturally lazy. So when I decided to start learning TypeScript, which is a strict syntactical superset of JavaScript that adds optional static typing, I also want to be lazy at every opportunity I could find. In order to save my fingers some effort in TypeScript I first had to understand type annotation and inference.

Annotation

Type Annotation is simply when you tell Typescript what type of variable you want to define in same line you define it. There are twelve basic types in Typescript such as boolean, number, string, array, etc. In Figure 1, a variable a is defined but the type is not declared leading to a warning that the type is set to any, meaning the type can be any of the twelve that exist in Typescript. This is undesirable as it defeats the whole purpose of using Typescript which is to catch type errors in our code during development instead of at execution. This warning message can be simply resolved by defining the type at the variable declaration. In Figure 1, variable b is type annotated to have a number type.

Image for post

Figure 1: Type Annotation

Inference

Type inference is basically the opposite of type Annotation; instead of you directly telling Typescript which type of variable you are declaring, TypeScript figures out what type the variable should be based on the information you give it. This occurs when you declare a value the same time you declare a variable as seen in Figure 2. This will save you some keystrokes and will likely cover approximately 90% of your use cases.

Image for post

Figure 2: Type Inference

#typescript #annotations #inference

Autumn  Blick

Autumn Blick

1598839687

How native is React Native? | React Native vs Native App Development

If you are undertaking a mobile app development for your start-up or enterprise, you are likely wondering whether to use React Native. As a popular development framework, React Native helps you to develop near-native mobile apps. However, you are probably also wondering how close you can get to a native app by using React Native. How native is React Native?

In the article, we discuss the similarities between native mobile development and development using React Native. We also touch upon where they differ and how to bridge the gaps. Read on.

A brief introduction to React Native

Let’s briefly set the context first. We will briefly touch upon what React Native is and how it differs from earlier hybrid frameworks.

React Native is a popular JavaScript framework that Facebook has created. You can use this open-source framework to code natively rendering Android and iOS mobile apps. You can use it to develop web apps too.

Facebook has developed React Native based on React, its JavaScript library. The first release of React Native came in March 2015. At the time of writing this article, the latest stable release of React Native is 0.62.0, and it was released in March 2020.

Although relatively new, React Native has acquired a high degree of popularity. The “Stack Overflow Developer Survey 2019” report identifies it as the 8th most loved framework. Facebook, Walmart, and Bloomberg are some of the top companies that use React Native.

The popularity of React Native comes from its advantages. Some of its advantages are as follows:

  • Performance: It delivers optimal performance.
  • Cross-platform development: You can develop both Android and iOS apps with it. The reuse of code expedites development and reduces costs.
  • UI design: React Native enables you to design simple and responsive UI for your mobile app.
  • 3rd party plugins: This framework supports 3rd party plugins.
  • Developer community: A vibrant community of developers support React Native.

Why React Native is fundamentally different from earlier hybrid frameworks

Are you wondering whether React Native is just another of those hybrid frameworks like Ionic or Cordova? It’s not! React Native is fundamentally different from these earlier hybrid frameworks.

React Native is very close to native. Consider the following aspects as described on the React Native website:

  • Access to many native platforms features: The primitives of React Native render to native platform UI. This means that your React Native app will use many native platform APIs as native apps would do.
  • Near-native user experience: React Native provides several native components, and these are platform agnostic.
  • The ease of accessing native APIs: React Native uses a declarative UI paradigm. This enables React Native to interact easily with native platform APIs since React Native wraps existing native code.

Due to these factors, React Native offers many more advantages compared to those earlier hybrid frameworks. We now review them.

#android app #frontend #ios app #mobile app development #benefits of react native #is react native good for mobile app development #native vs #pros and cons of react native #react mobile development #react native development #react native experience #react native framework #react native ios vs android #react native pros and cons #react native vs android #react native vs native #react native vs native performance #react vs native #why react native #why use react native