Typescript的基础类型及进阶教程

Typescript的基础类型及进阶教程

Typescript基础类型

在Typescript中，有几种常见的基础类型，包括：

1. number：表示数字类型，可以是整数或浮点数。

let age: number = 25; 
let height: number = 1.75;

2. string：表示字符串类型，可以包含文本和字符。

let name: string = "Alice";
let message: string = "Hello, TypeScript!";

3. boolean：表示布尔类型，只能为true或false。

let isDone: boolean = false; 
let hasError: boolean = true;

4. array：表示数组类型，可以存储多个相同类型的值。

let numbers: number[] = [1, 2, 3, 4, 5]; 
let names: string[] = ["Alice", "Bob", "Charlie"];

在这个例子中，我们声明了一个numbers数组，它的元素类型是number，并赋予了一些数字。同样，我们声明了一个names数组，元素类型为string，并赋予了一些字符串。

5. tuple：表示元组类型，是一个固定长度和类型顺序的数组。

let person: [string, number] = ["Alice", 25];

在这个例子中，我们定义了一个person元组，它包含一个string类型的姓名和一个number类型的年龄。

6. enum：表示枚举类型，用于定义一组具名的常量。

enum Color {
  Red,
  Green,
  Blue
}

let favoriteColor: Color = Color.Blue;

在这个例子中，我们定义了一个Color枚举，它包含Red、Green和Blue三个值。我们将color变量赋值为Color.Red，它实际上是枚举中的第一个值，对应的数值是0。

7. any：表示任意类型，可以赋予任何值，与普通的JavaScript类型兼容。

let value: any = "Hello"; 
value = 42; 
value = true;

8. void：表示空类型，常用于函数没有返回值的情况。

function sayHello(): void {
  console.log("Hello!");
}

sayHello(); // 输出：Hello!

在这个例子中，我们定义了一个sayHello函数，它没有返回值（即void类型）。函数内部只是简单地打印一条问候语。我们调用这个函数，它会输出"Hello!"。

9. null和undefined：表示空值和未定义值。

let myVariable: null = null;
let myVariable2: undefined = undefined;

在这个例子中，我们声明了一个value1变量，它的类型是null，并将其赋值为null。同样，我们声明了一个value2变量，类型为undefined，并将其赋值为undefined。

10. object：表示非原始类型，即除了number、string、boolean、symbol、null和undefined之外的类型。

let person: object = { name: "Alice", age: 25 };

11. unknown：表示未知类型，类似于any类型，但更加安全。在使用unknown类型的变量时，需要进行类型检查或类型断言。

let value: unknown = "Hello";
if (typeof value === "string") {
  console.log(value.toUpperCase());
}

12. never：表示永远不会发生的类型，常用于表示抛出异常或无法正常返回的函数。

function throwError(): never {
  throw new Error("Something went wrong");
}

function infiniteLoop(): never {
  while (true) {
    // 无限循环
  }
}

 在这个例子中，throwError函数会抛出一个异常，所以它的返回类型是never。而infiniteLoop函数则是一个无限循环，它永远不会结束，因此也返回never类型。

13. symbol：表示唯一的标识符，通常用作对象属性的键。

let id: symbol = Symbol("id");
let obj = {
  [id]: "12345"
};
console.log(obj[id]);  // 输出：12345

14. bigint：表示任意精度的整数，可以处理超出number类型表示范围的整数。

let bigNumber: bigint = 9007199254740991n;

以上是Typescript中的一些基础类型。使用这些类型可以为变量、函数参数和函数返回值等提供明确的类型注解，使代码更加可读和可维护。
 

Typescript类型推断

类型推断： Typescript还支持根据变量的初始值自动推断类型，即类型推断。当我们没有显式指定变量的类型时，Typescript会根据赋值的表达式推断出变量的类型。

let number = 42; // number的类型被推断为number 
let message = "Hello"; // message的类型被推断为string

这样，我们可以更简洁地声明变量，而无需显式指定类型。

Typescript类型断言

类型断言： 有时候我们可能需要告诉Typescript一个变量的具体类型，即进行类型断言。通过类型断言，我们可以绕过类型检查器，将一个变量指定为特定类型。

let value: any = "Hello, TypeScript!";
let length: number = (value as string).length;

console.log(length); // 输出：18

在这个例子中，我们将value变量声明为any类型，但是我们知道它实际上是一个字符串。通过类型断言(value as string)，我们告诉Typescript将value视为字符串类型，然后获取其长度。

Typescript字面量类型

字面量类型： Typescript还支持字面量类型，即限制变量只能取特定的字面量值。 

