searchusermenu
  • 发布文章
  • 消息中心
点赞
收藏
评论
分享
原创

了解 TypeScript 的基本语法和类型系统

2023-04-25 08:05:03
8
0

一、基本类型

TypeScript 基于静态类型,这意味着变量的类型必须在编写代码时进行定义。TypeScript 提供了许多类型以帮助程序员检查代码中的错误并增强代码的可读性和可维护性。现在我们将介绍 TypeScript 中的一些基本类型。

any 类型

任何类型都可以分配给 any 类型。这意味着编译器不对变量执行类型检查,使开发人员可以在代码中灵活使用任何类型。

typescript
let x: any;
x = 42; // OK
x = "Hello"; // OK

在上面的示例中,我们定义了一个名为 `x` 的变量,并将其类型设置为 `any`。然后我们为 `x` 分配了整数值 `42` 和字符串值 `"Hello"`。

number 类型

number 是 TypeScript 中表示数字的内置类型。它支持整数、浮点数和 NaN(非数字)等值。

typescript
let x: number = 42;
let y: number = NaN;

在上面的示例中,我们定义了两个名为 `x` 和 `y` 的变量,并将它们的类型设置为 `number`。然后我们使用整数值 `42` 初始化了 `x` 并使用 NaN 值初始化了 `y`。

string 类型

string 是 TypeScript 中表示字符串的内置类型。它支持引号包含的任何文本值。

typescript
let x: string = "Hello";
let y: string = 'World';

在上面的示例中,我们定义了两个名为 `x` 和 `y` 的变量,并将它们的类型设置为 `string`。然后我们分别使用双引号和单引号创建了两个字符串值。

boolean 类型

boolean 是 TypeScript 中表示布尔值的内置类型。它支持 true 和 false 两个值。

typescript
let x: boolean = true;
let y: boolean = false;

在上面的示例中,我们定义了两个名为 `x` 和 `y` 的变量,并将它们的类型设置为 `boolean`。然后我们分别将它们初始化为 true 和 false。

null 和 undefined 类型

null 和 undefined 是 TypeScript 中表示空值的内置类型。它们是与其它类型不兼容的单独类型。

typescript
let x: null = null;
let y: undefined = undefined;

在上面的示例中,我们定义了两个名为 `x` 和 `y` 的变量,并将它们的类型分别设置为 `null` 和 `undefined`。

### void 类型

void 是 TypeScript 中表示没有返回值的函数的内置类型,或者表示变量没有赋值的类型。

typescript
function log(message: string): void {
  console.log(message);
}

let x: void = undefined;

在上面的示例中,我们定义了一个名为 `log` 的函数,它不返回任何值,并将变量 `x` 的类型设置为 `void` 并将其初始化为 `undefined`。

二、特色类型

在 TypeScript 中,我们可以使用大部分 JavaScript 语法和功能。TypeScript 还为我们提供了一些额外的功能,在这里介绍一些常见的语法。

TypeScript 提供了一种用于定义类和对象的语法。TypeScript 中的类包括属性、方法、构造函数和声明。定义一个类可以使用 `class` 关键字。

typescript
class Person {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  greet() {
    console.log(`Hi, my name is ${this.name}, and I am ${this.age} years old.`);
  }
}

let person = new Person("Alice", 24);
person.greet(); // Hi, my name is Alice, and I am 24 years old.

在上面的示例中,我们定义了一个 `Person` 类,它具有名称和年龄属性,以及一个 `greet` 方法。类的构造函数 `constructor` 接受两个参数,并将它们分别分配给 `name` 和 `age` 属性。我们还创建了一个 `Person` 对象 `person` 并调用它的 `greet` 方法来输出一条消息。

接口

接口是 TypeScript 中的一种类型定义,用于描述对象的形状和约束。接口可以定义属性、方法、可选属性、只读属性等。

typescript
interface IPerson {
  name: string;
  age: number;
  greet(): void;
}

class Person implements IPerson {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  greet() {
    console.log(`Hi, my name is ${this.name}, and I am ${this.age} years old.`);
  }
}

let person: IPerson = new Person("Alice", 24);
person.greet(); // Hi, my name is Alice, and I am 24 years old.

在上面的示例中,我们定义了一个 `IPerson` 接口,它包含 `name`、`age` 和 `greet` 属性。然后我们定义了一个 `Person` 类,并让它实现这个接口。最后我们使用这个接口类型来声明一个 `Person` 对象 `person`。

