typescript 数组匹配-打字稿快速入门

TypeScript 简介

哪个是 TypeScript?

简单地说,TypeScript 基于 JavaScript,具有类型检测功能。

TypeScript 与 JavaScript 有着不寻常的关系。 TypeScript 提供了 JavaScript 的所有功能,并在此功能之上添加了一层:TypeScript 的类型系统。

例如,JavaScript 提供了字符串、数字等原始类型,但它在传递参数时不会检查你的类型是否匹配。 TypeScript 提供了这样的功能。

这意味着您现有的运行良好的 JavaScript 代码也是 TypeScript 代码。 TypeScript 的主要用处是它可以检测代码中的意外行为,从而减少出错的机会。

(摘自:)

TypeScript 安装

安装TypeScript需要使用npm命令,而npm依赖于Node.js,所以必须先安装Node.js。

Node.js 于 2009 年 5 月发布,本质上封装了 Chrome V8 引擎。 您可以从官方网站下载最新版本。

Node.js 的安装非常简单。 下载后按照向导一步一步操作,按照默认配置即可。 安装完成后,验证是否安装成功。

在命令行工具中输入“node -v”和“npm -v”,检查是否安装成功。 如果安装成功,会显示版本号。

安装好npm后,在命令行工具界面输入命令“npminstall-gtypescript”即可全局安装TypeScript,等待一段时间,安装完成后使用命令tsc -v查看其版本号,验证是否已安装安装成功。

第一行 TypeScript 代码

使用以下代码创建新的 hi.ts 文件:

function hi(msg: string) : string {
    return "hi " + msg
}

console.log(hi('days'))

使用命令 tsc*.ts 编译 TypeScript 代码,会在同一目录中生成 js 文件。

tsc hi.ts

编译 hi.js JavaScript 代码

