CS 349 TypeScript Intro

Appearance

Types ​

JavaScript is dynamically typed - variables can hold values of any type, and those types can change during execution. While this flexibility can be powerful, it can also lead to unexpected behavior. Let's look at JavaScript's built-in types and how they work.

Primitive Types ​

JavaScript has several primitive types:

boolean: Represents a logical entity that can have two values: true and false.

js
let a = true;
let b = false;
let c = a && b;  // false

number: Represents both integer and floating-point numbers.

js
let a = 42;
let b = 3.14;
let c = -17;
let d = 2.998e8;  // Scientific notation

string: Represents a sequence of characters. There are 3 ways to define a literal string, which will be explained below.

js
let a = "hello";
let b = 'world';
let c = `world`;

null: Represents the intentional absence of any object value.

js
let a = null;  // Explicitly set to no value
console.log(a);  // null

undefined: Indicates that a variable has not been assigned a value.

js
let a;  // Declared but not initialized
console.log(a);  // undefined

Everything else in JavaScript is an object, including arrays and functions.

👉 We'll learn more about arrays and objects later.

Strings ​

JavaScript strings are immutable sequences of characters.

A literal String is defined using double quotes ", single quotes ', or backticks `.

js
let doubleQuoteString = "defined with double quotes";
let singleQuoteString = 'defined with single quotes';
let backtickString = `defined with backticks.`;

For long multi-line strings, you can use backticks (called template literals, covered later). Note that JavaScript does not support triple quotes (""" or '''') for multi-line strings like Python.

js
let multiLineString = `
    This is a long string
    that spans across multiple lines.
    The indentation and line breaks
    are preserved.
`;

The + operator concatenates strings, and you can access individual characters using array-like indexing:

js
const a = "hello";
const b = "world";
console.log(a + " " + b);  // "hello world"
console.log(a[1]);         // "e"

Even though strings are primitive types, you can call methods on them. JavaScript temporarily wraps strings in String objects behind the scenes. Common string methods (all return new strings unless noted):

  • slice(start, end) - extracts part of string
  • toLowerCase() - converts to lowercase
  • trim() - removes whitespace from both ends
  • split(separator) - splits into array of substrings (returns array)
  • indexOf(searchStr) - finds first occurrence (returns number)

External Resources

The typeof Operator ​

The typeof operator returns a string with the name of the type:

js
let a = 42;
console.log(typeof a);        // "number"

let b = "hello";
console.log(typeof b);        // "string"

let c = true;
console.log(typeof c);        // "boolean"

let d;
console.log(typeof d);        // "undefined"

// Note: for any object (arrays, functions, etc), typeof returns "object"
let e = [1, 2, 3];
console.log(typeof e);        // "object"

Type Conversion (Coercion) ​

In JavaScript, a variable's type changes when you reassign it to a value of a different type.

js
let x = 42;           // x is a number
x = "hello";          // now x is a string
x = true;             // now x is a boolean
console.log(x);       // true

JavaScript also automatically converts values between types, which can lead to unexpected and error-prone behavior. This "feature" is one of JavaScript's most criticized aspects, as it can make code harder to debug and maintain.

js
// These produce very different results!
let a = 5 + "10";     // "510" (string concatenation)
let b = 5 - "10";     // -5 (numeric subtraction)

// Same operators, different types, unpredictable results
let c = "5" + 10;     // "510" (treated as strings)
let d = "10" - 5;     // 5 (treated as numbers)

// Comparisons silently convert types
let e = 5 < "10";     // true (string "10" converted to number)
let f = "5" == 5;     // true (loose equality converts types)
let g = "5" === 5;    // false (strict equality preserves types)

🚫 These automatic conversions are a common source of bugs. TypeScript helps prevent these issues by requiring explicit type declarations and conversions, making your code safer and more predictable.

External Resources