[{"_1":2,"_211":-5,"_212":-5},"loaderData",{"_3":4,"_84":85,"_88":89},"root",{"_5":6,"_7":-5,"_8":-7,"_9":10,"_11":-7,"_12":13,"_14":13,"_15":16,"_17":18,"_51":52,"_54":55,"_72":73,"_74":75,"_76":75,"_77":-7,"_78":-7,"_79":-7,"_80":-5,"_81":13,"_82":-7,"_83":-7},"theme","light","currentUser","currentUserVersion2","currentPath","/articles/88f1f336-e4b4-4a77-83db-111918b0b5a9","customDomain","defaultLocale","en","blogLanguage","domainPrimaryAccentColor","dark","publicUser",{"_19":20,"_21":22,"_23":24,"_25":26,"_27":-5,"_28":29,"_30":29,"_31":32,"_33":34,"_35":36,"_37":16,"_38":-5,"_39":-5,"_40":41,"_42":43,"_44":45,"_46":45,"_47":48,"_49":-5,"_50":-5},"id","8a0c533d-3df7-4a38-a62f-f3dae4d5727a","state","draft","userDomainName","drewdru","userPubKey","d12614be726049c7ecfeb7307a63d38418bb82b91866b8764a903ff28ed99bc6","domainAliasName","icon","","appleTouchIcon","title","Drew Dru","description","IT pony blog","image","https://lh3.googleusercontent.com/a/ACg8ocIPZg0y73YNlg_lxkLp3FzgnwsZNEwxq8ALCL1h4u7cDHTq3Mg=s524-c-no","themeColor","headerLogoUrl","topArticleId","url","https://drewdru.com","messageFooterTemplate","blog_link: {{blog_link}}\nblog_name: {{blog_name}}\noriginal_link: {{original_link}}\npublisher_name: {{publisher_name}}\npublisher_username: {{publisher_username}}\nauthor_name: {{author_name}}\nauthor_username: {{author_username}}","createdAt","2025-05-22T08:17:42.331Z","updatedAt","userId","85a5eab8-b93e-46f2-b2f6-d213f32dad41","user","domainSettings","relays",[53],"wss://articles.layer3.news","plans",[56],{"_19":57,"_58":59,"_33":60,"_61":62,"_63":64,"_65":66,"_67":68,"_69":70,"_44":71,"_46":71},"92b61a30-1edf-44b2-b2c5-59b299bfced2","name","Free plan","Free notifications about new articles","price","0.00","currency","USD","billingInterval","monthly","trialDays",0,"isActive",true,"2025-10-06T08:23:02.298Z","perspectives",[],"isStripeConnected",false,"isDomainOwner","userInterfaceLanguage","interfacePreferences","error","session","locale","sessionNpub","sessionPublicKey","routes/($lang).articles",{"_86":75,"_74":75,"_38":-7,"_87":-7,"_79":-7},"hasPaywall","userSubscription","routes/($lang).articles.$id._index",{"_90":75,"_91":24,"_92":93,"_17":18,"_86":-7,"_209":210,"_74":75,"_79":-7},"isAuthenticated","userSchema","article",{"_19":94,"_95":96,"_97":96,"_98":13,"_31":99,"_33":29,"_100":-5,"_101":-5,"_102":-5,"_103":104,"_105":104,"_106":-5,"_107":-5,"_108":-5,"_109":-5,"_110":-5,"_111":-5,"_112":113,"_114":115,"_116":-5,"_117":118,"_21":119,"_120":121,"_122":75,"_123":75,"_124":-5,"_125":-5,"_126":-5,"_127":68,"_128":-5,"_129":-5,"_130":68,"_131":92,"_132":-5,"_133":-5,"_134":-5,"_135":-5,"_136":-5,"_137":-5,"_138":-5,"_139":-5,"_140":-5,"_141":-5,"_142":-5,"_143":-5,"_144":-5,"_145":146,"_147":-5,"_148":149,"_170":-5,"_171":172,"_173":-5,"_174":146,"_175":176,"_177":178,"_195":70,"_196":197,"_198":199,"_200":-5,"_44":201,"_46":201,"_47":-5,"_202":-5,"_203":-5,"_204":-5,"_205":-5,"_206":68,"_207":208},"88f1f336-e4b4-4a77-83db-111918b0b5a9","linkUrl","https://medium.com/@bthncm/getting-started-with-typescript-a-comprehensive-guide-for-beginners-7a4969b6679c?source=rss-4b0536ad1138------2","originalLink","language","Getting Started with TypeScript: A Comprehensive Guide for Beginners","originalTitle","originalDescription","slug","enclosure","https://cdn-images-1.medium.com/max/1024/1*bxBbtK-TOxdQHApI0jHRoQ.png","imageUrl","imageCaption","imageCopyrightNotice","videoUrl","videoCaption","videoCopyrightNotice","videoEmbedType","content","

TypeScript is gaining popularity in the world of web development due to its ability to enhance the maintainability and scalability of JavaScript applications. If you’re new to TypeScript, this comprehensive guide will walk you through the basics and help you start your journey in writing safer and more predictable code.

What is TypeScript?

At its core, TypeScript is a superset of JavaScript. This means that any valid JavaScript code is also valid TypeScript. TypeScript introduces static typing, which allows you to define the types of variables, function parameters, and return values. This additional layer of type information helps catch errors during development, making your code more reliable.

Benefits of TypeScript

Static Typing: TypeScript catches type-related errors at compile-time rather than runtime, reducing the chances of unexpected issues in your code.
Enhanced Tooling: TypeScript provides excellent tooling support through code editors like Visual Studio Code, helping you write code faster and with fewer mistakes.
Readability: Type annotations make your code self-documenting, making it easier for you and other developers to understand and maintain.
Community and Adoption: TypeScript is widely adopted in the industry, and it has a growing and active community, which means more resources and support for developers.

Setting Up Your Development Environment

Before you can start writing TypeScript, you need to set up your development environment.

1. Node.js and npm

TypeScript is typically installed and managed using npm, which is bundled with Node.js. To get started, download and install Node.js from the official website (https://nodejs.org/). This will also install npm.

2. Installing TypeScript

Once Node.js and npm are installed, you can install TypeScript globally on your system by running the following command in your terminal:

npm install -g typescript

This will give you access to the TypeScript compiler, denoted as tsc.

3. Creating a TypeScript Project

To create a new TypeScript project, navigate to your project’s directory in the terminal and initialize it with:

npm init -y

This command will generate a package.json file.

Your First TypeScript Program

Now that your development environment is set up, let’s write a simple TypeScript program.

1. Create a TypeScript File

Create a new file called app.ts in your project directory.

2. Write TypeScript Code

In app.ts, write the following code:

function sayHello(name: string) {
  console.log(`Hello, ${name}!`);
}

const user = \"Batuhan\";
sayHello(user);

This code defines a function sayHello that takes a parameter of type string and logs a greeting to the console.

3. Compile TypeScript to JavaScript

To compile this TypeScript code into JavaScript, run the following command in your terminal:

tsc app.ts

This will generate an app.js file in the same directory.

4. Run Your JavaScript Code

You can now run the JavaScript code using Node.js:

node app.js

You should see the output: “Hello, Batuhan!”

Congratulations! You’ve written and executed your first TypeScript program.

TypeScript Types

One of TypeScript’s key features is its ability to work with different data types. Let’s explore some of the basic types:

1. Number

let age: number = 25;

2. String

let name: string = \"Batuhan\";

3. Boolean

let isStudent: boolean = false;

4. Any

let dynamicValue: any = \"Hello, TypeScript!\";

These are just a few examples of TypeScript’s basic types. TypeScript also allows you to define custom types and interfaces to shape your data more precisely.

Interfaces and Custom Types

Interfaces and custom types help you define the shape of your data. Let’s take a look at how to use them:

1. Interfaces

interface Person {
  name: string;
  age: number;
}

function greet(person: Person) {
  console.log(`Hello, ${person.name}! You are ${person.age} years old.`);
}

const user: Person = {
  name: \"Batuhan\",
  age: 25,
};

greet(user);

In this example, we’ve defined an interface Person that specifies the expected properties of an object. The greet function takes an argument of type Person.

2. Custom Types

type Point = {
  x: number;
  y: number;
};

const point: Point = {
  x: 10,
  y: 20,
};

Here, we’ve created a custom type Point using the type keyword. It defines the shape of a point with x and y coordinates.

Functions and Classes in TypeScript

TypeScript also allows you to define functions and classes with strong typing:

1. Functions

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

In this example, we’ve defined a function sum that takes two parameters, both of type number, and returns a number.

2. Classes

class Dog {
  constructor(public name: string) {}

  bark() {
    console.log(`Woof! My name is ${this.name}.`);
  }
}

const myDog = new Dog(\"Buddy\");
myDog.bark();

Here, we’ve defined a class Dog with a constructor and a method. We've also used the public access modifier in the constructor parameter, which automatically creates and initializes a class property.

Working with Modules

Modularity is essential in large-scale applications. TypeScript supports different module systems, including CommonJS and ES6 modules.

1. Exporting and Importing

// math.ts
export function sum(a: number, b: number): number {
  return a + b;
}

// app.ts
import { add } from \"./math\";

const result = add(5, 3);
console.log(result); // 8

In this example, we’ve defined a function sum in a separate module (math.ts) and imported it into our main application (app.ts).

Advanced TypeScript Features

As you become more comfortable with TypeScript, you can explore advanced features like generics, decorators, and union types. These features allow you to write even more expressive and flexible code.

TypeScript Tooling and IDEs

TypeScript integrates seamlessly with popular code editors like Visual Studio Code, providing features like intelligent code completion, error checking, and code navigation.

To get the most out of TypeScript, consider using an editor that supports TypeScript out of the box.

Debugging TypeScript

Debugging TypeScript code is similar to debugging JavaScript. You can set breakpoints in your TypeScript files and use debugging tools provided by your editor.

Additionally, TypeScript generates source maps during compilation, making it easier to debug the original TypeScript code in the browser’s developer tools.

Testing TypeScript Code

For testing TypeScript code, you can use testing frameworks like Jest, Jasmine, or Mocha. These frameworks have TypeScript typings available, ensuring a smooth testing experience.

Building and Deploying TypeScript Applications

When you’re ready to deploy your TypeScript application to production, you’ll need to compile your TypeScript code into JavaScript. This can be done using the TypeScript compiler (tsc) or through build tools like Webpack or Parcel.

Conclusion

Congratulations! You’ve taken your first steps into the world of TypeScript. With TypeScript’s static typing, interfaces, and advanced features, you can write more robust and maintainable code. As you continue your TypeScript journey, don’t hesitate to explore the rich ecosystem of libraries and tools available to TypeScript developers.

Remember that practice makes perfect, so keep coding, learning, and building. TypeScript offers a powerful way to level up your web development skills, and you’re well on your way to becoming a TypeScript pro.

Happy coding!

$\"\"$ ","contentEncoded","

What is TypeScript?

Benefits of TypeScript

Static Typing: TypeScript catches type-related errors at compile-time rather than runtime, reducing the chances of unexpected issues in your code.
Enhanced Tooling: TypeScript provides excellent tooling support through code editors like Visual Studio Code, helping you write code faster and with fewer mistakes.
Readability: Type annotations make your code self-documenting, making it easier for you and other developers to understand and maintain.
Community and Adoption: TypeScript is widely adopted in the industry, and it has a growing and active community, which means more resources and support for developers.

Setting Up Your Development Environment

Before you can start writing TypeScript, you need to set up your development environment.

1. Node.js and npm

2. Installing TypeScript

Once Node.js and npm are installed, you can install TypeScript globally on your system by running the following command in your terminal:

npm install -g typescript

This will give you access to the TypeScript compiler, denoted as tsc.

3. Creating a TypeScript Project

To create a new TypeScript project, navigate to your project’s directory in the terminal and initialize it with:

npm init -y

This command will generate a package.json file.

Your First TypeScript Program

Now that your development environment is set up, let’s write a simple TypeScript program.

1. Create a TypeScript File

Create a new file called app.ts in your project directory.

2. Write TypeScript Code

In app.ts, write the following code:

function sayHello(name: string) {
  console.log(`Hello, ${name}!`);
}

const user = \"Batuhan\";
sayHello(user);

This code defines a function sayHello that takes a parameter of type string and logs a greeting to the console.

3. Compile TypeScript to JavaScript

To compile this TypeScript code into JavaScript, run the following command in your terminal:

tsc app.ts

This will generate an app.js file in the same directory.

4. Run Your JavaScript Code

You can now run the JavaScript code using Node.js:

node app.js

You should see the output: “Hello, Batuhan!”

Congratulations! You’ve written and executed your first TypeScript program.

TypeScript Types

One of TypeScript’s key features is its ability to work with different data types. Let’s explore some of the basic types:

1. Number

let age: number = 25;

2. String

let name: string = \"Batuhan\";

3. Boolean

let isStudent: boolean = false;

4. Any

let dynamicValue: any = \"Hello, TypeScript!\";

These are just a few examples of TypeScript’s basic types. TypeScript also allows you to define custom types and interfaces to shape your data more precisely.

Interfaces and Custom Types

Interfaces and custom types help you define the shape of your data. Let’s take a look at how to use them:

1. Interfaces

interface Person {
  name: string;
  age: number;
}

function greet(person: Person) {
  console.log(`Hello, ${person.name}! You are ${person.age} years old.`);
}

const user: Person = {
  name: \"Batuhan\",
  age: 25,
};

greet(user);

In this example, we’ve defined an interface Person that specifies the expected properties of an object. The greet function takes an argument of type Person.

2. Custom Types

type Point = {
  x: number;
  y: number;
};

const point: Point = {
  x: 10,
  y: 20,
};

Here, we’ve created a custom type Point using the type keyword. It defines the shape of a point with x and y coordinates.

Functions and Classes in TypeScript

TypeScript also allows you to define functions and classes with strong typing:

1. Functions

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

In this example, we’ve defined a function sum that takes two parameters, both of type number, and returns a number.

2. Classes

class Dog {
  constructor(public name: string) {}

  bark() {
    console.log(`Woof! My name is ${this.name}.`);
  }
}

const myDog = new Dog(\"Buddy\");
myDog.bark();

Working with Modules

Modularity is essential in large-scale applications. TypeScript supports different module systems, including CommonJS and ES6 modules.

1. Exporting and Importing

// math.ts
export function sum(a: number, b: number): number {
  return a + b;
}

// app.ts
import { add } from \"./math\";

const result = add(5, 3);
console.log(result); // 8

In this example, we’ve defined a function sum in a separate module (math.ts) and imported it into our main application (app.ts).

Advanced TypeScript Features

As you become more comfortable with TypeScript, you can explore advanced features like generics, decorators, and union types. These features allow you to write even more expressive and flexible code.

TypeScript Tooling and IDEs

TypeScript integrates seamlessly with popular code editors like Visual Studio Code, providing features like intelligent code completion, error checking, and code navigation.

To get the most out of TypeScript, consider using an editor that supports TypeScript out of the box.

Debugging TypeScript

Debugging TypeScript code is similar to debugging JavaScript. You can set breakpoints in your TypeScript files and use debugging tools provided by your editor.

Additionally, TypeScript generates source maps during compilation, making it easier to debug the original TypeScript code in the browser’s developer tools.

Testing TypeScript Code

For testing TypeScript code, you can use testing frameworks like Jest, Jasmine, or Mocha. These frameworks have TypeScript typings available, ensuring a smooth testing experience.

Building and Deploying TypeScript Applications

Conclusion

Happy coding!

$\"\"$ ","freeContentEncoded","textContent","TypeScript is gaining popularity in the world of web development due to its ability to enhance the maintainability and scalability of JavaScript applications. If you’re new to TypeScript, this comprehensive guide will walk you through the basics and help you start your journey in writing safer and more predictable code.What is TypeScript?At its core, TypeScript is a superset of JavaScript. This means that any valid JavaScript code is also valid TypeScript. TypeScript introduces static typing, which allows you to define the types of variables, function parameters, and return values. This additional layer of type information helps catch errors during development, making your code more reliable.Benefits of TypeScriptStatic Typing: TypeScript catches type-related errors at compile-time rather than runtime, reducing the chances of unexpected issues in your code.Enhanced Tooling: TypeScript provides excellent tooling support through code editors like Visual Studio Code, helping you write code faster and with fewer mistakes.Readability: Type annotations make your code self-documenting, making it easier for you and other developers to understand and maintain.Community and Adoption: TypeScript is widely adopted in the industry, and it has a growing and active community, which means more resources and support for developers.Setting Up Your Development EnvironmentBefore you can start writing TypeScript, you need to set up your development environment.1. Node.js and npmTypeScript is typically installed and managed using npm, which is bundled with Node.js. To get started, download and install Node.js from the official website (https://nodejs.org/). This will also install npm.2. Installing TypeScriptOnce Node.js and npm are installed, you can install TypeScript globally on your system by running the following command in your terminal:npm install -g typescriptThis will give you access to the TypeScript compiler, denoted as tsc.3. Creating a TypeScript ProjectTo create a new TypeScript project, navigate to your project’s directory in the terminal and initialize it with:npm init -yThis command will generate a package.json file.Your First TypeScript ProgramNow that your development environment is set up, let’s write a simple TypeScript program.1. Create a TypeScript FileCreate a new file called app.ts in your project directory.2. Write TypeScript CodeIn app.ts, write the following code:function sayHello(name: string) { console.log(`Hello, ${name}!`);}const user = \"Batuhan\";sayHello(user);This code defines a function sayHello that takes a parameter of type string and logs a greeting to the console.3. Compile TypeScript to JavaScriptTo compile this TypeScript code into JavaScript, run the following command in your terminal:tsc app.tsThis will generate an app.js file in the same directory.4. Run Your JavaScript CodeYou can now run the JavaScript code using Node.js:node app.jsYou should see the output: “Hello, Batuhan!”Congratulations! You’ve written and executed your first TypeScript program.TypeScript TypesOne of TypeScript’s key features is its ability to work with different data types. Let’s explore some of the basic types:1. Numberlet age: number = 25;2. Stringlet name: string = \"Batuhan\";3. Booleanlet isStudent: boolean = false;4. Anylet dynamicValue: any = \"Hello, TypeScript!\";These are just a few examples of TypeScript’s basic types. TypeScript also allows you to define custom types and interfaces to shape your data more precisely.Interfaces and Custom TypesInterfaces and custom types help you define the shape of your data. Let’s take a look at how to use them:1. Interfacesinterface Person { name: string; age: number;}function greet(person: Person) { console.log(`Hello, ${person.name}! You are ${person.age} years old.`);}const user: Person = { name: \"Batuhan\", age: 25,};greet(user);In this example, we’ve defined an interface Person that specifies the expected properties of an object. The greet function takes an argument of type Person.2. Custom Typestype Point = { x: number; y: number;};const point: Point = { x: 10, y: 20,};Here, we’ve created a custom type Point using the type keyword. It defines the shape of a point with x and y coordinates.Functions and Classes in TypeScriptTypeScript also allows you to define functions and classes with strong typing:1. Functionsfunction sum(a: number, b: number): number { return a + b;}In this example, we’ve defined a function sum that takes two parameters, both of type number, and returns a number.2. Classesclass Dog { constructor(public name: string) {} bark() { console.log(`Woof! My name is ${this.name}.`); }}const myDog = new Dog(\"Buddy\");myDog.bark();Here, we’ve defined a class Dog with a constructor and a method. We've also used the public access modifier in the constructor parameter, which automatically creates and initializes a class property.Working with ModulesModularity is essential in large-scale applications. TypeScript supports different module systems, including CommonJS and ES6 modules.1. Exporting and Importing// math.tsexport function sum(a: number, b: number): number { return a + b;}// app.tsimport { add } from \"./math\";const result = add(5, 3);console.log(result); // 8In this example, we’ve defined a function sum in a separate module (math.ts) and imported it into our main application (app.ts).Advanced TypeScript FeaturesAs you become more comfortable with TypeScript, you can explore advanced features like generics, decorators, and union types. These features allow you to write even more expressive and flexible code.TypeScript Tooling and IDEsTypeScript integrates seamlessly with popular code editors like Visual Studio Code, providing features like intelligent code completion, error checking, and code navigation.To get the most out of TypeScript, consider using an editor that supports TypeScript out of the box.Debugging TypeScriptDebugging TypeScript code is similar to debugging JavaScript. You can set breakpoints in your TypeScript files and use debugging tools provided by your editor.Additionally, TypeScript generates source maps during compilation, making it easier to debug the original TypeScript code in the browser’s developer tools.Testing TypeScript CodeFor testing TypeScript code, you can use testing frameworks like Jest, Jasmine, or Mocha. These frameworks have TypeScript typings available, ensuring a smooth testing experience.Building and Deploying TypeScript ApplicationsWhen you’re ready to deploy your TypeScript application to production, you’ll need to compile your TypeScript code into JavaScript. This can be done using the TypeScript compiler (tsc) or through build tools like Webpack or Parcel.ConclusionCongratulations! You’ve taken your first steps into the world of TypeScript. With TypeScript’s static typing, interfaces, and advanced features, you can write more robust and maintainable code. As you continue your TypeScript journey, don’t hesitate to explore the rich ecosystem of libraries and tools available to TypeScript developers.Remember that practice makes perfect, so keep coding, learning, and building. TypeScript offers a powerful way to level up your web development skills, and you’re well on your way to becoming a TypeScript pro.Happy coding!","published","strategy","content-ready","locked","deleted","deletedAt","isSyncedFromOwnBlog","original","duplicatesCount","duplicateVersion","originalArticleId","errorsCount","appearance","color","backgroundColor","shortSummary","summary","bullets","persons","places","words","sentiment","perspective","subject","meta","tags","eventId","ecdfbfac531838236b7d37e2ea0f51a6078700b0fbec0de49a24c1c0029faf8c","nostrRootEvent","event",{"_19":146,"_150":151,"_152":153,"_144":154,"_166":26,"_112":167,"_168":169},"sig","258874c853f77f257ce3dbfd84929dcb24512c13638936b878a3ebd57db5d649f21f8c15928d38b3cbcfd28a64d2dc141538b5f823f5c34498859733d8e983db","kind",1,[155,156,157,161,164],[142,99],[35,104],[158,159,29,160],"a","30023:d12614be726049c7ecfeb7307a63d38418bb82b91866b8764a903ff28ed99bc6:88f1f336-e4b4-4a77-83db-111918b0b5a9","mention",[162,163],"client","Layer3.press",[165,26,29],"p","pubkey","Getting Started with TypeScript: A Comprehensive Guide for Beginners\n\n\n\nnostr:naddr1qvzqqqr4gupzp5fxzjl8yczfclk0ades0f3a8pqchwptjxrxhpmy4ypl728dnx7xqqjrswrxx9nrxvek94jngc35956xzdeh95urxerz95cnzvfexyuxyvrzx4snjzwy9pp ","created_at",1752067557,"authorNPub","markdown","TypeScript is gaining popularity in the world of web development due to its ability to enhance the maintainability and scalability of JavaScript applications. If you’re new to TypeScript, this comprehensive guide will walk you through the basics and help you start your journey in writing safer and more predictable code.\n\n### What is TypeScript?\n\nAt its core, TypeScript is a superset of JavaScript. This means that any valid JavaScript code is also valid TypeScript. TypeScript introduces static typing, which allows you to define the types of variables, function parameters, and return values. This additional layer of type information helps catch errors during development, making your code more reliable.\n\n### Benefits of TypeScript\n\n1. Static Typing: TypeScript catches type-related errors at compile-time rather than runtime, reducing the chances of unexpected issues in your code.\n2. Enhanced Tooling: TypeScript provides excellent tooling support through code editors like Visual Studio Code, helping you write code faster and with fewer mistakes.\n3. Readability: Type annotations make your code self-documenting, making it easier for you and other developers to understand and maintain.\n4. Community and Adoption: TypeScript is widely adopted in the industry, and it has a growing and active community, which means more resources and support for developers.\n\n### Setting Up Your Development Environment\n\nBefore you can start writing TypeScript, you need to set up your development environment.\n\n### 1\\. Node.js and npm\n\nTypeScript is typically installed and managed using npm, which is bundled with Node.js. To get started, download and install Node.js from the official website ([https://nodejs.org/](https://nodejs.org/)). This will also install npm.\n\n### 2\\. Installing TypeScript\n\nOnce Node.js and npm are installed, you can install TypeScript globally on your system by running the following command in your terminal:\n\nnpm install -g typescript\n\nThis will give you access to the TypeScript compiler, denoted as tsc.\n\n### 3\\. Creating a TypeScript Project\n\nTo create a new TypeScript project, navigate to your project’s directory in the terminal and initialize it with:\n\nnpm init -y\n\nThis command will generate a package.json file.\n\n### Your First TypeScript Program\n\nNow that your development environment is set up, let’s write a simple TypeScript program.\n\n### 1\\. Create a TypeScript File\n\nCreate a new file called app.ts in your project directory.\n\n### 2\\. Write TypeScript Code\n\nIn app.ts, write the following code:\n\nfunction sayHello(name: string) { \n console.log(\\`Hello, ${name}!\\`); \n} \n \nconst user = \"Batuhan\"; \nsayHello(user);\n\nThis code defines a function sayHello that takes a parameter of type string and logs a greeting to the console.\n\n### 3\\. Compile TypeScript to JavaScript\n\nTo compile this TypeScript code into JavaScript, run the following command in your terminal:\n\ntsc app.ts\n\nThis will generate an app.js file in the same directory.\n\n### 4\\. Run Your JavaScript Code\n\nYou can now run the JavaScript code using Node.js:\n\nnode app.js\n\nYou should see the output: “Hello, Batuhan!”\n\nCongratulations! You’ve written and executed your first TypeScript program.\n\n### TypeScript Types\n\nOne of TypeScript’s key features is its ability to work with different data types. Let’s explore some of the basic types:\n\n### 1\\. Number\n\nlet age: number = 25;\n\n### 2\\. String\n\nlet name: string = \"Batuhan\";\n\n### 3\\. Boolean\n\nlet isStudent: boolean = false;\n\n### 4\\. Any\n\nlet dynamicValue: any = \"Hello, TypeScript!\";\n\nThese are just a few examples of TypeScript’s basic types. TypeScript also allows you to define custom types and interfaces to shape your data more precisely.\n\n### Interfaces and Custom Types\n\nInterfaces and custom types help you define the shape of your data. Let’s take a look at how to use them:\n\n### 1\\. Interfaces\n\ninterface Person { \n name: string; \n age: number; \n}\n\nfunction greet(person: Person) { \n console.log(\\`Hello, ${person.name}! You are ${person.age} years old.\\`); \n} \n \nconst user: Person = { \n name: \"Batuhan\", \n age: 25, \n}; \n \ngreet(user);\n\nIn this example, we’ve defined an interface Person that specifies the expected properties of an object. The greet function takes an argument of type Person.\n\n### 2\\. Custom Types\n\ntype Point = { \n x: number; \n y: number; \n}; \n \nconst point: Point = { \n x: 10, \n y: 20, \n};\n\nHere, we’ve created a custom type Point using the type keyword. It defines the shape of a point with x and y coordinates.\n\n### Functions and Classes in TypeScript\n\nTypeScript also allows you to define functions and classes with strong typing:\n\n### 1\\. Functions\n\nfunction sum(a: number, b: number): number { \n return a + b; \n}\n\nIn this example, we’ve defined a function sum that takes two parameters, both of type number, and returns a number.\n\n### 2\\. Classes\n\nclass Dog { \n constructor(public name: string) {} \n \n bark() { \n console.log(\\`Woof! My name is ${this.name}.\\`); \n } \n} \n \nconst myDog = new Dog(\"Buddy\"); \nmyDog.bark();\n\nHere, we’ve defined a class Dog with a constructor and a method. We've also used the public access modifier in the constructor parameter, which automatically creates and initializes a class property.\n\n### Working with Modules\n\nModularity is essential in large-scale applications. TypeScript supports different module systems, including CommonJS and ES6 modules.\n\n### 1\\. Exporting and Importing\n\n// math.ts \nexport function sum(a: number, b: number): number { \n return a + b; \n} \n \n// app.ts \nimport { add } from \"./math\"; \n \nconst result = add(5, 3); \nconsole.log(result); // 8\n\nIn this example, we’ve defined a function sum in a separate module (math.ts) and imported it into our main application (app.ts).\n\n### Advanced TypeScript Features\n\nAs you become more comfortable with TypeScript, you can explore advanced features like generics, decorators, and union types. These features allow you to write even more expressive and flexible code.\n\n### TypeScript Tooling and IDEs\n\nTypeScript integrates seamlessly with popular code editors like Visual Studio Code, providing features like intelligent code completion, error checking, and code navigation.\n\nTo get the most out of TypeScript, consider using an editor that supports TypeScript out of the box.\n\n### Debugging TypeScript\n\nDebugging TypeScript code is similar to debugging JavaScript. You can set breakpoints in your TypeScript files and use debugging tools provided by your editor.\n\nAdditionally, TypeScript generates source maps during compilation, making it easier to debug the original TypeScript code in the browser’s developer tools.\n\n### Testing TypeScript Code\n\nFor testing TypeScript code, you can use testing frameworks like Jest, Jasmine, or Mocha. These frameworks have TypeScript typings available, ensuring a smooth testing experience.\n\n### Building and Deploying TypeScript Applications\n\nWhen you’re ready to deploy your TypeScript application to production, you’ll need to compile your TypeScript code into JavaScript. This can be done using the TypeScript compiler (tsc) or through build tools like Webpack or Parcel.\n\n### Conclusion\n\nCongratulations! You’ve taken your first steps into the world of TypeScript. With TypeScript’s static typing, interfaces, and advanced features, you can write more robust and maintainable code. As you continue your TypeScript journey, don’t hesitate to explore the rich ecosystem of libraries and tools available to TypeScript developers.\n\nRemember that practice makes perfect, so keep coding, learning, and building. TypeScript offers a powerful way to level up your web development skills, and you’re well on your way to becoming a TypeScript pro.\n\nHappy coding!\n\n![](https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=7a4969b6679c)","freeMarkdown","kind1EventId","kind30023EventId","9b4a2eee95eb8facdd98a8f1084b6b088691ac861eb9964dccbd89aa4e40dbc6","kind30023",{"_19":176,"_150":179,"_152":180,"_144":181,"_166":26,"_112":194,"_168":169},"85fbad0c055fc00e6eb4d5329e541758261b97b0c62048e3e5cd510b1b995fecf62c8f1147e3eebdec00e62d4ff0d0d8c6c51d8137b1621ca0eb29ea5d49cf34",30023,[182,185,186,189,190,192,193],[183,184],"r","https://drewdru.layer3.press/articles/88f1f336-e4b4-4a77-83db-111918b0b5a9",[31,99],[187,188],"published_at","NaN",[35,104],[191,94],"d",[162,163],[165,26,29],"Getting Started with TypeScript: A Comprehensive Guide for Beginners\nTypeScript is gaining popularity in the world of web development due to its ability to enhance the maintainability and scalability of JavaScript applications. If you’re new to TypeScript, this comprehensive guide will walk you through the basics and help you start your journey in writing safer and more predictable code.\n\n### What is TypeScript?\n\nAt its core, TypeScript is a superset of JavaScript. This means that any valid JavaScript code is also valid TypeScript. TypeScript introduces static typing, which allows you to define the types of variables, function parameters, and return values. This additional layer of type information helps catch errors during development, making your code more reliable.\n\n### Benefits of TypeScript\n\n1. Static Typing: TypeScript catches type-related errors at compile-time rather than runtime, reducing the chances of unexpected issues in your code.\n2. Enhanced Tooling: TypeScript provides excellent tooling support through code editors like Visual Studio Code, helping you write code faster and with fewer mistakes.\n3. Readability: Type annotations make your code self-documenting, making it easier for you and other developers to understand and maintain.\n4. Community and Adoption: TypeScript is widely adopted in the industry, and it has a growing and active community, which means more resources and support for developers.\n\n### Setting Up Your Development Environment\n\nBefore you can start writing TypeScript, you need to set up your development environment.\n\n### 1\\. Node.js and npm\n\nTypeScript is typically installed and managed using npm, which is bundled with Node.js. To get started, download and install Node.js from the official website ([https://nodejs.org/](https://nodejs.org/)). This will also install npm.\n\n### 2\\. Installing TypeScript\n\nOnce Node.js and npm are installed, you can install TypeScript globally on your system by running the following command in your terminal:\n\nnpm install -g typescript\n\nThis will give you access to the TypeScript compiler, denoted as tsc.\n\n### 3\\. Creating a TypeScript Project\n\nTo create a new TypeScript project, navigate to your project’s directory in the terminal and initialize it with:\n\nnpm init -y\n\nThis command will generate a package.json file.\n\n### Your First TypeScript Program\n\nNow that your development environment is set up, let’s write a simple TypeScript program.\n\n### 1\\. Create a TypeScript File\n\nCreate a new file called app.ts in your project directory.\n\n### 2\\. Write TypeScript Code\n\nIn app.ts, write the following code:\n\nfunction sayHello(name: string) { \n console.log(\\`Hello, ${name}!\\`); \n} \n \nconst user = \"Batuhan\"; \nsayHello(user);\n\nThis code defines a function sayHello that takes a parameter of type string and logs a greeting to the console.\n\n### 3\\. Compile TypeScript to JavaScript\n\nTo compile this TypeScript code into JavaScript, run the following command in your terminal:\n\ntsc app.ts\n\nThis will generate an app.js file in the same directory.\n\n### 4\\. Run Your JavaScript Code\n\nYou can now run the JavaScript code using Node.js:\n\nnode app.js\n\nYou should see the output: “Hello, Batuhan!”\n\nCongratulations! You’ve written and executed your first TypeScript program.\n\n### TypeScript Types\n\nOne of TypeScript’s key features is its ability to work with different data types. Let’s explore some of the basic types:\n\n### 1\\. Number\n\nlet age: number = 25;\n\n### 2\\. String\n\nlet name: string = \"Batuhan\";\n\n### 3\\. Boolean\n\nlet isStudent: boolean = false;\n\n### 4\\. Any\n\nlet dynamicValue: any = \"Hello, TypeScript!\";\n\nThese are just a few examples of TypeScript’s basic types. TypeScript also allows you to define custom types and interfaces to shape your data more precisely.\n\n### Interfaces and Custom Types\n\nInterfaces and custom types help you define the shape of your data. Let’s take a look at how to use them:\n\n### 1\\. Interfaces\n\ninterface Person { \n name: string; \n age: number; \n}\n\nfunction greet(person: Person) { \n console.log(\\`Hello, ${person.name}! You are ${person.age} years old.\\`); \n} \n \nconst user: Person = { \n name: \"Batuhan\", \n age: 25, \n}; \n \ngreet(user);\n\nIn this example, we’ve defined an interface Person that specifies the expected properties of an object. The greet function takes an argument of type Person.\n\n### 2\\. Custom Types\n\ntype Point = { \n x: number; \n y: number; \n}; \n \nconst point: Point = { \n x: 10, \n y: 20, \n};\n\nHere, we’ve created a custom type Point using the type keyword. It defines the shape of a point with x and y coordinates.\n\n### Functions and Classes in TypeScript\n\nTypeScript also allows you to define functions and classes with strong typing:\n\n### 1\\. Functions\n\nfunction sum(a: number, b: number): number { \n return a + b; \n}\n\nIn this example, we’ve defined a function sum that takes two parameters, both of type number, and returns a number.\n\n### 2\\. Classes\n\nclass Dog { \n constructor(public name: string) {} \n \n bark() { \n console.log(\\`Woof! My name is ${this.name}.\\`); \n } \n} \n \nconst myDog = new Dog(\"Buddy\"); \nmyDog.bark();\n\nHere, we’ve defined a class Dog with a constructor and a method. We've also used the public access modifier in the constructor parameter, which automatically creates and initializes a class property.\n\n### Working with Modules\n\nModularity is essential in large-scale applications. TypeScript supports different module systems, including CommonJS and ES6 modules.\n\n### 1\\. Exporting and Importing\n\n// math.ts \nexport function sum(a: number, b: number): number { \n return a + b; \n} \n \n// app.ts \nimport { add } from \"./math\"; \n \nconst result = add(5, 3); \nconsole.log(result); // 8\n\nIn this example, we’ve defined a function sum in a separate module (math.ts) and imported it into our main application (app.ts).\n\n### Advanced TypeScript Features\n\nAs you become more comfortable with TypeScript, you can explore advanced features like generics, decorators, and union types. These features allow you to write even more expressive and flexible code.\n\n### TypeScript Tooling and IDEs\n\nTypeScript integrates seamlessly with popular code editors like Visual Studio Code, providing features like intelligent code completion, error checking, and code navigation.\n\nTo get the most out of TypeScript, consider using an editor that supports TypeScript out of the box.\n\n### Debugging TypeScript\n\nDebugging TypeScript code is similar to debugging JavaScript. You can set breakpoints in your TypeScript files and use debugging tools provided by your editor.\n\nAdditionally, TypeScript generates source maps during compilation, making it easier to debug the original TypeScript code in the browser’s developer tools.\n\n### Testing TypeScript Code\n\nFor testing TypeScript code, you can use testing frameworks like Jest, Jasmine, or Mocha. These frameworks have TypeScript typings available, ensuring a smooth testing experience.\n\n### Building and Deploying TypeScript Applications\n\nWhen you’re ready to deploy your TypeScript application to production, you’ll need to compile your TypeScript code into JavaScript. This can be done using the TypeScript compiler (tsc) or through build tools like Webpack or Parcel.\n\n### Conclusion\n\nCongratulations! You’ve taken your first steps into the world of TypeScript. With TypeScript’s static typing, interfaces, and advanced features, you can write more robust and maintainable code. As you continue your TypeScript journey, don’t hesitate to explore the rich ecosystem of libraries and tools available to TypeScript developers.\n\nRemember that practice makes perfect, so keep coding, learning, and building. TypeScript offers a powerful way to level up your web development skills, and you’re well on your way to becoming a TypeScript pro.\n\nHappy coding!\n\n![](https://medium.com/_/stat?event=post.clientViewed&referrerSource=full_rss&postId=7a4969b6679c)\n","publishedToNostr","htmlContentKind30023","

What is TypeScript?

Benefits of TypeScript

Static Typing: TypeScript catches type-related errors at compile-time rather than runtime, reducing the chances of unexpected issues in your code.
Enhanced Tooling: TypeScript provides excellent tooling support through code editors like Visual Studio Code, helping you write code faster and with fewer mistakes.
Readability: Type annotations make your code self-documenting, making it easier for you and other developers to understand and maintain.
Community and Adoption: TypeScript is widely adopted in the industry, and it has a growing and active community, which means more resources and support for developers.

Setting Up Your Development Environment

Before you can start writing TypeScript, you need to set up your development environment.

1. Node.js and npm

2. Installing TypeScript

Once Node.js and npm are installed, you can install TypeScript globally on your system by running the following command in your terminal:

npm install -g typescript

This will give you access to the TypeScript compiler, denoted as tsc.

3. Creating a TypeScript Project

To create a new TypeScript project, navigate to your project’s directory in the terminal and initialize it with:

npm init -y

This command will generate a package.json file.

Your First TypeScript Program

Now that your development environment is set up, let’s write a simple TypeScript program.

1. Create a TypeScript File

Create a new file called app.ts in your project directory.

2. Write TypeScript Code

In app.ts, write the following code:

function sayHello(name: string) {
\nconsole.log(`Hello, ${name}!`);
\n}

const user = \"Batuhan\";
\nsayHello(user);

This code defines a function sayHello that takes a parameter of type string and logs a greeting to the console.

3. Compile TypeScript to JavaScript

To compile this TypeScript code into JavaScript, run the following command in your terminal:

tsc app.ts

This will generate an app.js file in the same directory.

4. Run Your JavaScript Code

You can now run the JavaScript code using Node.js:

node app.js

You should see the output: “Hello, Batuhan!”

Congratulations! You’ve written and executed your first TypeScript program.

TypeScript Types

One of TypeScript’s key features is its ability to work with different data types. Let’s explore some of the basic types:

1. Number

let age: number = 25;

2. String

let name: string = \"Batuhan\";

3. Boolean

let isStudent: boolean = false;

4. Any

let dynamicValue: any = \"Hello, TypeScript!\";

These are just a few examples of TypeScript’s basic types. TypeScript also allows you to define custom types and interfaces to shape your data more precisely.

Interfaces and Custom Types

Interfaces and custom types help you define the shape of your data. Let’s take a look at how to use them:

1. Interfaces

interface Person {
\nname: string;
\nage: number;
\n}

function greet(person: Person) {
\nconsole.log(`Hello, ${person.name}! You are ${person.age} years old.`);
\n}

const user: Person = {
\nname: \"Batuhan\",
\nage: 25,
\n};

greet(user);

In this example, we’ve defined an interface Person that specifies the expected properties of an object. The greet function takes an argument of type Person.

2. Custom Types

type Point = {
\nx: number;
\ny: number;
\n};

const point: Point = {
\nx: 10,
\ny: 20,
\n};

Here, we’ve created a custom type Point using the type keyword. It defines the shape of a point with x and y coordinates.

Functions and Classes in TypeScript

TypeScript also allows you to define functions and classes with strong typing:

1. Functions

function sum(a: number, b: number): number {
\nreturn a + b;
\n}

In this example, we’ve defined a function sum that takes two parameters, both of type number, and returns a number.

2. Classes

class Dog {
\nconstructor(public name: string) {}

bark() {
\nconsole.log(`Woof! My name is ${this.name}.`);
\n}
\n}

const myDog = new Dog(\"Buddy\");
\nmyDog.bark();

Working with Modules

Modularity is essential in large-scale applications. TypeScript supports different module systems, including CommonJS and ES6 modules.

1. Exporting and Importing

// math.ts
\nexport function sum(a: number, b: number): number {
\nreturn a + b;
\n}

// app.ts
\nimport { add } from \"./math\";

const result = add(5, 3);
\nconsole.log(result); // 8

In this example, we’ve defined a function sum in a separate module (math.ts) and imported it into our main application (app.ts).

Advanced TypeScript Features

As you become more comfortable with TypeScript, you can explore advanced features like generics, decorators, and union types. These features allow you to write even more expressive and flexible code.

TypeScript Tooling and IDEs

TypeScript integrates seamlessly with popular code editors like Visual Studio Code, providing features like intelligent code completion, error checking, and code navigation.

To get the most out of TypeScript, consider using an editor that supports TypeScript out of the box.

Debugging TypeScript

Debugging TypeScript code is similar to debugging JavaScript. You can set breakpoints in your TypeScript files and use debugging tools provided by your editor.

Additionally, TypeScript generates source maps during compilation, making it easier to debug the original TypeScript code in the browser’s developer tools.

Testing TypeScript Code

For testing TypeScript code, you can use testing frameworks like Jest, Jasmine, or Mocha. These frameworks have TypeScript typings available, ensuring a smooth testing experience.

Building and Deploying TypeScript Applications

Conclusion

Happy coding!

$\"\"$

","pubDate","2023-09-24T08:22:28.000Z","modifiedAt","2025-07-09T13:15:25.989Z","storyId","likes","zaps","reposts","comments","tweets",[],"relatedArticles",[],"actionData","errors"]