function hi(msg{
    return "hi " + msg;
}
console.log(hi('days'));

我们可以看到,上面的TypeScript必须为变量指定msg:string类型,但是JavaScript代码的变量不需要指定类型。

这是作为静态语言的 TypeScript 和作为动态语言的 JavaScript 之间最大的区别之一:

静态语言和动态语言都有各自的优点:

能够在编译过程中检测错误并优化代码的静态语言有什么好处?

让我们看一个 JavaScript 示例:

if (1 < x < 3) {
  // x是 *任何* 值都为真!
}

为什么这个表达式总是正确的?

这是因为 JavaScript 比较运算符是从左到右组合的,所以 if(1 <x<3)实际上相当于if((1<x)<3),先比较1和x的大小,之后再比较结果和3的大小。

而(1 <x)的结果只能是true或false,它们在JavaScript中会被转换成数字1或0,所以无论x是哪些值,if(1<x<3)就会转换成if((0或则1)<3),结果永远是true。

如果要判断x是否在1到3之间,正确的写法是if(x>1&&x<3),使用逻辑与运算符&&连接两个条件。

TypeScript 可以在代码运行之前检测到这样的错误:

如果我们正在编译一个几万行代码的小项目,这种奇怪的错误如果不及时发现typescript 数组匹配,将会导致严重的后果。 所以TypeScript是为了适应小项目的开发而设计的。

TypeScript 编译和擦除类型的主要特性

TypeScript 类型仅用于在编译时进行检查,一旦 TypeScript 编译器完成对代码的检查,它就会删除类型并最终生成“已编译”的 JavaScript 代码。

类型注释不是 JavaScript(或技术术语 ECMAScript)的一部分,因此没有浏览器或运行时可以直接执行未处理的 TypeScript 代码。

这就是为什么 TypeScript 首先需要编译器,因为需要编译它来消除或转换 TypeScript 特定的代码,以便这些代码可以在浏览器上运行。

这意味着一旦编译了代码,生成的纯 JavaScript 代码就没有类型信息。

TypeScript 代码最终被编译成 JavaScript 代码来运行。

这意味着,如果您将代码从 JavaScript 迁移到 TypeScript,即使 TypeScript 认为代码存在类型错误,也保证以相同的方式运行。

保持与 JavaScript 相同的运行时行为是 TypeScript 的基本特性,您可以轻松地在两种语言之间切换,而不必担心一些细微的差异可能会导致程序抛出异常并停止工作。

类型推断

TypeScript 能够识别 JavaScript 语言,并且可以在许多情况下推断类型。

当创建变量并为其赋予特定值的参数时,TypeScript 可以感知其数据类型。 例如,lethelloWorld 参数化了一个字符串,因此 TypeScript 可以推断出变量 helloWorld 是字符串类型。

定义类型

您可以使用interface关键字显式描述对象内部数据的类型:

interface User {
  name: string;
  id: number;
}

然后你可以声明一个符合这个接口的JavaScript对象,并在变量声明后使用:TypeName这样的句型:

interface User {
  name: string;
  id: number;
}
// ---分割线---
const user: User = {
  name: "Hayes",
  id: 0,
};

如果提供的数据类型与提供的套接字不匹配,TypeScript 将发出警告:

name在socket中定义为字符串类型,在user对象中形参为1,会抛出类型不匹配警告。

typescript 数组匹配-打字稿快速入门

我们还可以使用构造函数定义一个类和套接字:

interface User {
  name: string;
  id: number;
}
 
class UserAccount {
  name: string;
  id: number;
 
  constructor(name: string, id: number) {
    this.name = name;
    this.id = id;
  }
}
 
const user: User = new UserAccount("唐三"1);

联合型

联合类型使用管道符号 (|) 来指示值可以是多种类型之一。 这在函数参数和返回值中特别有用,允许您处理不同类型的输入和输出。

例如:

type StringOrNumber = string | number;

function printValue(value: StringOrNumber{
  console.log(value);
}

printValue("hello"); // 输出 "hello"
printValue(42); // 输出 42

在此示例中,我们创建了一个名为 StringOrNumber 的联合类型,这意味着该值可以是字符串或数字类型。 我们的 printValue 函数采用 StringOrNumber 类型的参数并将其复制到控制台。

子类

TypeScript 的类库是一种编程技术,允许您在定义函数、接口和类时使用类型参数来实现类型安全的代码重用。 子类在编译时保留类型信息,这有助于捕获类型错误并提高代码的可维护性和可读性。

在 TypeScript 中,子类使用尖括号 ( ) 来表示类型参数。 例如,Array表示一个元素类型为T的链表,其中T是类型参数。

类库函数:

假设我们要创建一个函数,将链表中的所有元素包装在一个对象中,例如{value:element}。 我们可以使用类库来实现这个功能,使其适用于不同类型的字段:

function wrapInObject<T>(array: T[]{
    return array.map((element) => ({value: element}))
}

console.log(wrapInObject([1,2,3]))  // 输出[ { value: 1 }, { value: 2 }, { value: 3 } ]
console.log(wrapInObject(['a','b','c'])) // 输出[ { value: 'a' }, { value: 'b' }, { value: 'c' } ]

这里,T是一个类型变量,用于表示元素的类型。 当我们实际调用wrapInObject时,TypeScript会根据传入的链表的类型推断出T的具体类型。

类库类:

类库也可以应用于类。

例如,让我们创建一个简单的堆栈类:

class Stack {
  private items: T[] = [];

  push(item: T): void {
    this.items.push(item);
  }

  pop(): T | undefined {
    return this.items.pop();
  }
}

const numberStack = new Stack<number>();
numberStack.push(1);
numberStack.push(2);
console.log(numberStack.pop()); // 输出:2

const stringStack = new Stack<string>();
stringStack.push("a");
stringStack.push("b");
console.log(stringStack.pop()); // 输出:"b"

在这个例子中,我们定义了一个子类Stack,它包含一个类型参数T。T表示栈中元素的类型。 当我们创建Stack的实例时,我们需要为T指定一个特定的类型。

杰克

TypeScript 的接口(Interface)是一种定义对象的结构和约束的方式。 套接字可以描述对象的形状(即属性和方法)并定义类和函数的约定。 通过socket,我们可以保证代码符合预期的结构和行为,增强代码的可读性和可维护性。

插座主要有以下用途:

描述物体的形状:

套接字可用于描述对象应具有哪些属性和技能。 这使得我们在编写代码时能够得到类型检测和智能感知,从而减少了出错的可能性。

例如我们可以定义一个描述用户信息的socket:

interface User {
  id: number;
  name: string;
  age: number;
}

function printUserInfo(user: User): void {
  console.log(`ID: ${user.id}, Name: ${user.name}, Age: ${user.age}`);
}

const user: User = { id: 1, name: "Alice", age: 30 };
printUserInfo(user);

在这种情况下,用户套接字定义了用户信息应具有的属性。 printUserInfo 函数接受 User 类型的参数,因此我们可以确保传递给函数的对象具有正确的结构。

描述一下函数类型:

套接字还可以用来描述函数的类型。 这包括函数的参数类型和返回类型。

例如,我们可以定义一个套接字来比较两个值:

interface Comparator {
  (a: T, b: T): number;
}

const numberComparator: Comparator<number> = (a, b) => {
  return a - b;
};

const stringLengthComparator: Comparator<string> = (a, b) => {
  return a.length - b.length;
};

在这种情况下,比较器套接字定义了一个用于比较两个值的基本函数类型。 我们创建两个不同类型的比较器:一个用于比较数字,另一个用于比较字符串的粗细。

实现socket的类:

类可以实现套接字以确保遵守某些契约。 当一个类实现套接字时,TypeScript 会检查该类是否具有套接字所需的属性和技巧。

例如,我们可以定义一个代表几何形状的套接字和一个实现该套接字的类:

interface Shape {
  area(): number;
  perimeter(): number;
}

class Rectangle implements Shape {
  constructor(private width: numberprivate height: number) {}

  area(): number {
    return this.width * this.height;
  }

  perimeter(): number {
    return 2 * (this.width + this.height);
  }
}

const rectangle = new Rectangle(105);
console.log(rectangle.area()); // 输出:50
console.log(rectangle.perimeter()); // 输出:30

typescript 数组匹配-打字稿快速入门

在本例中,Shape 套接字定义了几何形状应具有的技能。 Rectangle 类实现 Shape 套接字,确保它具有正确的技术。

通过使用套接字,我们可以确保对象、函数和类具有预期的结构和行为。

运行.ts文件的方式方法一:先将.ts文件编译成.js,然后运行.js文件

安装打字稿

npm install -g typescript // 如果已经安装过请忽略这步

将.ts文件编译成.js文件,例如文件名为test.ts

tsc test.ts // 会在当前目录下生成对应的 test.js 文件

运行 .js 文件

node test.js

技巧2:通过ts-node直接运行.ts文件

安装打字稿、ts-node

npm install -g typescript ts-node

直接运行.ts文件

ts-node test.ts

方法三:在线运行

在浏览器中打开: 可以在线运行:

总结

TypeScript 是 JavaScript 的超集typescript 数组匹配,它引入了一些基于 JavaScript 的附加功能,以帮助开发人员编写更健壮且可维护的代码。 以下是 TypeScript 的一些主要功能:

事实上,TypeScript 的功能包括静态类型检查、类型推断、泛型、接口、面向对象编程支持、装饰器以及丰富的工具和生态系统支持。 这一特性使 TypeScript 成为开发小型、可维护的 JavaScript 项目的理想选择。

参考:

收藏 (0) 打赏

感谢您的支持,我会继续努力的!

打开微信/支付宝扫一扫,即可进行扫码打赏哦,分享从这里开始,精彩与您同在
点赞 (0)

悟空资源网 typescript typescript 数组匹配-打字稿快速入门 https://www.wkzy.net/game/180159.html

常见问题

相关文章

官方客服团队

为您解决烦忧 - 24小时在线 专业服务