# Declare

The declare keyword is used to inform the TypeScript Type System that a variable exists even if it cannot be found in the current source code.

ts
// Declare that a ghost exists, and that it has a function called "boo"
declare const ghost: { boo: () => void };
 
ghost.boo();Try

TypeScript would emit JavaScript code like:

ts
"use strict";
ghost.boo();
 Try

This code could crash if there isn’t other code setting up the ghost object elsewhere.

# Emit

# Index Signature

A type in TypeScript usually describes an exact set of fields to match on an object. An index signature is a way to define the Shape of fields which are not known ahead of time.

ts
type MathConstants = {
  pi: 3.14159;
  phi: 1.61803;
 
  [key: string]: number;
};
 
interface ModernConstants {
  taniguchi: 0.6782344919;
  raabe: 0.9189385332;
 
  [key: string]: number;
}Try

The [key: string]: number; is the index signature, which indicates to TypeScript that any fields on the object which are not mentioned will be a particular types.

For example, with a Declared instance of ModernConstants:

ts
declare const modernConstants: ModernConstants;
 
// This was defined earlier
modernConstants.raabe;
                 
(property) ModernConstants.raabe: 0.9189385332
 
// This field was not defined above, so it is just `number`
modernConstants.lebesgue;
                   
(index) ModernConstants[string]: numberTry

In TypeScript 4.1 you can use the TSConfig flag noPropertyAccessFromIndexSignature to enforce using quote notation (modernConstants["lebesgue"]) instead of dot notation (modernConstants.lebesgue) to make using an index signature explicit in the calling code.

# Interface

An interface is a way to describe the Shape of a JavaScript object. For example, a dog could be described in the following format:

ts
interface Dog {
  name: string;
  dateOfBirth: Date;
  markings: string[];
}Try

This means that only an object with a name, dateOfBirth and markings could be classed as a “Dog” in the Type System.

# Parser

The parser is a part of the TypeScript compiler which takes the text from a Source File and converts it into an Abstract Syntax Tree.

# JavaScript Runtime

# Shape

The term “shape” is used to describe the fields and values on a JavaScript object. For example, you could say that this JavaScript object:

ts
const house = {
  name: "Shibden hall",
  road: "Lister's Road",
  town: "Halifax",
  county: "West Yorkshire",
};

has the shape:

• name: string
• road: string
• town: string
• country: string

TypeScript can describe this shape using two different syntaxes: Interfaces and Types

ts
interface House {
  name: string;
  road: string;
  town: string;
  country: string;
}
// or
type House = {
  name: string;
  road: string;
  town: string;
  country: string;
};

# Source File

The representation of text which TypeScript would recognize as JavaScript or TypeScript source code.

# Type System

The JavaScript language has types like string, object, symbol, boolean etc, but it does not have a static type system.

Often when the term “type system” is used, it is referring to a static type system like TypeScript provides. A static type system does not need to run your code in order to understand what the Shape of code at a particular location of a Source File looks like.

TypeScript uses a static type system to offer editing tools:

ts
const shop = {
  name: "Table Store",
  address: "Maplewood",
};
 
shop.a;
      
addressTry

As well as to provide a rich set of error messages when the types inside the type system don’t match up:

ts
let shop = {
  name: "Table Store",
  address: "Maplewood",
};
 
shop = {
  nme: "Chair Store",
Object literal may only specify known properties, but 'nme' does not exist in type '{ name: string; address: string; }'. Did you mean to write 'name'?2561Object literal may only specify known properties, but 'nme' does not exist in type '{ name: string; address: string; }'. Did you mean to write 'name'?
  address: "Maplewood",
};Try

# Types vs Runtime

TypeScript adds a “type layer” on top of JavaScript code. TypeScript does this by adding additional syntax to JavaScript which needs to be removed in order to run inside a JavaScript runtime.

For example, this is JavaScript code which would run in a JavaScript runtime:

ts
const hello = "Hello world";

This is not:

ts
const hello: string = "Hello world";

The : string could be thought of as code which only exists in the “type layer” of TypeScript and not in the “runtime” / “expression” layer of JavaScript code which runs.

The type layer is