TypeScript Basics

January 29, 2022

(7 min read)

Brief Introduction

TypeScript is a super set of JavaScript. TypeScript builds on top of JavaScript. First, you write the TypeScript code. Then, you compile the TypeScript code into plain JavaScript code using a TypeScript compiler. Once you have the plain JavaScript code, you can deploy it to any environments that JavaScript runs.

TypeScript files use the .ts extension rather than the .js extension of JavaScript files.

what-is-typescript-compiler.png

TypeScript uses the JavaScript syntaxes and adds additional syntaxes for supporting Types.

Basic Types

TypeScript Basic Primitive Types are: number, string, boolean, any

Arrays & Tuples

Array types can be written in one of two ways. These are: Array and T[]

TypeScript Tuples are arrays with fixed number of elements.

Unions & Enum

Union is a type that can be any of the types in the union.

Enum is a way to define a set of named constants. There are three types of enums: Numeric, String, Heterogeneous. When no value is given, the values are assigned sequentially as 0, 1, 2, 3.

Objects

instead of type, interface is might be used here. There are certain differences between them. The right one should be chosen according to the requirement.

Type Assertion

Type Assertion is a way to tell the compiler that the value has a certain type. When using TypeScript with JSX, only as-style assertions are allowed.

Functions

Interfaces

Interfaces are a way to define the shape of an object.

Function Interface

Function interfaces are used to define the shape of a function.

Classes & Data(Access) Modifiers

Classes are a way to define a type that represents an object. Data modifiers are used to modify the data of an object.

Implement Interface in Class

Extending Classes(Subclasses)

Generics

Generics are a way to specify the type of the data that an object or function accepts.

create useState() function with generics

TypeScript with React

To start a new Create React App project with TypeScript, you can run:

./src/App.tsx

./src/Header.tsx

Helpful resources

Category
HTML
Self-improvement
CSS
JavaScript
TailwindCSS
TypeScript
NextJS
ReactJS
Get In Touch
ozanbatuhankurucu@gmail.com

© 2023