Protecting TypeScript and JSX

When working with modern JavaScript frameworks and TypeScript, it's important to understand the correct approach for implementing ByteHide Shield protection. This guide explains how to properly protect TypeScript and JSX/TSX files.

Understanding the Compilation Process

TypeScript, JSX, and TSX files all go through a compilation process before being executed in browsers or Node.js environments:

1. TypeScript (.ts) files are compiled to JavaScript (.js)
2. JSX/TSX (.jsx, .tsx) files are transformed to standard JavaScript
3. Any framework-specific syntax (React, Vue, Angular) is converted to standard JavaScript

This means that the final artifacts that get deployed and executed are always JavaScript files, regardless of the source language or framework you use.

The Correct Protection Approach

Protect the Compiled JavaScript, Not the Source

Because TypeScript and JSX are development languages that don't run directly in browsers, you should not attempt to protect these files directly. Instead:

✅ DO protect the compiled JavaScript output files
❌ DON'T try to protect TypeScript or JSX source files

Integration in the Build Pipeline

The optimal approach is to integrate ByteHide Shield as the final step in your build process:

TypeScript/JSX Source → Compilation → Bundle/Minify → SHIELD PROTECTION → Deployment

TypeScript/JSX Source → Compilation → Bundle/Minify → SHIELD PROTECTION → Deployment

This ensures that:

1. All type annotations and JSX syntax have been properly compiled
2. The code is in its final form for deployment
3. Your protection is applied to exactly what users will receive

Implementation Strategy

For Build Tool Integrations

If you're using one of our build tool integrations, this is handled automatically:

• Webpack
• Next.js
• Rollup
• Vite

These integrations apply Shield protection after TypeScript/JSX compilation as part of the build process.

For Manual Protection (CLI or API)

If you're using our CLI or API directly:

# Correct - Protect compiled JS files
tsc --project tsconfig.json  # Compile TypeScript first
shield protect "dist/**/*.js" --token YOUR_TOKEN  # Then protect the output

# INCORRECT - Don't do this
shield protect "src/**/*.ts" --token YOUR_TOKEN  # This won't work correctly

# Correct - Protect compiled JS files
tsc --project tsconfig.json  # Compile TypeScript first
shield protect "dist/**/*.js" --token YOUR_TOKEN  # Then protect the output

# INCORRECT - Don't do this
shield protect "src/**/*.ts" --token YOUR_TOKEN  # This won't work correctly

TypeScript Declaration Files

.d.ts files (TypeScript declaration files) are meant for development-time type checking and should never be protected, as they:

1. Are never included in the final bundle
2. Contain no actual implementation code
3. Are used only by the TypeScript compiler and IDE

Example: React TypeScript Project

For a typical React TypeScript project:

Common Questions

Can I protect a TypeScript project?

Yes, but you protect the compiled JavaScript output, not the TypeScript source. Your protection should be integrated into your build process after TypeScript compilation.

What if my JSX is interpreted at runtime?

Some specialized environments allow JSX to be interpreted at runtime rather than compiled ahead of time. Even in these cases, you should protect the final JS files that include the JSX runtime, not the source JSX files.

Should I protect individual files or the final bundle?

Generally, you should protect the final bundled output. See our Bundle Protection Strategy guide for more information.