Day09: Learning TypeScript - Object Types: Arrays / Function

Arrays

In TypeScript, there are four ways to define array types:

1. General Bracket Notation

Let TypeScript automatically infer the type (Type Inference). In the example below, TS infers list1 as number[].

const list1 = [1, 2, 3]

2. Type + Bracket Notation

✅ number[] indicates that this array type only allows numbers:

const list2: number[] = [1, 2, 3]

❌ If it is not a number, it will throw an error, such as:

list1.push('8')
// error: Argument of type 'string' is not assignable to parameter of type 'number'.

3. Array Generics

✅ We can use array generics (Array<elemType>) to represent arrays:

const list3: Array<number> = [1, 2, 3]

4. Defining Arrays with Interface

✅ You can also use an interface to describe the shape of an array. NumberArray indicates that as long as the index type is a number, the value type must be a number.

interface NumberArray {
  [index: number]: number
}
const list4: NumberArray = [1, 1, 2, 3, 5]

❗ Although interfaces can also describe arrays, we generally do not do this because it is more complex than the previous methods. However, there is one exception: it is often used to represent class arrays.

Function

1. Parameter Type Annotations

You can specify parameter types in functions:

function sum(x: number, y: number): number {
  return x + y
}
console.log(sum(1, 2)) // 3

2. Function Expressions

// JavaScript
let sum2 = function (x, y) {
  return x + y
}

// TypeScript
let sum2 = function (x: number, y: number): number {
  return x + y
}
console.log(sum2(1, 2)) // 3

3. Arrow Functions

// JavaScript
let sum3 = (x, y) => {
  return x + y
}

// TypeScript
let sum3 = (x: number, y: number): number => x + y
console.log(sum3(1, 2)) // 3

4. Anonymous Functions

✅ When using anonymous functions in TypeScript, it will automatically infer the parameter type. Let's look at an example:

const names = ['Alice', 'Bob', 'Eve']
names.forEach((s) => {
  console.log(s.toUpperCase())
})

TypeScript will automatically infer that the names variable is a string array, and the parameter passed in is a string.

❌ Let's intentionally misspell the string property toUpperCase as toUppercase (though it can happen in daily life):

names.forEach((s) => {
  console.log(s.toUppercase())
})

// error: Property 'toUppercase' does not exist on type 'string'. Did you mean 'toUpperCase'?

It will tell you that 'toUppercase' does not exist on the string type, suggesting you change it to 'toUpperCase'. This is really convenient!

Later, I will also take detailed notes on function applications, including interface definitions for function shapes, optional parameters, overloads, etc.

You can refer to the examples I recorded while learning here.

Today, we finished introducing arrays and functions. Tomorrow, I will start taking notes on types that are unique to TypeScript!

References

https://willh.gitbook.io/typescript-tutorial/basics/type-of-array#can-kao https://www.typescriptlang.org/docs/handbook/2/everyday-types.html#anonymous-functions