TypeScript Basics: Type Syntax Is Consistent

• TypeScript's syntax for types doesn't change from place to place. Every type can be used anywhere that types are allowed. For example, we know that string can be the type of a variable, a function argument, or a function's return value.

• >

  const aString: string = 'hello';
  aString;

  Result:

  Run Code

• >

  function takesString(aString: string) {
    return aString;
  }
  takesString('this is returned');

  Result:

  Run Code

• >

  function returnsString(): string {
    return 'hello';
  }
  returnsString();

  Result:

  'hello'

• We know that a variable can be an array of strings. That tells us that we can also use an "array of strings" type for function arguments and function return values.

• >

  const arrayOfStrings: string[] = ['hello', 'world'];
  arrayOfStrings;

  Result:

  Run Code

• Here's a code problem:

  Give this function's argument a type that means "an array of strings".

  9

  1

  2

  3

  function takesAnArrayOfStrings(anArrayOfStrings: string[]) {

  return anArrayOfStrings;

  }

  12

  4

  takesAnArrayOfStrings(['hello', 'world']);

  Goal:

  ['hello', 'world']

  Yours:

  ['hello', 'world']

  Show Author's Answer

• Because the type syntax doesn't change from place to place, we can guess at the structure of more complex types. If we can make an array of strings, we should be able to make arrays of any type.

• For example, we can make an array of arrays of strings. (That is: each element of the array is itself an array of strings.)

• >

  const arrayOfArraysOfStrings: (string[])[] = [['hello'], ['world']];
  arrayOfArraysOfStrings;

  Result:

  Run Code

• We added parentheses in that type to clarify that the things inside the array have the type string[]. But those parentheses aren't necessary and are rarely used in real-world TypeScript code. The type in the next example means the same thing.

• >

  const arrayOfArraysOfStrings: string[][] = [['hello'], ['world']];
  arrayOfArraysOfStrings;

  Result:

  Run Code

• Here's a code problem:

  Give this function a return type that means "an array of arrays of strings".

  9

  1

  2

  3

  4

  5

  6

  function returnsAnArrayOfArraysOfStrings(): string[][] {

  const array = [];

  array.push(['hello']);

  array.push(['world']);

  return array;

  }

  15

  7

  8

  const array = returnsAnArrayOfArraysOfStrings();

  array;

  Goal:

  [['hello'], ['world']]

  Yours:

  [['hello'], ['world']]

  Show Author's Answer

• Every type works everywhere:

• • As a variable.
  • As a function argument or return type.
  • Inside an array.
  • As an object property.
  • Etc.