Introduction to TypeScript

TypeScript is a programming language developed by Microsoft. It is built on top of JavaScript and adds additional features such as static typing.

TypeScript code is eventually converted into JavaScript so that it can run in JavaScript environments.

let name: string = "Rahul";

Here, string specifies that the variable should contain text.

TypeScript is based on JavaScript. This means JavaScript developers can gradually learn TypeScript without learning an entirely unrelated programming language.

JavaScript:

let age = 20;

TypeScript:

let age: number = 20;

TypeScript provides additional information about the expected type of a value.

Large JavaScript applications can become difficult to maintain. As projects become larger, finding mistakes and understanding the structure of data can become more difficult.

TypeScript helps developers by providing features such as:

• Static type checking
• Interfaces
• Type aliases
• Generics
• Better editor support

TypeScript is often described as a superset of JavaScript.

This means that valid JavaScript code can generally be used in a TypeScript project.

let message = "Hello";

console.log(message);

This is valid JavaScript and is also valid TypeScript.

One of the most important features of TypeScript is static typing.

let age: number = 25;

let name: string = "Amit";

let isStudent: boolean = true;

The types tell TypeScript what kind of values these variables are expected to contain.

A type describes what kind of value a variable can contain.

Common TypeScript types include:

• string
• number
• boolean
• array
• object
• tuple
• any
• unknown

let city: string = "Patna";
let age: number = 25;
let active: boolean = true;

Consider the following TypeScript code:

let studentName: string = "Rahul";
let age: number = 21;
let passed: boolean = true;

console.log(studentName);
console.log(age);
console.log(passed);

Each variable has a declared type.

TypeScript can detect many type-related mistakes before the application runs.

let age: number = 25;

age = "twenty";

The variable is declared as a number, but a string is assigned to it. TypeScript can report this as a type error.

TypeScript works especially well with modern code editors. Editors can provide useful information while writing TypeScript code.

For example, the editor can provide:

• Code completion
• Error highlighting
• Type information
• Suggestions
• Automatic navigation

TypeScript is commonly used with React applications.

It can help developers define the expected structure of component properties, state, functions, and other data.

type User = {
    name: string;
    age: number;
};

This describes the structure of a User object.

TypeScript is also very useful when developing React Native mobile applications.

It can be used to describe:

• Component props
• State values
• Navigation parameters
• API responses
• User data
• Form data

A user object in a React Native application can be described using TypeScript.

type User = {
    id: number;
    name: string;
    email: string;
};

const user: User = {
    id: 1,
    name: "Rahul",
    email: "rahul@example.com"
};

This makes the expected structure of the user data clear.

TypeScript files normally use the .ts extension.

app.ts

When TypeScript is used with JSX, the .tsx extension is commonly used.

App.tsx

The two important TypeScript file extensions are:

React and React Native components commonly use .tsx files when JSX is included.

Browsers and JavaScript environments execute JavaScript. TypeScript is therefore processed into JavaScript.

The TypeScript compiler performs this conversion.

TypeScript Code
       ↓
TypeScript Compiler
       ↓
JavaScript Code

The TypeScript compiler is commonly called tsc.

It checks TypeScript code and can generate JavaScript output.

tsc app.ts

This command tells the TypeScript compiler to process the file named app.ts.

TypeScript provides development-time features such as type checking. The final application normally runs JavaScript.

This is especially important to understand when learning React Native with TypeScript.

TypeScript
    ↓
JavaScript
    ↓
Application Runtime

TypeScript becomes particularly useful as an application grows.

In a large project, many developers may work with the same codebase. Types help communicate how data and functions are expected to work.

This can make the code easier to understand and maintain.

Type annotations can make the purpose of variables clear.

let username: string = "Amit";
let age: number = 22;
let loggedIn: boolean = true;

From the code itself, we can understand what type of value each variable is expected to contain.

Maintainability means making code easier to understand, modify, and extend over time.

TypeScript can help by providing:

• Clear data structures
• Type checking
• Better editor support
• Safer refactoring
• Clearer function definitions

TypeScript can specify the types of function parameters and return values.

function add(a: number, b: number): number {
    return a + b;
}

console.log(add(10, 20));

Here both parameters and the returned value are numbers.

TypeScript can describe the expected structure of objects.

let student: {
    name: string;
    age: number;
} = {
    name: "Priya",
    age: 20
};

The object must follow the specified structure.

TypeScript can specify the type of values stored in an array.

let marks: number[] = [80, 75, 90];

let names: string[] = [
    "Rahul",
    "Amit",
    "Priya"
];

The first array contains numbers and the second contains strings.

TypeScript is commonly used in modern application development.

It can be used with technologies such as:

• React
• React Native
• Node.js
• Angular
• Next.js

In this tutorial, our main focus will be TypeScript for React Native development.

To learn TypeScript effectively, we will progress from basic concepts to advanced concepts.

1. Types and variables
2. Functions
3. Objects
4. Interfaces
5. Union types
6. Generics
7. Classes
8. TypeScript with React
9. TypeScript with React Native

During this tutorial series, you will learn how to:

• Create TypeScript variables.
• Use different data types.
• Create typed functions.
• Work with objects and arrays.
• Create interfaces.
• Use advanced types.
• Use generics.
• Use TypeScript with React.
• Use TypeScript with React Native.
• Build practical TypeScript-based applications.

Here is a simple TypeScript program:

let studentName: string = "Rahul";
let age: number = 20;

function displayStudent(): void {
    console.log(studentName);
    console.log(age);
}

displayStudent();

This example uses variables, type annotations, a function, and a return type.

If you already know JavaScript and React, TypeScript can be learned progressively.

You do not need to stop learning React Native. Instead, you will learn how TypeScript can be used to make React Native code more structured and type-safe.

Later lessons will connect TypeScript concepts directly with React Native components and application development.

• TypeScript: A programming language based on JavaScript.
• Type: Describes the kind of value a variable can contain.
• Type Annotation: Explicitly specifies a type.
• Compiler: Processes TypeScript code into JavaScript.
• ts: TypeScript file extension.
• tsx: TypeScript file extension commonly used with JSX.

TypeScript extends JavaScript with a powerful type system and additional development features.

It can help developers identify type-related mistakes, understand data structures, and maintain large applications.

Since you are learning TypeScript for React Native, the upcoming lessons will gradually move from basic TypeScript concepts toward practical React and React Native development.

JavaScript
    +
Type System
    +
Modern Development Features
    =
TypeScript