枚举

枚举是一种用于定义命名常量的语法。在 TypeScript 中,可以使用 `enum` 关键字来定义一个枚举类型。

typescript
enum Direction {
  Up,
  Down,
  Left,
  Right
}

let direction: Direction = Direction.Up;
console.log(direction); // 0

在上面的示例中,我们定义了一个名为 `Direction` 的枚举类型,并添加了 `Up`、`Down`、`Left` 和 `Right` 四个成员。然后我们创建了一个名为 `direction` 的变量,并将它的值设置为 `Direction.Up`,这个值是整数 `0`。因为枚举默认是从 `0` 开始计数并增加,所以 `Up` 的值是 `0`。

泛型

泛型是一种用于创建可重用代码的语法。在 TypeScript 中,可以使用 `<T>` 语法来定义一个泛型类型。

typescript
function identity<T>(arg: T): T {
  return arg;
}

let output1 = identity<string>("Hello");
let output2 = identity<number>(42);

在上面的示例中,我们定义了一个名为 `identity` 的函数,并使用 `<T>` 语法定义了一个泛型类型。函数接受一个类型为 `T` 的参数,并返回一个类型为 `T` 的值。然后我们创建了两个变量 `output1` 和 `output2` 分别传入一个字符串和一个数字类型的值,并使用相应的泛型类型来明确类型。

类型别名

类型别名是一种用于为类型声明更有意义的名称的语法。在 TypeScript 中,可以使用 `type` 关键字来定义一个类型别名。

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

在上面的示例中,我们定义了一个名为 `Point` 的类型别名,并将它定义为一个具有两个属性 `x` 和 `y` 的对象类型。通过定义类型别名,我们可以在代码中更容易和清晰地使用这个类型。

 

结论

在本文中,我们学习了 TypeScript 的基本语法和类型系统。了解这些内容将帮助我们编写更好的代码、增强代码的可读性和可维护性,以及避免错误并提高代码的稳定性。

0条评论
0 / 1000
yesplease
26文章数
1粉丝数
yesplease
26 文章 | 1 粉丝
原创

了解 TypeScript 的基本语法和类型系统

2023-04-25 08:05:03
8
0

一、基本类型

TypeScript 基于静态类型,这意味着变量的类型必须在编写代码时进行定义。TypeScript 提供了许多类型以帮助程序员检查代码中的错误并增强代码的可读性和可维护性。现在我们将介绍 TypeScript 中的一些基本类型。

any 类型

任何类型都可以分配给 any 类型。这意味着编译器不对变量执行类型检查,使开发人员可以在代码中灵活使用任何类型。

typescript
let x: any;
x = 42; // OK
x = "Hello"; // OK

在上面的示例中,我们定义了一个名为 `x` 的变量,并将其类型设置为 `any`。然后我们为 `x` 分配了整数值 `42` 和字符串值 `"Hello"`。

number 类型

number 是 TypeScript 中表示数字的内置类型。它支持整数、浮点数和 NaN(非数字)等值。

typescript
let x: number = 42;
let y: number = NaN;

在上面的示例中,我们定义了两个名为 `x` 和 `y` 的变量,并将它们的类型设置为 `number`。然后我们使用整数值 `42` 初始化了 `x` 并使用 NaN 值初始化了 `y`。

string 类型

string 是 TypeScript 中表示字符串的内置类型。它支持引号包含的任何文本值。

typescript
let x: string = "Hello";
let y: string = 'World';

在上面的示例中,我们定义了两个名为 `x` 和 `y` 的变量,并将它们的类型设置为 `string`。然后我们分别使用双引号和单引号创建了两个字符串值。

boolean 类型

boolean 是 TypeScript 中表示布尔值的内置类型。它支持 true 和 false 两个值。

typescript
let x: boolean = true;
let y: boolean = false;

在上面的示例中,我们定义了两个名为 `x` 和 `y` 的变量,并将它们的类型设置为 `boolean`。然后我们分别将它们初始化为 true 和 false。

null 和 undefined 类型

null 和 undefined 是 TypeScript 中表示空值的内置类型。它们是与其它类型不兼容的单独类型。

typescript
let x: null = null;
let y: undefined = undefined;

