TypescriptSummary

最新推荐文章于 2024-07-19 20:47:39 发布

Kmugi

最新推荐文章于 2024-07-19 20:47:39 发布

阅读量53

点赞数

文章标签： javascript 前端 typescript

本文链接：https://blog.csdn.net/m0_74112520/article/details/131370655

版权

typescript初步学习总结

章节目录

1.简介

2.配置typescript

3.let和const

4.解构

5.函数

6.类

7.模块

1.简介

TypeScript 是一种由 Microsoft 开发和维护的编程语言，它是 JavaScript 的一个超集，包含了 JavaScript 所有的语法和特性，并且添加了一些新的语法和特性。TypeScript 可以在编写代码时提供更好的类型检查和编程支持，在代码执行前发现和解决常见的 JavaScript 错误，提高了代码的可靠性和健壮性。

以下是 TypeScript 的一些主要特性：

类型检查：TypeScript 具有强大的类型系统，开发人员可以在编写代码时指定变量和函数的类型，这可以在编译时检查代码的类型错误，提供更好的代码质量和可维护性。
面向对象编程：TypeScript 支持面向对象编程（OOP），包括类、接口、继承、抽象类和多态等特性，可以让开发人员编写更清晰、更易理解的代码，并在团队合作时提供更好的管理和维护。
ES6+ 特性：TypeScript 包含了所有 ES6+ 的语法和特性，包括箭头函数、解构赋值、可选链、async/await 等，可以方便开发人员在项目中使用最新的 JavaScript 特性。
工具支持：TypeScript 集成了大量的开发工具和插件，例如 Visual Studio Code 和 WebStorm 等IDE，可以提供更好的开发体验和代码编写效率。

2.typescript配置

1.首先确保我们的电脑安装Node.js，如果没有安装，请参照一下链接安装node.js

node.js安装教程

2.安装 TypeScript：

2.1 使用 npm 安装

使用 npm 全局安装 TypeScript：

npm install -g typescript

2.2 使用 Visual Studio Code 安装

在 Visual Studio Code 中打开新的终端（Terminal），然后执行以下命令：

npm install -D typescript

这将会安装 TypeScript 到你的项目中。

在 Visual Studio Code 中使用 TypeScript：

创建一个 TypeScript 文件

在 Visual Studio Code 中，选择创建一个新的文件，使用 .ts 扩展名的文件名，如 main.ts。

编写 TypeScript 代码

在 main.ts 文件中，编写你的 TypeScript 代码。例如，下方代码定义一个简单的 Person 接口，并声明了一个变量 person，该变量的类型是 Person。

interface Person {
  name: string;
  age: number;
}

const person: Person = {
  name: 'John',
  age: 25,
};

console.log(person.name, person.age);

编译 TypeScript 代码

在终端（Terminal）中输入以下命令编译 TypeScript 代码：

tsc main.ts

这将会在当前目录下编译一份 JavaScript 文件（main.js），该文件可以被 Node.js 等 JavaScript 运行时环境执行。

在 Visual Studio Code 中查看编译后的代码

打开 main.js 文件，可以看到编译后的 JavaScript 代码，它会和 TypeScript 代码的相同功能一样工作。

3.let和const

TypeScript 中的 let 和 const 与 JavaScript 中的 let 和 const 的行为相同，但是将类型注释与类型推断引入到了其声明中，从而增强了类型安全性。

以下是 TypeScript 中使用 let 和 const 的示例代码:

let x: number = 1;
x = 2;
console.log(x); // 输出 2

const y: number = 1;
y = 2; // 抛出语法错误 TypeError
console.log(y);

在上面的代码示例中，我们使用类型注释 : number 来指定 x 和 y 的类型为 number。由于 const 声明的变量是只读的，所以当我们尝试将 y 重新赋值为 2 时，TypeScript 会抛出一个语法错误。

需要注意的是，如果我们没有为变量显式指定类型，TypeScript 会根据变量的初始值推断变量的类型，例如：

let z = 'Hello TypeScript';
console.log(z);

// 推断变量 z 的类型为字符串
z = 123; // 抛出类型错误 TypeError

在上面的代码示例中，我们没有为变量 z 显式声明类型，但因为变量的初始值为字符串，TypeScript 推断变量类型为字符串。当我们尝试将 z 重新赋值为数字 123 时，TypeScript 会抛出类型错误。

4.解构

TypeScript 中的解构语法与 JavaScript 中的解构语法相同，可以用于从对象或数组中提取值，并将它们赋给单独的变量。这是一种方便的方式来访问和处理对象和数组中的数据。

以下是 TypeScript 中使用解构的示例代码：

// 解构一个对象
const person = { name: 'Alice', age: 30 };
const { name, age } = person;
console.log(name); // 输出 'Alice'
console.log(age); // 输出 30

// 解构一个数组
const numbers = [1, 2, 3];
const [x, y, z] = numbers;
console.log(x); // 输出 1
console.log(y); // 输出 2
console.log(z); // 输出 3

需要注意的是，如果我们尝试解构不存在的属性或元素，TypeScript 会抛出一个类型错误。

例如，在下面的示例中，我们尝试从 person 对象中解构一个不存在的属性 email：

const person = { name: 'Alice', age: 30 };
const { name, email } = person; // 抛出类型错误 TypeError
console.log(name);
console.log(email);

在这种情况下，TypeScript 将抛出一个类型错误，告诉我们 email 属性在 person 对象中并不存在。如果我们需要解构一个可能不存在的属性，可以使用可选链 (Optional Chaining) 或者默认值 (Default Values)。

例如，在下面的示例中，我们使用可选链来访问 person 对象可能不存在的属性 email：

