dreaife的休憩小栈

1. Basic Types#

TypeScript supports the following common primitive types:

• number: numeric type, including integers and floating-point numbers.

  1
  let age: number = 30

• string: string type, used to store text.

  1
  let name: string = "Alice";

• boolean: boolean type, values are true or false.

  1
  let isActive: boolean = true;

• array: array type, can specify the element type.

  1
  let numbers: number[] = [1, 2, 3];

• tuple: tuple type, for fixed-length arrays with specified types.

  1
  let user: [string, number] = ["Alice", 30]

• enum: enumeration type, defines a set of named constants.

  1
  enum Color { Red, Green, Blue }
  2
  let color: Color = Color.Green;

• any: any type, suitable for variables of uncertain type, but not recommended to use frequently.

  1
  let randomValue: any = "hello";
  2
  randomValue = 5;  // can be reassigned to other types

• void: no return value, typically used for functions that do not return a value.

  1
  function logMessage(): void {
  2
    console.log("This is a message");
  3
  }

• null and undefined: represent empty or undefined variables.

  1
  let u: undefined = undefined;
  2
  let n: null = null;

2. Type Annotations#

You can add type annotations to variables, parameters, and return values to aid code completion and error checking.

1
let name: string = "Alice";
2
function greet(name: string): string {
3
  return `Hello, ${name}`;
4
}

3. Interfaces#

Interfaces are used to define the structure of objects (i.e., which properties and methods they have), helping to achieve code reuse and flexibility.

1
interface Person {
2
  name: string;
3
  age: number;
4
  greet(): string;
5
}
6

7
let alice: Person = {
8
  name: "Alice",
9
  age: 30,
10
  greet() {
11
    return `Hello, my name is ${this.name}`;
12
  }
13
};

4. Classes#

TypeScript supports object-oriented programming, allowing the use of classes and inheritance. Classes include constructors, properties, and methods.

1
class Animal {
2
  name: string;
3

4
  constructor(name: string) {
5
    this.name = name;
6
  }
7

8
  move(distance: number = 0) {
9
    console.log(`${this.name} moved ${distance} meters.`);
10
  }
11
}
12

13
let dog = new Animal("Dog");
14
dog.move(10);

• Access Modifiers

TypeScript provides three access modifiers to control the accessibility of class members:

• public: public, the default modifier; accessible anywhere.
• private: private; only accessible within the class.
• protected: protected; accessible within the class and in subclasses.

1
class Person {
2
  public name: string;
3
  private age: number;
4
  protected address: string;
5

6
  constructor(name: string, age: number, address: string) {
7
    this.name = name;
8
    this.age = age;
9
    this.address = address;
10
  }
11
}

5. Generics#

Generics allow defining functions, classes, or interfaces without specifying a type, and specify the type at use time. This increases code reuse.

1
function identity<T>(arg: T): T {
2
  return arg;
3
}
4

5
let output = identity<string>("Hello");  // T inferred as string

6. Type Inference#

TypeScript automatically infers the type of variables from the code; if no explicit type is declared, TypeScript infers it from the assigned value.

1
let x = 10; // TypeScript automatically infers x as number

7. Union Types#

Union types allow a variable to hold multiple types of values, defined using the | symbol.

1
let value: string | number;
2
value = "Hello";
3
value = 42;

8. Type Aliases#

Use the type keyword to define type aliases for reuse.

1
type ID = string | number;
2
let userId: ID = "123";

9. Type Assertions#

Type assertions tell the compiler the specific type of a value, useful when we know more about the variable than TypeScript does.

1
let someValue: any = "This is a string";
2
let strLength: number = (someValue as string).length;

10. Decorators#

Decorators are an advanced feature in TypeScript that allow attaching metadata to classes, methods, or properties. Decorators are heavily used in Angular to define components, modules, etc.

1
function log(target: any, key: string) {
2
  console.log(`${key} was called`);
3
}
4

5
class Person {
6
  @log
7
  greet() {
8
    console.log("Hello!");
9
  }
10
}

11. Modules and Namespaces#

• Modules: TypeScript supports the ES6 module system; modules can be imported and exported using import and export.

1
export const pi = 3.14;
2

3
// main.ts
4
import { pi } from './module';
5
console.log(pi);

• Namespaces: TypeScript provides namespaces to organize code, suitable for large applications.

1
namespace Geometry {
2
  export function calculateArea(radius: number): number {
3
    return Math.PI * radius * radius;
4
  }
5
}
6

7
console.log(Geometry.calculateArea(5));