
Claude Code is Anthropic's answer to the agentic coding assistant category — but it takes a distinctly different approach from GitHub Copilot. Instead of sitting inside your editor, it runs in your terminal and operates more like an autonomous developer you can delegate tasks to.

## Table of Contents

- [What Is Claude Code?](#what-is-claude-code)
- [How It Differs from Copilot](#how-it-differs-from-copilot)
- [Getting Started](#getting-started)
- [What Claude Code Can Do](#what-claude-code-can-do)
- [The CLAUDE.md File](#the-claudemd-file)
- [Trust Modes and Permissions](#trust-modes-and-permissions)
- [Real-World Use Cases](#real-world-use-cases)
- [Limitations to Be Aware Of](#limitations-to-be-aware-of)
- [Final Thoughts](#final-thoughts)

---

## What Is Claude Code?

Claude Code is a command-line tool built on Anthropic's Claude models. You run it inside your project directory and interact with it via natural language. It can:

- Read and understand your entire codebase
- Write and edit files
- Run shell commands, tests, and build scripts
- Search the web for documentation
- Execute multi-step tasks end-to-end with minimal hand-holding

The model powering it — Claude Sonnet — is designed to be thoughtful about what actions it takes and will ask for confirmation before doing anything destructive.

---

## How It Differs from Copilot

|                       | GitHub Copilot                | Claude Code              |
| --------------------- | ----------------------------- | ------------------------ |
| **Lives in**          | VS Code / editor              | Terminal                 |
| **Interaction style** | Inline suggestions + chat     | Conversational, agentic  |
| **Task scope**        | Single file / function        | Multi-file, multi-step   |
| **Autonomy**          | Low — you accept suggestions  | High — it executes tasks |
| **Runs commands?**    | No                            | Yes (with permission)    |
| **Best for**          | Fast completions while coding | Delegating whole tasks   |

They complement each other well. Use Copilot while you're actively writing code; use Claude Code to delegate a larger chunk of work while you focus elsewhere.

---

## Getting Started

Claude Code requires Node.js 18+ and an Anthropic API key.

```bash
# Install globally
npm install -g @anthropic-ai/claude-code

# Set your API key
export ANTHROPIC_API_KEY=your_key_here

# Launch inside your project
cd my-project
claude
```

Once running, you get an interactive REPL. Type naturally:

```
> Add error handling to all the API routes in pages/api/
> Write unit tests for lib/dataService.ts
> Explain how the authentication flow works in this project
> Fix the TypeScript errors in components/
```

---

## What Claude Code Can Do

### Read and understand your codebase

Claude Code indexes your project files and can answer questions about architecture, dependencies, and patterns — even in a large, unfamiliar repo.

```
> How does session management work here?
> What database queries happen when a user logs in?
> Where are all the places we read from Firestore?
```

### Edit files autonomously

Give it a task and it will find the right files, make changes, and show you a diff before applying.

```
> Refactor the pagination component to use TypeScript interfaces instead of inline types
```

### Run your tests and fix failures

```
> Run the test suite and fix any failing tests
```

Claude Code will run `npm test`, read the failures, edit the relevant files, and re-run — iterating until tests pass or it needs your input.

### Execute shell commands

```
> Build the project and tell me if there are any errors
> Run the linter and fix all auto-fixable issues
```

---

## The CLAUDE.md File

Similar to Copilot's `.github/copilot-instructions.md`, Claude Code looks for a `CLAUDE.md` file at the root of your project. Put project-specific context here:

```markdown
# CLAUDE.md

## Build commands

- Dev: `npm run dev` (port 3010)
- Build: `npm run build`
- Lint: `npm run lint`

## Architecture

- Next.js Pages Router (not App Router)
- Database: Firestore via singleton in `lib/db/index.ts`
- Never create a second Firebase Admin instance

## Rules

- Never modify files under `accounts/` or `cert/`
- Always use TypeScript interfaces from `lib/models/`
- Run `npm run prettier` before committing
```

This file dramatically reduces the amount of context you need to provide in each session.

---

## Trust Modes and Permissions

Claude Code has three trust levels you set when starting a session:

| Mode                             | Behaviour                                         |
| -------------------------------- | ------------------------------------------------- |
| **Default**                      | Asks before writing files or running commands     |
| `--dangerously-skip-permissions` | Runs autonomously without prompts — use carefully |
| Per-tool approval                | Approve/deny each category of action individually |

For exploratory tasks (reading, explaining), the default is perfectly safe. For write/execute tasks, review what it plans to do before saying yes — especially in production codebases.

---

## Real-World Use Cases

**Onboarding a new codebase**

```
> Give me a tour of this project — architecture, key files, and how the main features work
```

**Implementing a feature from a spec**

```
> Implement the bookmark feature described in projects/bookmarks.md
```

**Debugging a tricky issue**

```
> The build is failing with "Cannot find module 'xmlbuilder2'" — diagnose and fix it
```

**Writing documentation**

```
> Generate a README section explaining how authentication works, based on the actual code
```

**Refactoring**

```
> Find all places we use inline object types instead of the interfaces in lib/models/ and fix them
```

---

## Limitations to Be Aware Of

- **Cost** — Claude Code makes many API calls for complex tasks; costs can add up fast on large codebases.
- **Context window** — very large repos may exceed the model's context; it will selectively read files rather than loading everything.
- **Not a replacement for thinking** — it can implement what you describe, but you still need to specify the right thing to build.
- **Review everything** — especially code touching auth, payments, or data access. LLMs can produce plausible-looking but incorrect security logic.
- **No real-time awareness** — it doesn't know about runtime errors or live system state unless you paste the output in.

---

## Final Thoughts

Claude Code represents a step change in what "AI-assisted development" means. Rather than just completing your sentences, it can take a well-defined task and execute it — finding files, making changes, running builds, and iterating.

The best mental model: it's like having a capable contractor you can brief over text. The clearer your instructions and the better your `CLAUDE.md`, the more you can delegate with confidence.

Used thoughtfully alongside an editor-integrated tool like GitHub Copilot, it can meaningfully compress the time between "I know what needs to be done" and "it's done and tested."


An introduction to Claude Code — Anthropic's agentic AI coding tool that runs in your terminal, reads your codebase, and executes multi-step tasks autonomously.

Claude Code - Anthropic's AI Agent That Lives in Your Terminal


GitHub Copilot has quietly transformed how many developers write code day-to-day. If you haven't tried it yet — or if you've dabbled but want to go deeper — this post walks through the essentials.

## Table of Contents

- [What Is GitHub Copilot?](#what-is-github-copilot)
- [Setting Up in VS Code](#setting-up-in-vs-code)
- [Core Features](#core-features)
- [Copilot Chat vs. Inline Suggestions](#copilot-chat-vs-inline-suggestions)
- [Practical Tips for Better Suggestions](#practical-tips-for-better-suggestions)
- [When Copilot Shines — and When It Doesn't](#when-copilot-shines--and-when-it-doesnt)
- [Copilot Instructions File](#copilot-instructions-file)
- [Final Thoughts](#final-thoughts)

---

## What Is GitHub Copilot?

GitHub Copilot is an AI pair programmer developed by GitHub and OpenAI. It lives inside your editor and suggests code as you type — from single lines to entire functions and classes. Under the hood it's powered by large language models (LLMs) trained on a massive corpus of public code and text.

It understands context from:

- The file you're currently editing
- Other open tabs in your editor
- Comments and documentation you've written
- Your custom instruction files (more on this below)

---

## Setting Up in VS Code

1. Install the **GitHub Copilot** and **GitHub Copilot Chat** extensions from the VS Code marketplace.
2. Sign in with your GitHub account (you'll need an active Copilot subscription or a free trial).
3. That's it — suggestions start appearing automatically as you write.

You can toggle Copilot on/off from the status bar icon at the bottom of VS Code.

---

## Core Features

| Feature                | What It Does                                                                             |
| ---------------------- | ---------------------------------------------------------------------------------------- |
| **Inline completions** | Ghost-text suggestions as you type; press `Tab` to accept                                |
| **Copilot Chat**       | Conversational AI assistant in the sidebar — ask questions, explain code, generate tests |
| **Inline Chat**        | `Ctrl+I` / `Cmd+I` to open a chat prompt anchored to your current selection              |
| **Fix with Copilot**   | One-click fixes for lint errors and compiler diagnostics                                 |
| **Workspace agent**    | `@workspace` — search and reason over your entire codebase                               |
| **Terminal agent**     | `@terminal` — suggest and explain shell commands                                         |

---

## Copilot Chat vs. Inline Suggestions

**Inline suggestions** are best for:

- Completing boilerplate code quickly
- Generating repetitive patterns (e.g. switch cases, CRUD operations)
- Writing straightforward utility functions

**Copilot Chat** is better for:

- Understanding unfamiliar code (`/explain`)
- Generating unit tests (`/tests`)
- Fixing a bug with context (`/fix`)
- Asking architecture or design questions

A typical workflow: use inline completions for speed, flip to Chat when you need to reason through something.

---

## Practical Tips for Better Suggestions

### 1. Write descriptive comments first

```typescript
// Parse a JWT token and return the decoded payload,
// returning null if the token is invalid or expired.
function parseJwt(token: string) {
  // Copilot will fill this in accurately
}
```

### 2. Name things well

Good variable and function names are context. `getUserByEmailFromFirestore` generates much better completions than `getUser`.

### 3. Keep related files open

Copilot reads your open editor tabs for context. If you're working on a service file, keep the relevant model and interface files open too.

### 4. Use the `@workspace` agent for cross-file questions

```
@workspace How does authentication work in this project?
@workspace Where are all the Firestore queries?
```

### 5. Iterate — don't accept blindly

Copilot's first suggestion isn't always right. Ask it to revise: _"make this function async"_, _"add error handling"_, _"use the existing IUser interface instead"_.

---

## When Copilot Shines — and When It Doesn't

**Great at:**

- Boilerplate and repetitive code
- Writing tests for functions you show it
- Converting patterns (e.g. callback → async/await)
- Explaining what a chunk of code does
- Generating regex patterns and SQL queries

**Less reliable for:**

- Novel architecture decisions
- Security-sensitive code (always review carefully)
- Code that requires deep domain knowledge unique to your codebase
- Anything involving credentials, secrets, or personal data

---

## Copilot Instructions File

One underrated feature: the `.github/copilot-instructions.md` file. Add it to your repo and Copilot Chat will use it as persistent context for every conversation in that workspace.

Use it to document:

- Project architecture and patterns
- Naming conventions and style rules
- Key file locations
- Anti-patterns to avoid

```markdown
## Architecture

This is a Next.js 14 app. Use the App Router, not the Pages Router.
Always use the singleton DB client from `lib/db/index.ts`.

## Conventions

- Never use `any` in TypeScript
- All API routes must validate the session before touching the database
```

This single file can dramatically improve the quality and relevance of Copilot's suggestions across an entire project.

---

## Final Thoughts

GitHub Copilot is most valuable when you treat it as a junior pair programmer — fast, knowledgeable, but needing guidance and review. The more context you give it (good names, comments, open files, instruction files), the better it performs.

The biggest productivity gain isn't that it writes code for you — it's that it dramatically reduces the friction of starting. The blank-page problem largely disappears.

If you haven't already, give it a proper week-long trial with real project work. The muscle memory builds quickly.


A practical guide to GitHub Copilot — what it is, how to set it up in VS Code, and tips for getting the most out of AI-assisted coding.

GitHub Copilot - The AI Coding Assistant That Changes How You Write Code


#### Table of Contents

1. Introduction
2. Install Packages
3. Create babel.config.js
4. Create jest.config.ts
5. Change the Code sample.js to TypeScript sample.ts
6. Change the Jest sample.test.js to TypeScript sample.test.ts
7. Run npm run test

### Introduction

This blog shows how to get start use TypeScript to write code and also write in Jest.

### Install Packages

If you have not use Jest, can reference this to get start with Jest with JavaScript, [Get Start with Jest](/blog/post/start-setup-jest).

At here, we'll start install necessary NPM packages for use TypeScript at Jest and the code.

```
npm install --save-dev @babel/core @babel/preset-env @babel/preset-typescript @jest/globals @types/jest babel-jest ts-jest ts-node typescript
```

### Create `babel.config.js`

```JavaScript
module.exports = {
    presets: [
      ['@babel/preset-env', {targets: {node: 'current'}}],
      '@babel/preset-typescript',
    ],
  };
```

### Create `jest.config.ts`

```JavaScript
export default {
    clearMocks: true,
    collectCoverage: true,
    coverageDirectory: "coverage"
}
```

### Change the Code `sample.js` to TypeScript `sample.ts`

### Change the Jest `sample.test.js` to TypeScript `sample.test.ts`

```JavaScript
import {exponent, subtraction, sum} from '../src/sample';
import {describe, expect, test} from '@jest/globals';

describe('calculator', () => {
    test('test sum', () => {
        expect(sum(1, 2)).toBe(3);
    });

    test('test subtraction', () => {
        expect(subtraction(10, 2)).toBe(8);
    });

    test('test exponent', () => {
        expect(exponent(5, 2)).toBe(25);
    });
})
```

### Run `npm run test`

Now, if run `npm run test` and if everything works, should see test all passed and 100% coverage.


This blog shows how to get start use TypeScript to write code and also write in Jest.

How to use TypeScript with Jest

## Table of Contents

1. [Introduction](#introduction)
2. [Prerequisites](#prerequisites)
3. [Setup npm Repo](#setup-npm-repo)
4. [Install Dependencies Packages](#install-dependencies-packages)
5. [Install Dev Dependencies Packages](#install-dev-dependencies-packages)
6. [Update Main Field at package.json](#update-main-field-at-packagejson)
7. [Start Writing Code index.ts](#start-writing-code-indexts)
8. [Create tsconfig.json](#create-tsconfigjson)
9. [Ready to Deploy Code](#ready-to-deploy-code)
10. [Deploy from Local](#deploy-from-local)
11. [TypeScript Deployment with Cloud Function and Firestore](#typescript-deployment-with-cloud-function-and-firestore)
12. [Other Choices](#other-choices)
13. [Conclusion](#conclusion)

## Introduction

This blog tries to demonstrate how to deploy a `Google Cloud Function` that will interact with `Firestore` NoSQL database, using `TypeScript` for static typing at development. Instead of using a CI/CD pipeline, we will use `husky` locally to guard and watch the quality of the code and deploy to Google Cloud locally.

## Prerequisites

Before we start writing the code, there are a few prerequisites not included in this blog but required for the application to run.

- GCP Account/Project - make sure you have an active GCP account and GCP project set up.
- Firebase Account/Project - Your Firebase should connect with GCP. Log on to Firebase and find the Firestore.
- Run `gcloud config list` - to make sure your local environment is connected to the correct project.

## Setup npm Repo

Now, let's get started. First we'll need to initialize the npm repo by running the following command on your local machine. This will create a `package.json` file with default settings.

```
npm init -y
```

## Install Dependencies Packages

We'll install the following dependency packages since we'll interact with Firebase.

```
npm install --save firebase-admin firebase-functions
```

## Install Dev Dependencies Packages

Install the following packages during build time, such as TypeScript for static typing and ESLint for syntax analysis.

```
npm install --save-dev typescript @typescript-eslint/eslint-plugin @typescript-eslint/parser eslint eslint-config-google eslint-plugin-import firebase-functions-test
```

## Update `main` Field at `package.json`

Update the `package.json` for the start file.

```
"main": "dist/index.js",
```

## Start Writing Code `index.ts`

Let's create a file `index.ts` under the root folder and add the following code. These imports bring in packages we'll use later. The `firebase-functions/v2` will use Google Cloud Functions gen2, which has better performance.

```Javascript
import * as functions from "firebase-functions/v2";
import {initializeApp} from "firebase-admin/app";
import {getFirestore} from "firebase-admin/firestore";
```

Next, we'll initialize the app and start using Firestore, so add the following code.

```Javascript
initializeApp();

const db = getFirestore();
```

Finally, we'll hook into Firebase's `functions` to listen to the request. Now inside the `onRequest` we will add our main logic, which can either get data from Firestore or perform update or delete operations.

```Javascript
exports.main = functions
 .https.onRequest(async (request, response) => {

 console.info('on request');

 });
```

## Create `tsconfig.json`

Since our first code is ready, let's create our `tsconfig.json` to compile the TypeScript into JavaScript. We'll also add the following command to the `package.json`'s `scripts` section.

Once you run `npm run build`, the code will start to compile `index.ts` and create a JavaScript file under `dist/index.js`.

```
"scripts": {
 "build": "tsc"
}
```

## Ready to Deploy Code

So that's all we need for now. We should be able to continue adding code to the TypeScript file `index.ts` and use the simple TypeScript build by running `npm run build` to compile the TypeScript into JavaScript, ready to deploy to production.

## Deploy from Local

In this blog, we don't have many developers working on the same repo. When many people work on the same repository, it's better to use CI/CD with git pull requests so that whenever someone creates a new pull request to the main branch, continuous integration can start and deploy the latest code to the correct environment.

So instead, we'll add the following `gcloud` command to the `scripts` section. When you are ready to deploy to Google Cloud, we can just run `npm run deploy`, which will set the gcloud project and deploy the Cloud Function.

```JSON
"scripts": {
 "deploy": "npm run deploy:project && npm run deploy:run",
 "deploy:project": "gcloud config set project set-to-the-correct-project-id",
 "deploy:run": "gcloud functions deploy your-cloud-function-name --trigger-http --region=us-central1 --runtime=nodejs16 --gen2 --allow-unauthenticated --entry-point=main --run-service-account=service-account-can-run-the-cloud-function"
}
```

## TypeScript Deployment with Cloud Function and Firestore

That's all for creating a TypeScript Cloud Function that interacts with Firestore and deploying locally.

## Other Choices

Since we use `Firestore`, which is part of `Firebase`, we could use Firebase's `firebase-tools` to generate a list of files to support TypeScript. When using `firebase-tools` to set up the Cloud Function, there are a few settings you'll have to follow with Firebase's configuration.

set node.js version

```Json
"engines": {
 "node": "16"
}
```

set region

```Javascript
functions.setGlobalOptions({
 region: 'us-west1-a'
});
```

set gen2

```Javascript
import * as functions from "firebase-functions/v2";
```

set function name

Now, following is how you set the function name. One thing I don't like is that `exports.main` limits the name that can be defined. Using `gcloud` to define the function name, entry point, or gen2 is much easier than Firebase's settings.

```Javascript
exports.main = functions
```

## Conclusion

Using Firebase's `firebase-tools` can simplify setting up TypeScript for Firebase Cloud Functions. After trying both approaches, using `gcloud` has maximum flexibility compared with `firebase-tools`. It could improve, but at this point I feel just using `TypeScript` directly with `gcloud` is much easier.

This blog shows how to set up TypeScript with Cloud Functions and deploy to Google Cloud locally.

Use TypeScript with Google CloudFunction and Deploy locally


#### Table of Contents

1. A resource to Learn Angular2
2. Resource for other languages/tools relative to Angular2
3. Environment for start doing Anglar2
4. Angular2 Tags
5. Angular2 Coding Styles
6. How to Learn Angular2
7. Question for Angular2

### A resource to Learn Angular2

This blog just provides a few links to learn Angular2, I create this page just
want to memo a few links of how to learn Angular2.

  - BadAssList - Resource of Learn Angular2

    - A very helpful list to learn Angular2

PDF - Become a Ninja with Angular2

Info - Angular2 Home Page

    - Go to the Angular2 home page to check what's the main features.

Try 1 - Angular2 Quick Start

    - Use this Angular.io's quick start to learn how to build a Hello world by
Angular2.

Try 2 - Angular2 Tutorial

    - This Angular2.io's tutorial will learn how to use angular2 Components,
services, Routing, and HTTP.

Document - Angular.io's guide

    - A basic guide for the developer

Document - Angular.io's developer guide

    - More information about Angular2.

Angular2 API

Example - generator-gulp-angular2

    - Yeoman generator's angular2 version

Angular.io quick start's github location

Blog - how to learn Angular2

News - Positive - Google Preps Angular 2 for Final Release

Video - Angular2 Tutorial for beginner

Video - egghead - Learn Angular2

Video - Angular 2 : First Look

Video - Angular 2 - Getting Started

Video - Play by Play

site - learnangular2.com

    - a website build for people who want to learn angular2

site - angular2.com

Tool - Node.js - You need this to try angular2

Tool - TypeScript - Angular2 could build with TypeScript

Course - Paid to learn Angular2 - Pluralsight

    - If you pay you can take the angular2 course here.

### Resource for other languages/tools relative to Angular2

1. TypeScript

2. SystemJs

### Environment for start doing Anglar2

  - node.js

    - http://nodejs.org/

    - version: 4.x is better stable than 5.x (7/72016 point)

npm

    - version: 2.x, will come along when installing node.js

IDE

    - Visual Studio Code

      - https://code.visualstudio.com/Docs/?dv=win

Cloud9
WebStorm
Sublime

Git

    - http://git-scm.com/

### Angular2 Tags

  - TypeScript

  - SystemJs

  - Single Responsibility Principle

  - dash case (aka kebab-case)

  - decorator

  - Injectable

  - @Injectable()

  - Dependency Injection

  - Promise

  - ngOnInt

  - Angular Lifecycle Hook

  - Pipes

  - interpolation

  - one-way data binding

  - two-way data binding

  - Multi-line template strings

  - template strings feature in ES2015

  - double curly braces of interpolation

  - ngFor

    - build-in directive

ngIf
Structural Directives
property binding
Attribute Directives
@Input()
angular2 promise service
Async Angular Service with Promises
ES2015 Promises
ES2015 arrow function
Angular2 base href
component-relative paths
parent component property binding
ActivateRoute
ngOnDesroy
angular2's subscribe -> params.subscribe
angular2's unsubscribe -> this.sub.unsubscribe();
Javascript(+) operator
CanDeactivate guard
routerLinkActive

### Angular2 Coding Styles

  - service

    - .service

    - MyGreateService -> my-greate.service.ts

### How to Learn Angular2

1. Angular2

2. First, learn basic angular2, tutorial, read documentation, build a
prototype.

3. TypeScript

4. Learn basic with angular2, also dive deep into TypeScript

5. Visual Studio Code

6. SystemJs

7. Npm

8. Grunt/Gulp

9. Visual Studio

10. How to integrate the above technology into visual studio, let's say,
ASP.NET MVC, MVC5

### Question for Angular2

1. When should we use Angular2?

2. Angular2 for SEO?

3. Why need to unsubscribe()? -> this.sub.unsubscribe();

4. The angular component could add CSS URLs, but how to work with SASS or
minified CSS?


Start Angular2 - Resources


## Table of Contents

1. [TypeScript Version](#typescript-version)
2. [Install TypeScript](#install-typescript)
3. [Create TypeScript File](#create-typescript-file)
4. [Use TypeScript Syntax](#use-typescript-syntax)
5. [How to Learn TypeScript](#how-to-learn-typescript)

## Introduction

TypeScript is a typed superset of JavaScript that compiles to plain JavaScript. This post covers the basics of getting started with TypeScript, including installation, creating files, and using TypeScript syntax.

## TypeScript Version

How to check TypeScript's version using the command line. Type `tsc -v` to show TypeScript's version.

```
tsc -v
Version 1.0.3.0
```

If you're in a Windows environment, the above command line might not give you the latest version of TypeScript, because the command line is probably using the Windows environment's default path for TypeScript to check the version. That's probably why it returns `1.0.3.0`, but you have already installed `1.7`. To change this, you can try the following different approaches:

### Change Windows Environment Path for TypeScript

Or install Visual Studio 2015 Update 2, because this version of Visual Studio contains TypeScript Build, and if you already installed the latest version of TypeScript, it will warn you and update Visual Studio for you.

> TypeScript Visual Studio 2015 Update 2 includes TypeScript 1.8, which includes
> the following new and improved features. Support for string literal types,
> F-bounded polymorphism, 'this'-based type guards, and improved union type
> inference. The compiler now highlights common bugs such as unreachable code,
> missing return statements, and unused labels. JSX support has been updated to
> recognize and colorize the latest changes in the JSX syntax. Improved
> tsconfig.json support for better control over build configurations. Ability to
> design more modular libraries using module augmentation. JavaScript source
> files can be included as input to the TypeScript compiler. For more
> information, see the TypeScript blog on MSDN.

## Install TypeScript

You can install TypeScript by either running `npm install -g typescript` if you have NPM installed, or you can download the TypeScript executable file for Windows and install it.

## Create TypeScript File

TypeScript files end with the `*.ts` extension. Let's say you create a file like the following:

```
function appendName(name) {
	return "Hi, " + name;
}
```

Go to the file's location in your command line and type `tsc {your file}.ts`. Then you should get a JavaScript file generated by the TypeScript compiler, `{your file}.js`.

## Use TypeScript Syntax

Let's change the method to `appendStringName(name: string)`. This is TypeScript syntax that specifies the parameter only accepts a string. When you run the command `tsc {your file}.ts`, it will throw an error, but the JavaScript file will still be regenerated.

### Why TypeScript Sometimes Generates JavaScript and Sometimes Does Not

Sometimes TypeScript will generate JavaScript even with errors, and sometimes it does not. This depends on the severity and type of errors encountered.

Now, the following TypeScript will output the second snippet's JavaScript result.

### TypeScript Example of Using Class

```
function appendStringName(name: string) {
	return "Hi, " + name;
}

class User {
	name: string;
	age: number;
	constructor (public firstName, public lastName, public age) {
	this.name = firstName + " " + lastName + " " + age;

	}
}

// passing number to the string is ok
appendStringName(1);
// passing string to the int is not okay
var user = User("john", "kenny", "1");
```

### TypeScript's Output Result in JavaScript

```
function appendStringName(name) {
    return "Hi, " + name;
}

var User = (function () {
    function User(firstName, lastName, age) {
        this.firstName = firstName;
        this.lastName = lastName;
        this.age = age;
        this.name = firstName + " " + lastName + " " + age;
    }
    return User;
})();

// passing number to the string is ok
appendStringName(1);

// passing string to the int is not okay
var user = User("john", "kenny", "1");
```

## How to Learn TypeScript

Check the TypeScript documentation for all the aspects, and try it out!

## Conclusion

TypeScript provides type safety on top of JavaScript, making it easier to catch errors at compile time. Start by installing TypeScript, creating `.ts` files, and experimenting with its type system to improve your development workflow.


This blog shows how to get started with TypeScript.

TypeScript

Claude Code - Anthropic's AI Agent That Lives in Your Terminal

GitHub Copilot - The AI Coding Assistant That Changes How You Write Code

How to use TypeScript with Jest

Use TypeScript with Google CloudFunction and Deploy locally

Start Angular2 - Resources

Getting Started with TypeScript

Subscribe for Updates