let direction: "left" | "right" | "up" | "down";
direction = "up";  // 合法
direction = "center";  // 非法，只能取限定的字面量值

在这个例子中，我们使用联合类型和字面量类型定义了一个变量direction，它只能取"left"、"right"、"up"或"down"这几个字面量值之一。

Typescript类型别名

类型别名： Typescript允许我们为类型定义别名，以便在复杂的类型或重复使用的类型上提高可读性。

type Point = {
  x: number;
  y: number;
};

let p: Point = {
  x: 10,
  y: 20
};

在这个例子中，我们使用type关键字创建了一个类型别名Point，它表示一个具有x和y属性的点。然后我们使用Point类型别名声明了变量p。

Readonly修饰符

readonly修饰符： Typescript提供了readonly修饰符，用于将属性设置为只读，即只能在初始化时进行赋值，后续无法修改。

type Person = {
  readonly name: string;
  age: number;
};

let p: Person = {
  name: "Alice",
  age: 25
};

p.age = 30;  // 合法
p.name = "Bob";  // 非法，name是只读属性

在这个例子中，我们定义了一个Person类型，其中name属性被标记为只读。当我们创建一个Person对象后，name属性的值不能再进行修改。

进阶知识

1. 类型推断： Typescript具有类型推断的能力，它可以根据变量的赋值推断出变量的类型。

let name = "Alice"; // 类型推断为string
let age = 25; // 类型推断为number

console.log(name); // 输出：Alice
console.log(age); // 输出：25

在这个例子中，我们声明了name和age变量，并分别赋予了字符串和数字。Typescript根据赋值的类型推断出了变量的类型。

2.  类型守卫： 类型守卫是一种在代码中进行类型检查的方式，它可以帮助我们缩小变量的类型范围。

function printLength(value: string | number) {
  if (typeof value === "string") {
    console.log(value.length); // value被推断为string类型
  } else {
    console.log(value.toFixed(2)); // value被推断为number类型
  }
}

printLength("Hello"); // 输出：5
printLength(3.14159); // 输出：3.14

在这个例子中，printLength函数接受一个string或number类型的参数value。通过使用typeof关键字进行类型检查，我们可以在代码块中针对不同的类型执行不同的逻辑。

3. 字面量类型： 字面量类型允许我们指定变量只能取特定的值。

let direction: "up" | "down" | "left" | "right" = "up";

function move(dir: "up" | "down" | "left" | "right") {
  // 执行移动逻辑
}

move("left"); // 调用move函数，并传入参数"left"

在这个例子中，我们声明了一个direction变量，它只能取"up"、"down"、"left"或"right"这几个字面量值中的一个。我们还定义了一个move函数，它的参数dir也只能是这几个字面量值之一。 

4. 函数类型： Typescript可以定义函数的参数类型和返回值类型。

function add(x: number, y: number): number {
  return x + y;
}

let result: number = add(5, 3);
console.log(result); // 输出：8

在这个例子中，我们定义了一个函数add，它接受两个参数x和y，它们的类型都是number，并且返回值也是number类型。我们调用add函数并将结果赋值给result变量，然后打印出结果。

5. 可选参数和默认参数： 函数的参数可以标记为可选或设置默认值。

function greet(name: string, greeting?: string): string {
  if (greeting) {
    return `${greeting}, ${name}!`;
  } else {
    return `Hello, ${name}!`;
  }
}

console.log(greet("Alice")); // 输出：Hello, Alice!
console.log(greet("Bob", "Hi")); // 输出：Hi, Bob!

在这个例子中，我们定义了一个函数greet，它接受一个必需的参数name和一个可选的参数greeting。如果提供了greeting参数，函数将使用它作为问候语，否则将使用默认的问候语。我们可以根据需要调用greet函数。

6. 剩余参数： Typescript支持剩余参数（rest parameters），允许我们将多个参数收集到一个数组中。

function sum(...numbers: number[]): number {
  let total = 0;
  for (let num of numbers) {
    total += num;
  }
  return total;
}

console.log(sum(1, 2, 3, 4)); // 输出：10
console.log(sum(5, 6)); // 输出：11

 在这个例子中，我们定义了一个函数sum，使用剩余参数...numbers将传入的所有参数收集到一个名为numbers的数组中。然后，我们遍历这个数组并求和返回结果。

这些是Typescript基础类型的一些进一步讲解和相关特性。通过掌握这些基础类型，你可以更好地理解和应用Typescript语言的特性。

Typescript系列教程

Typescript的基础类型及进阶教程

Typescript的变量声明及使用示例

Typescript的Interface的相关使用示例和进阶知识

Typescript关于联合类型的使用方式和示例教程

Typescript的交叉类型的具体使用方式和示例教程