👉 Primitive types represent simple, immutable values.
👉 They’re the same core types you see in JavaScript — but with TypeScript’s type safety!
⚡ List of TypeScript primitive types
Type | Description | Example |
|---|---|---|
string | Textual data | "hello", 'world', |
number | All numbers (integers, floats, NaN, Infinity) | 42, 3.14, -7 |
boolean | True or false values | true, false |
null | Represents an intentional absence of value | null |
undefined | A variable that hasn’t been assigned | undefined |
bigint | For very large integers | 9007199254740991n |
symbol | Unique identifiers | Symbol("id") |
<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-prompt: #4ec9b0;
--ed-ok: #4ec9b0;
--run-bg: #2e7d46;
--run-bg-hover: #35924f;
--tok-kw: #c586c0;
--tok-type: #4ec9b0;
--tok-str: #ce9178;
--tok-num: #b5cea8;
--tok-punc: #d4d4d4;
--tok-cmt: #808080;
--tok-var: #ffffff;
--badge-bg: #2a2a2a;
--badge-active: #37474f;
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-weight: 600; font-size: 1.4rem; color: inherit; text-align: center;
margin: 0 0 1.25rem; }
.code-window { background: var(--ed-bg); border-radius: 8px; overflow: hidden; }
.code-topbar { display: flex; align-items: center; justify-content: space-between;
padding: 0.55rem 0.8rem; background: var(--ed-bar); }
.code-dots { display: flex; gap: 6px; }
.code-dot { width: 10px; height: 10px; 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.76rem; 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.35rem 0.75rem; font-size: 0.76rem;
font-family: var(--body-font); font-weight: 500; cursor: pointer; }
.run-btn:hover { background: var(--run-bg-hover); }
.run-btn svg { width: 11px; height: 11px; }
.code-body { padding: 0.6rem 0.7rem; font-family: var(--mono-font); font-size: 0.82rem;
line-height: 1.55; }
.code-row { padding: 0.3rem 0.55rem; border-radius: 4px; border-left: 3px solid transparent;
transition: background 0.2s, border-color 0.2s, opacity 0.2s; cursor: default; }
.code-row.active { background: rgba(255,255,255,0.07); border-left-color: var(--tok-type); }
.code-row.dim { opacity: 0.32; }
.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-punc); }
.tok-cmt { color: var(--tok-cmt); }
.tok-var { color: var(--tok-var); }
.badges { display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: center;
margin: 1.1rem 0 0.6rem; }
.badge { font-family: var(--mono-font); font-size: 0.78rem; background: var(--badge-bg);
color: var(--ed-out); border: 1px solid #3a3a3a; border-radius: 20px; padding: 0.35rem 0.85rem;
cursor: pointer; transition: background 0.2s, border-color 0.2s; }
.badge:hover { border-color: var(--tok-type); }
.badge.active { background: var(--badge-active); border-color: var(--tok-type); color: #fff; }
.explain { min-height: 1.4rem; text-align: center; font-size: 0.85rem; color: inherit;
opacity: 0.85; margin: 0 auto; max-width: 480px; padding: 0 0.5rem; }
.console { padding: 0 0.7rem; max-height: 0; overflow: hidden; font-family: var(--mono-font);
font-size: 0.8rem; line-height: 1.6; transition: max-height 0.35s ease, padding 0.35s ease; }
.console.show { max-height: 260px; padding: 0.2rem 0.7rem 0.7rem; }
.console-line { color: var(--ed-out); padding: 0.05rem 0.55rem; }
.console-line .lbl { color: var(--ed-muted); }
.console-line .ty { color: var(--tok-type); }
</style>
<h2 class="ts-header">Primitive types playground</h2>
<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">types.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">
<div class="code-row" data-type="string"><span class="tok-cmt">// string</span><br><span class="tok-kw">let</span> <span class="tok-var">username</span><span class="tok-var">:</span> <span class="tok-type">string</span> <span class="tok-var">=</span> <span class="tok-str">"Alice"</span><span class="tok-punc">;</span></div>
<div class="code-row" data-type="number"><span class="tok-cmt">// number</span><br><span class="tok-kw">let</span> <span class="tok-var">age</span><span class="tok-var">:</span> <span class="tok-type">number</span> <span class="tok-var">=</span> <span class="tok-num">30</span><span class="tok-punc">;</span><br><span class="tok-kw">let</span> <span class="tok-var">pi</span><span class="tok-var">:</span> <span class="tok-type">number</span> <span class="tok-var">=</span> <span class="tok-num">3.14159</span><span class="tok-punc">;</span></div>
<div class="code-row" data-type="boolean"><span class="tok-cmt">// boolean</span><br><span class="tok-kw">let</span> <span class="tok-var">isLoggedIn</span><span class="tok-var">:</span> <span class="tok-type">boolean</span> <span class="tok-var">=</span> <span class="tok-kw">true</span><span class="tok-punc">;</span></div>
<div class="code-row" data-type="null"><span class="tok-cmt">// null</span><br><span class="tok-kw">let</span> <span class="tok-var">emptyValue</span><span class="tok-var">:</span> <span class="tok-type">null</span> <span class="tok-var">=</span> <span class="tok-kw">null</span><span class="tok-punc">;</span></div>
<div class="code-row" data-type="undefined"><span class="tok-cmt">// undefined</span><br><span class="tok-kw">let</span> <span class="tok-var">notAssigned</span><span class="tok-var">:</span> <span class="tok-type">undefined</span> <span class="tok-var">=</span> <span class="tok-kw">undefined</span><span class="tok-punc">;</span></div>
<div class="code-row" data-type="bigint"><span class="tok-cmt">// bigint</span><br><span class="tok-kw">let</span> <span class="tok-var">bigNumber</span><span class="tok-var">:</span> <span class="tok-type">bigint</span> <span class="tok-var">=</span> <span class="tok-num">9007199254740991n</span><span class="tok-punc">;</span></div>
<div class="code-row" data-type="symbol"><span class="tok-cmt">// symbol</span><br><span class="tok-kw">let</span> <span class="tok-var">uniqueId</span><span class="tok-var">:</span> <span class="tok-type">symbol</span> <span class="tok-var">=</span> <span class="tok-kw">Symbol</span><span class="tok-punc">(</span><span class="tok-str">"id"</span><span class="tok-punc">);</span></div>
</div>
<div class="console" id="ffConsole"></div>
</div>
<div class="badges" id="badges">
<button class="badge" data-type="string" type="button">string</button>
<button class="badge" data-type="number" type="button">number</button>
<button class="badge" data-type="boolean" type="button">boolean</button>
<button class="badge" data-type="null" type="button">null</button>
<button class="badge" data-type="undefined" type="button">undefined</button>
<button class="badge" data-type="bigint" type="button">bigint</button>
<button class="badge" data-type="symbol" type="button">symbol</button>
</div>
<p class="explain" id="explain">Click a type to see it highlighted above.</p>
<script>
(function () {
var wrapper = document.currentScript.closest('.infographic-ts')
|| document.querySelector('.infographic-ts');
var root = wrapper;
var explanations = {
string: 'Text, always wrapped in quotes or backticks.',
number: 'Every numeric value \u2014 integers and decimals share one type.',
boolean: 'Only ever true or false.',
'null': "An intentional empty value \u2014 yet typeof reports 'object', a long-standing JavaScript quirk.",
undefined: "A variable that's been declared but never given a value.",
bigint: 'For integers too large for number, written with a trailing n.',
symbol: 'A guaranteed-unique value, often used as an object key.'
};
var rows = root.querySelectorAll('.code-row');
var badges = root.querySelectorAll('.badge');
var explain = root.querySelector('#explain');
var active = null;
function select(type) {
if (active === type) {
rows.forEach(function (r) { r.classList.remove('active', 'dim'); });
badges.forEach(function (b) { b.classList.remove('active'); });
explain.textContent = 'Click a type to see it highlighted above.';
active = null;
return;
}
active = type;
rows.forEach(function (r) {
var match = r.getAttribute('data-type') === type;
r.classList.toggle('active', match);
r.classList.toggle('dim', !match);
});
badges.forEach(function (b) {
b.classList.toggle('active', b.getAttribute('data-type') === type);
});
explain.textContent = explanations[type];
}
badges.forEach(function (b) {
b.addEventListener('click', function () { select(b.getAttribute('data-type')); });
});
var runBtn = root.querySelector('#runBtn');
var ffConsole = root.querySelector('#ffConsole');
var results = [
['username', 'string', '"Alice"'],
['age', 'number', '30'],
['pi', 'number', '3.14159'],
['isLoggedIn', 'boolean', 'true'],
['emptyValue', 'object', 'null'],
['notAssigned', 'undefined', 'undefined'],
['bigNumber', 'bigint', '9007199254740991n'],
['uniqueId', 'symbol', 'Symbol(id)']
];
runBtn.addEventListener('click', function () {
ffConsole.innerHTML = '';
ffConsole.classList.add('show');
results.forEach(function (r) {
var line = document.createElement('div');
line.className = 'console-line';
line.innerHTML = '<span class="lbl">typeof ' + r[0] + ' \u2192</span> <span class="ty">' + r[1] + '</span> ' + r[2];
ffConsole.appendChild(line);
});
});
})();
</script>
</div>💡 Notes
TypeScript infers these types if you assign a value at declaration:
let name = "John"; // TypeScript knows this is a stringnull and undefined are their own types, but often combined in union types:
let value: string | null;bigint requires ES2020 or newer in tsconfig.json.
symbol is often used in advanced scenarios (e.g., object keys).
⚡ Summary
Primitive type | Example value |
|---|---|
string | "hello" |
number | 42, 3.14 |
boolean | true |
null | null |
undefined | undefined |
bigint | 12345678901234567890n |
symbol | Symbol("key") |