const person = { name: 'Alice', age: 30 };
const { name, email } = person?.contact ?? { contact: { email: '' }};
console.log(name);
console.log(email);

在这种情况下，我们使用了可选链运算符 ?. 来访问 person.contact.email 属性，如果 person 对象没有 contact 属性，则返回 undefined 而不会抛出错误。我们也使用了空值合并运算符 ?? 来提供一个默认值 { contact: { email: '' } }，以确保 email 变量始终有一个非空值。

5.函数

TypeScript 中的函数与 JavaScript 中的函数类似，但 TypeScript 提供了更强大的类型系统，使得我们可以在函数中使用类型注释和类型推断。

以下是 TypeScript 中声明函数的几种方式：

声明使用类型注释

function add(a: number, b: number): number {
  return a + b;
}

在上面的示例中，我们使用类型注释为 a 和 b 指定了 number 类型，也为函数返回值指定了 number 类型。

函数表达式使用类型注释

const add = function(a: number, b: number): number {
  return a + b;
}

在上面的示例中，我们使用 const 关键字和函数表达式来声明一个函数，并使用类型注释为函数参数和返回值指定类型。

使用类型推断

const add = (a: number, b: number) => {
  return a + b;
}

在上面的示例中，我们使用箭头函数声明函数，并使用类型推断为 a 和 b 指定了 number 类型，并根据函数体自动推断了返回值的类型。

需要注意的是，在 TypeScript 中，函数的参数类型和返回类型都可以是可选的，例如：

function greet(name?: string): string {
  return name ? `Hello, ${name}!` : 'Hello, World!';
}

在上面的示例中，函数的参数 name 被标记为可选参数，如果调用函数时省略了参数，则默认为 undefined。在函数体中，我们使用了条件语句来判断是否存在 name 参数，并返回相应的问候语。

6.类

TypeScript 是一种强类型语言，它提供了对面向对象编程的支持，包括类、继承、接口和访问修饰符等概念。

以下是 TypeScript 的类的示例代码：

class Animal {
  // 实例变量及其可访问性
  protected name: string;
  public age: number;
  private gender: string;

  // 构造函数
  constructor(name: string, age: number, gender: string) {
    this.name = name;
    this.age = age;
    this.gender = gender;
  }

  // 实例方法
  public sayHello() {
    console.log(`Hello, I'm ${this.name}`);
  }

  // Getter 和 Setter 方法
  get gender() {
    return this._gender;
  }

  set gender(value: string) {
    if (value === 'male' || value === 'female') {
      this._gender = value;
    } else {
      throw new Error('Invalid value for gender');
    }
  }
}

// 继承自 Animal 类
class Dog extends Animal {
  // 调用父类构造函数
  constructor(name: string, age: number, gender: string) {
    super(name, age, gender);
  }

  // 重写父类方法
  public sayHello() {
    console.log(`Woof, I'm ${this.name}`);
  }

  // 新的实例方法
  public bark() {
    console.log('Woof, Woof!');
  }
}

// 创建实例并调用方法和属性
const tommy = new Dog('Tommy', 2, 'male');
tommy.sayHello(); // 输出 'Woof, I'm Tommy'
tommy.bark(); // 输出 'Woof, Woof!'
console.log(tommy.age); // 输出 2
console.log(tommy.gender); // 抛出语法错误，因为 gender 是私有变量

在上面的代码中，我们创建了一个名为 Animal 的类，并将其子类 Dog 继承。在父类中，我们定义了一个构造函数来初始化实例变量，并定义了实例方法和访问器方法（Getter 和 Setter）。在子类中，我们重写了父类中的 sayHello() 方法，并添加了一个新的 bark() 方法。

我们还向 name 和 age 实例变量添加了 protected 和 public 访问修饰符，使得它们可以被子类继承和外部访问，而 gender 实例变量则被标记为 private，只能在类内部访问。

需要注意的是，我们可以使用 namespace 和 module 来组织和管理 TypeScript 中的类和其它对象。

7.模块

TypeScript 模块是一种可以把代码组织成可重用、可组合、有作用域的单元的方法。模块可以在其它模块中引用，也可以从其它模块导出代码。

以下是 TypeScript 中模块的示例代码：

// myModule.ts
export const greeting = 'Hello, World!';

export function sayHello(name: string) {
  console.log(`Hello, ${name}!`);
}

在上面的 myModule.ts 文件中，我们定义了一个 greeting 常量和一个 sayHello() 函数，并使用 export 关键字将它们导出供其它模块使用。

在另一个模块中，我们可以使用 import 关键字来导入这个模块中的内容：

// main.ts
import { greeting, sayHello } from './myModule'

console.log(greeting); // 输出 'Hello, World!'
sayHello('Alice'); // 输出 'Hello, Alice!'

在上面的 main.ts 文件中，我们使用 import 关键字来导入 myModule.ts 文件中导出的 greeting 常量和 sayHello() 函数，然后我们可以在这个模块中使用这些导入的项。

需要注意的是，TypeScript 支持更多的导入和导出方式，例如 default 导出和命名空间导出等。此外，在使用模块时，我们还需要注意模块的路径和 TypeScript 如何解析模块路径。

以上是我初步学习typescript有个前端的一部分总结。

Kmugi

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
TypescriptSummary

TypeScript 是一种由 Microsoft 开发和维护的编程语言，它是 JavaScript 的一个超集，包含了 JavaScript 所有的语法和特性，并且添加了一些新的语法和特性。TypeScript 可以在编写代码时提供更好的类型检查和编程支持，在代码执行前发现和解决常见的 JavaScript 错误，提高了代码的可靠性和健壮性。
复制链接

扫一扫