TypeScript & Performance

Development environment

VS Code

Console

GitHub

Git

Production environment

Atlas

Web browser

SSH/SCP

HTTPS

TypeScript

function increment(value) {

return value + 1;

}

​

let count = '1';

console.log(increment(count));

function increment(value: number) {

return value + 1;

}

​

let count: number = '1';

console.log(increment(count));

Try it out

<div id="app"></div>

<script type="module" src="index.ts"></script>

mkdir testTypescript && cd testTypescript

npm install vite

npx vite

function increment(value: number): number {

return value + 1;

}

​

let count: number = '1';

const x = increment(count);

console.log(x);

​

const root = document.getElementById('app');

root.innerHTML = `Hello, world! ${x}`;

​

Index.html

Index.ts

Beyond type checking

console.log(xx);

​

​

​

​

​

​

​

const app = document.getElementById('app');

app.innerHTML = `<p>Count: ${count}</p>`;

​

possible null value

undefined variable

function increment(value: number) {

return value + 1;

}

​

let count: number = 'one';

count = increment(count);

​

const app = document.getElementById('app');

app.innerHTML = `<p>Count: ${count}</p>`;

Interface

interface Book {

title: string;

id: number;

}

​

function catalog(book: Book) {

console.log(`New ${book.title}, ID: ${book.id}`);

}

​

const myBook = { title: 'Essentials', id: 2938 };

catalog(myBook);

Union

type AuthState = 'authenticated' | 'unauthenticated';

​

let auth: AuthState = 'authenticated';

​

​

​

function square(n: number | string) {

if (typeof n === 'string') {

console.log(`${n}^2`);

} else {

console.log(n * n);

}

}

​

square(5);

square('fish');

​

Enum

enum AuthStateEnum {

Authenticated = 'authenticated',

Unauthenticated = 'unauthenticated',

}

​

auth = AuthStateEnum.Authenticated;

​

Type coercion

const el = document.querySelector<HTMLElement>('#pic');

if (el) {

const width = el.offsetWidth;

console.log(`Width: ${width}px`);

}

Using TypeScript

Node.js 22 & 23 support TypeScript

node --experimental-transform-types index.ts

function add(a: number, b: number | string): number {

if (typeof b === 'string') {

b = parseInt(b, 10);

}

return a + b;

}

​

const x: number = 3;

const result: number = add(x, '3');

​

console.log(result);

Node.js 24 support TypeScript

node index.ts

function add(a: number, b: number | string): number {

if (typeof b === 'string') {

b = parseInt(b, 10);

}

return a + b;

}

​

const x: number = 3;

const result: number = add(x, '3');

​

console.log(result);

Vite supports TypeScript

npm install vite@latest react react-dom

import React, { JSX } from 'react';

import ReactDOM from 'react-dom/client';

​

interface Props {

greeting: string;

count?: number;

}

​

function App({ greeting, count = 3 }: Props): JSX.Element {

return (

<div>

{Array.from({ length: count }).map((_, index: number) => (

<h1 key={index}>{greeting}, World!</h1>

))}

</div>

);

}

​

const root = ReactDOM.createRoot(document.getElementById('root'));

root.render(<App greeting='hello' />);

​

Performance

WPengine

Optimize for real usage (Cache, bandwidth, cpu, storage)

Optimize based on data

Prioritize bottlenecks

Look at download size

Compress, reduce, minify

Lazy load

Use psychology

Get busy!