π A type alias lets you define a custom name for a type (including object types, unions, functions, etc.).
π It makes your code cleaner, more readable, and DRY (Don't Repeat Yourself).
β Basic Syntax
type AliasName = Type;β Example 1: Primitive Type Alias
type Username = string;
let user1: Username = "Alice";
let user2: Username = "Tisha";β Example 2: Union Type Alias
type Status = "pending" | "approved" | "rejected";
let orderStatus: Status = "approved";
// orderStatus = "done"; // β Errorβ Example 3: Array or Tuple Alias
type StringArray = string[];
type Point = [number, number];
const names: StringArray = ["Alice", "Bob"];
const coord: Point = [10, 20];β Example 4: Function Type Alias
type Logger = (message: string, level?: "info" | "error") => void;
const log: Logger = (msg, level = "info") => {
console.log(`[${level.toUpperCase()}]: ${msg}`);
};β Example 5: Object Type Alias
type User = {
name: string;
age: number;
isAdmin?: boolean;
};
const user: User = {
name: "Codeveda",
age: 21
};π Combined Example
<div class="infographic-ts" id="infographic-ts">
<style>
.infographic-ts {
--body-font: system-ui, -apple-system, sans-serif;
--mono-font: ui-monospace, SFMono-Regular, Consolas, "Courier New", monospace;
--ed-bg: #1e1e1e;
--ed-bar: #2a2a2a;
--ed-out: #d4d4d4;
--ed-muted: #8a8a8a;
--ed-ok: #4ec9b0;
--run-bg: #2e7d46;
--run-bg-hover: #35924f;
--tok-kw: #c586c0;
--tok-type: #4ec9b0;
--tok-str: #ce9178;
--tok-num: #b5cea8;
--tok-cmt: #808080;
--tok-var: #ffffff;
max-width: 680px;
margin: 0 auto;
box-sizing: border-box;
background: transparent;
font-family: var(--body-font);
}
.infographic-ts * { box-sizing: border-box; }
.ts-header { font-family: 'Georgia', 'Fraunces', serif; font-weight: 700;
font-size: 1.9rem; letter-spacing: 0.01em; color: inherit; text-align: center;
margin: 0 0 1.4rem; }
.code-window { background: var(--ed-bg); border: 1px solid #2f2f2f; border-radius: 8px;
overflow: hidden; margin-bottom: 1rem; }
.code-topbar { display: flex; align-items: center; justify-content: space-between;
padding: 0.5rem 0.75rem; background: var(--ed-bar); }
.code-dots { display: flex; gap: 6px; }
.code-dot { width: 9px; height: 9px; border-radius: 50%; }
.code-dot.r { background: #ff5f57; }
.code-dot.y { background: #febc2e; }
.code-dot.g { background: #28c840; }
.code-filename { font-family: var(--mono-font); font-size: 0.74rem; color: var(--ed-muted); }
.run-btn { display: inline-flex; align-items: center; gap: 0.35rem; background: var(--run-bg);
color: #fff; border: none; border-radius: 4px; padding: 0.32rem 0.7rem; font-size: 0.74rem;
font-family: var(--body-font); font-weight: 500; cursor: pointer; }
.run-btn:hover { background: var(--run-bg-hover); }
.run-btn svg { width: 10px; height: 10px; }
.code-body { padding: 0.85rem 1.1rem; font-family: var(--mono-font); font-size: 0.8rem;
line-height: 1.65; color: var(--ed-out); white-space: pre; overflow-x: auto; }
.tok-kw { color: var(--tok-kw); }
.tok-type { color: var(--tok-type); }
.tok-str { color: var(--tok-str); }
.tok-num { color: var(--tok-num); }
.tok-punc { color: var(--tok-var); }
.tok-cmt { color: var(--tok-cmt); }
.tok-var { color: var(--tok-var); }
.console { padding: 0 1.1rem; max-height: 0; overflow: hidden; font-family: var(--mono-font);
font-size: 0.78rem; line-height: 1.65; transition: max-height 0.35s ease, padding 0.35s ease; }
.console.show { max-height: 260px; padding: 0 1.1rem 0.85rem; }
.console-line { color: var(--ed-out); }
.console-line.ok { color: var(--ed-ok); }
.note-line { font-family: var(--body-font); font-size: 0.8rem; color: var(--ed-muted);
padding: 0 0.2rem; margin: 0; }
.runtime-highlight { background: #2a2a2c; border-left: 3px solid var(--ed-ok);
border-radius: 6px; margin: 0.6rem 0.35rem 0.7rem; padding: 0.85rem 1.1rem;
box-shadow: 0 2px 10px rgba(0,0,0,0.35); }
.highlight-label { font-family: var(--body-font); font-size: 0.74rem; color: var(--ed-ok);
font-weight: 500; margin: 0.9rem 0 0.15rem; padding: 0 1.1rem; }
.code-body.dimmed { opacity: 0.35; }
</style>
<div class="code-window">
<div class="code-topbar">
<div class="code-dots"><span class="code-dot r"></span><span class="code-dot y"></span><span class="code-dot g"></span></div>
<span class="code-filename">aliases.ts</span>
<button class="run-btn" id="runBtn" type="button">
<svg viewBox="0 0 24 24" fill="currentColor"><polygon points="6 3 20 12 6 21 6 3"/></svg>
run
</button>
</div>
<div class="code-body"><span class="tok-cmt">// primitive alias</span>
<span class="tok-kw">type</span> <span class="tok-type">Username</span> <span class="tok-punc">=</span> <span class="tok-type">string</span><span class="tok-punc">;</span>
<span class="tok-cmt">// union alias</span>
<span class="tok-kw">type</span> <span class="tok-type">Status</span> <span class="tok-punc">=</span> <span class="tok-str">"pending"</span> <span class="tok-punc">|</span> <span class="tok-str">"approved"</span> <span class="tok-punc">|</span> <span class="tok-str">"rejected"</span><span class="tok-punc">;</span>
<span class="tok-cmt">// array & tuple aliases</span>
<span class="tok-kw">type</span> <span class="tok-type">StringArray</span> <span class="tok-punc">=</span> <span class="tok-type">string</span><span class="tok-punc">[];</span>
<span class="tok-kw">type</span> <span class="tok-type">Point</span> <span class="tok-punc">=</span> <span class="tok-punc">[</span><span class="tok-type">number</span><span class="tok-punc">,</span> <span class="tok-type">number</span><span class="tok-punc">];</span>
<span class="tok-cmt">// function alias</span>
<span class="tok-kw">type</span> <span class="tok-type">Logger</span> <span class="tok-punc">=</span> <span class="tok-punc">(</span><span class="tok-var">message</span><span class="tok-punc">:</span> <span class="tok-type">string</span><span class="tok-punc">,</span> <span class="tok-var">level</span><span class="tok-punc">?:</span> <span class="tok-str">"info"</span> <span class="tok-punc">|</span> <span class="tok-str">"error"</span><span class="tok-punc">)</span> <span class="tok-punc">=></span> <span class="tok-type">void</span><span class="tok-punc">;</span>
<span class="tok-cmt">// object alias, built out of all of the above</span>
<span class="tok-kw">type</span> <span class="tok-type">User</span> <span class="tok-punc">=</span> <span class="tok-punc">{</span>
<span class="tok-var">name</span><span class="tok-punc">:</span> <span class="tok-type">Username</span><span class="tok-punc">;</span>
<span class="tok-var">age</span><span class="tok-punc">:</span> <span class="tok-type">number</span><span class="tok-punc">;</span>
<span class="tok-var">isAdmin</span><span class="tok-punc">?:</span> <span class="tok-type">boolean</span><span class="tok-punc">;</span>
<span class="tok-var">status</span><span class="tok-punc">:</span> <span class="tok-type">Status</span><span class="tok-punc">;</span>
<span class="tok-var">tags</span><span class="tok-punc">:</span> <span class="tok-type">StringArray</span><span class="tok-punc">;</span>
<span class="tok-var">location</span><span class="tok-punc">:</span> <span class="tok-type">Point</span><span class="tok-punc">;</span>
<span class="tok-punc">};</span></div>
<p class="highlight-label">↓ the part that actually runs — the types above are gone by now</p>
<div class="code-body runtime-highlight"><span class="tok-kw">const</span> <span class="tok-var">log</span><span class="tok-punc">:</span> <span class="tok-type">Logger</span> <span class="tok-punc">=</span> <span class="tok-punc">(</span><span class="tok-var">msg</span><span class="tok-punc">,</span> <span class="tok-var">level</span> <span class="tok-punc">=</span> <span class="tok-str">"info"</span><span class="tok-punc">)</span> <span class="tok-punc">=></span> <span class="tok-punc">{</span>
<span class="tok-var">console</span><span class="tok-punc">.</span><span class="tok-var">log</span><span class="tok-punc">(</span><span class="tok-str">`[${</span><span class="tok-var">level</span><span class="tok-punc">.</span><span class="tok-var">toUpperCase</span><span class="tok-punc">()}]: ${</span><span class="tok-var">msg</span><span class="tok-str">}`</span><span class="tok-punc">);</span>
<span class="tok-punc">};</span>
<span class="tok-kw">const</span> <span class="tok-var">user</span><span class="tok-punc">:</span> <span class="tok-type">User</span> <span class="tok-punc">=</span> <span class="tok-punc">{</span>
<span class="tok-var">name</span><span class="tok-punc">:</span> <span class="tok-str">"Codeveda"</span><span class="tok-punc">,</span>
<span class="tok-var">age</span><span class="tok-punc">:</span> <span class="tok-num">21</span><span class="tok-punc">,</span>
<span class="tok-var">status</span><span class="tok-punc">:</span> <span class="tok-str">"approved"</span><span class="tok-punc">,</span>
<span class="tok-var">tags</span><span class="tok-punc">:</span> <span class="tok-punc">[</span><span class="tok-str">"admin"</span><span class="tok-punc">,</span> <span class="tok-str">"verified"</span><span class="tok-punc">],</span>
<span class="tok-var">location</span><span class="tok-punc">:</span> <span class="tok-punc">[</span><span class="tok-num">10</span><span class="tok-punc">,</span> <span class="tok-num">20</span><span class="tok-punc">]</span>
<span class="tok-punc">};</span>
<span class="tok-var">log</span><span class="tok-punc">(</span><span class="tok-str">`${</span><span class="tok-var">user</span><span class="tok-punc">.</span><span class="tok-var">name</span><span class="tok-str">} is ${</span><span class="tok-var">user</span><span class="tok-punc">.</span><span class="tok-var">status</span><span class="tok-str">}`</span><span class="tok-punc">);</span>
<span class="tok-var">log</span><span class="tok-punc">(</span><span class="tok-str">`Tags: ${</span><span class="tok-var">user</span><span class="tok-punc">.</span><span class="tok-var">tags</span><span class="tok-punc">.</span><span class="tok-var">join</span><span class="tok-punc">(</span><span class="tok-str">", "</span><span class="tok-punc">)}`</span><span class="tok-punc">);</span>
<span class="tok-var">log</span><span class="tok-punc">(</span><span class="tok-str">`Location: (${</span><span class="tok-var">user</span><span class="tok-punc">.</span><span class="tok-var">location</span><span class="tok-punc">[</span><span class="tok-num">0</span><span class="tok-punc">]}, ${</span><span class="tok-var">user</span><span class="tok-punc">.</span><span class="tok-var">location</span><span class="tok-punc">[</span><span class="tok-num">1</span><span class="tok-punc">]})`</span><span class="tok-punc">);</span></div>
<div class="console" id="runConsole"></div>
</div>
<p class="note-line">Username, Status, StringArray, Point and Logger each alias one piece; User composes all five into a single shape.</p>
<script>
(function () {
var wrapper = document.currentScript.closest('.infographic-ts')
|| document.querySelector('.infographic-ts');
var root = wrapper;
function line(consoleEl, cls, text) {
var el = document.createElement('div');
el.className = 'console-line ' + (cls || '');
el.textContent = text;
consoleEl.appendChild(el);
}
var btn = root.querySelector('#runBtn');
var c = root.querySelector('#runConsole');
btn.addEventListener('click', function () {
c.innerHTML = '';
c.classList.add('show');
line(c, 'ok', '[INFO]: Codeveda is approved');
line(c, 'ok', '[INFO]: Tags: admin, verified');
line(c, 'ok', '[INFO]: Location: (10, 20)');
setTimeout(function () {
c.scrollIntoView({ behavior: 'smooth', block: 'end' });
}, 50);
});
})();
</script>
</div>β Summary
Feature | Example |
|---|---|
Basic Alias |
|
Object Alias |
|
Union Types | `type Status = "open" |
Function Alias |
|
Reusable Types |
|
Combined Types |
|
π‘ Type Alias vs Interface
Feature |
|
|
|---|---|---|
Aliases for any type (primitives, unions, functions, etc.) | β | β |
Extends/Implements for OOP | β
via | β
with |
Declaration merging | β | β |
πΉ Use type for flexibility and unions
πΉ Use
interfacefor class-like or extendable structures