在上面的示例中,我们定义了两个名为 `x` 和 `y` 的变量,并将它们的类型分别设置为 `null` 和 `undefined`。

### void 类型

void 是 TypeScript 中表示没有返回值的函数的内置类型,或者表示变量没有赋值的类型。

typescript
function log(message: string): void {
  console.log(message);
}

let x: void = undefined;

在上面的示例中,我们定义了一个名为 `log` 的函数,它不返回任何值,并将变量 `x` 的类型设置为 `void` 并将其初始化为 `undefined`。

二、特色类型

在 TypeScript 中,我们可以使用大部分 JavaScript 语法和功能。TypeScript 还为我们提供了一些额外的功能,在这里介绍一些常见的语法。

TypeScript 提供了一种用于定义类和对象的语法。TypeScript 中的类包括属性、方法、构造函数和声明。定义一个类可以使用 `class` 关键字。

typescript
class Person {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  greet() {
    console.log(`Hi, my name is ${this.name}, and I am ${this.age} years old.`);
  }
}

let person = new Person("Alice", 24);
person.greet(); // Hi, my name is Alice, and I am 24 years old.

在上面的示例中,我们定义了一个 `Person` 类,它具有名称和年龄属性,以及一个 `greet` 方法。类的构造函数 `constructor` 接受两个参数,并将它们分别分配给 `name` 和 `age` 属性。我们还创建了一个 `Person` 对象 `person` 并调用它的 `greet` 方法来输出一条消息。

接口

接口是 TypeScript 中的一种类型定义,用于描述对象的形状和约束。接口可以定义属性、方法、可选属性、只读属性等。

typescript
interface IPerson {
  name: string;
  age: number;
  greet(): void;
}

class Person implements IPerson {
  name: string;
  age: number;
  constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  greet() {
    console.log(`Hi, my name is ${this.name}, and I am ${this.age} years old.`);
  }
}

let person: IPerson = new Person("Alice", 24);
person.greet(); // Hi, my name is Alice, and I am 24 years old.

在上面的示例中,我们定义了一个 `IPerson` 接口,它包含 `name`、`age` 和 `greet` 属性。然后我们定义了一个 `Person` 类,并让它实现这个接口。最后我们使用这个接口类型来声明一个 `Person` 对象 `person`。

枚举

枚举是一种用于定义命名常量的语法。在 TypeScript 中,可以使用 `enum` 关键字来定义一个枚举类型。

typescript
enum Direction {
  Up,
  Down,
  Left,
  Right
}

let direction: Direction = Direction.Up;
console.log(direction); // 0

在上面的示例中,我们定义了一个名为 `Direction` 的枚举类型,并添加了 `Up`、`Down`、`Left` 和 `Right` 四个成员。然后我们创建了一个名为 `direction` 的变量,并将它的值设置为 `Direction.Up`,这个值是整数 `0`。因为枚举默认是从 `0` 开始计数并增加,所以 `Up` 的值是 `0`。

泛型

泛型是一种用于创建可重用代码的语法。在 TypeScript 中,可以使用 `<T>` 语法来定义一个泛型类型。

typescript
function identity<T>(arg: T): T {
  return arg;
}

let output1 = identity<string>("Hello");
let output2 = identity<number>(42);

在上面的示例中,我们定义了一个名为 `identity` 的函数,并使用 `<T>` 语法定义了一个泛型类型。函数接受一个类型为 `T` 的参数,并返回一个类型为 `T` 的值。然后我们创建了两个变量 `output1` 和 `output2` 分别传入一个字符串和一个数字类型的值,并使用相应的泛型类型来明确类型。

类型别名

类型别名是一种用于为类型声明更有意义的名称的语法。在 TypeScript 中,可以使用 `type` 关键字来定义一个类型别名。

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

在上面的示例中,我们定义了一个名为 `Point` 的类型别名,并将它定义为一个具有两个属性 `x` 和 `y` 的对象类型。通过定义类型别名,我们可以在代码中更容易和清晰地使用这个类型。

 

结论

在本文中,我们学习了 TypeScript 的基本语法和类型系统。了解这些内容将帮助我们编写更好的代码、增强代码的可读性和可维护性,以及避免错误并提高代码的稳定性。

文章来自个人专栏
typescript
4 文章 | 2 订阅
0条评论
0 / 1000
请输入你的评论
0
0