首页 > 其他分享 >【前端】Typescript从入门到进阶

【前端】Typescript从入门到进阶

时间:2024-11-11 19:43:59浏览次数:3  
标签:Typescript 进阶 入门 number name typescript let 类型 string

以下是 TypeScript 的常用知识点总结,涵盖了从基础到入门的内容,并配有代码示例:

1. TypeScript 基础

 1.1 安装和配置

安装 TypeScript 并初始化配置文件:

npm install -g typescript
tsc --init

 1.2 基本类型

TypeScript 提供的基本类型有 `number`、`string`、`boolean`、`null`、`undefined`、`symbol`、`bigint`、`void` 等。

let isDone: boolean = false;
let age: number = 25;
let name: string = "Alice";
let u: undefined = undefined;
let n: null = null;

1.3 数组和元组

数组和元组用来表示一组数据,其中数组是同一类型元素的集合,元组则是已知数量和类型的集合。

let list: number[] = [1, 2, 3];
let tuple: [string, number] = ["Alice", 25];

 1.4 枚举 (Enum)

`enum` 用于定义一组命名常量:

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

 2. 接口 (Interface)

接口用于定义对象的结构,包括属性和方法的类型。接口可以用于类型检查和代码提示。

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

function greet(person: Person): void {
  console.log("Hello, " + person.name);
}

let user: Person = { name: "Alice", age: 25 };
greet(user);
```

2.1 可选属性和只读属性

接口中的可选属性在对象中可以不存在,用 `?` 表示;只读属性使用 `readonly` 关键字修饰。

```typescript
interface Book {
  readonly title: string;
  author?: string;
}

let book: Book = { title: "TypeScript Handbook" };
// book.title = "New Title"; // 错误:title 是只读属性
```

2.2 函数类型的接口

接口还可以用于定义函数的结构:

```typescript
interface Add {
  (x: number, y: number): number;
}

const add: Add = (x, y) => x + y;
```

 3. 类型别名 (Type Alias)

类型别名允许为任何类型创建一个新的名称:

```typescript
type ID = string | number;
let userId: ID = "123";
userId = 456;
```

4. 联合类型和交叉类型

 4.1 联合类型 (Union Types)

联合类型表示一个值可以是几种类型之一,用 `|` 表示。

```typescript
let value: string | number;
value = "hello";
value = 42;
```

4.2 交叉类型 (Intersection Types)

交叉类型用于将多个类型合并为一个类型,用 `&` 表示。

``typescript
interface Name {
  na`me: string;
}
interface Age {
  age: number;
}

type Person = Name & Age;
let person: Person = { name: "Alice", age: 25 };
```

5. 类 (Class) 和继承

 5.1 定义类

TypeScript 支持面向对象编程,使用 `class` 关键字定义类:

```typescript
class Animal {
  name: string;

  constructor(name: string) {
    this.name = name;
  }

  move(distance: number = 0) {
    console.log(`${this.name} moved ${distance}m.`);
  }
}

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

 5.2 类的继承

使用 `extends` 关键字实现继承:

```typescript
class Bird extends Animal {
  fly(distance: number) {
    console.log(`${this.name} flew ${distance}m.`);
  }
}

let bird = new Bird("Sparrow");
bird.fly(20);
```

 6. 泛型 (Generics)

泛型使得函数、接口和类可以适用于多种类型。

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

let output = identity<string>("Hello");
```

 6.1 泛型接口和泛型类

```typescript
interface Pair<T, U> {
  first: T;
  second: U;
}

let p: Pair<string, number> = { first: "Alice", second: 25 };

class Stack<T> {
  private items: T[] = [];
  
  push(item: T) {
    this.items.push(item);
  }

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

 7. 类型断言 (Type Assertion)

类型断言用于告诉编译器变量的实际类型。它有两种语法:

```typescript
let someValue: any = "Hello, TypeScript";
let strLength: number = (someValue as string).length;
// 或
let strLength2: number = (<string>someValue).length;
```

 8. 类型守卫 (Type Guards)

TypeScript 提供了多种类型守卫,包括 `typeof`、`instanceof` 和自定义类型守卫。

```typescript
function padLeft(value: string, padding: string | number) {
  if (typeof padding === "number") {
    return Array(padding + 1).join(" ") + value;
  }
  if (typeof padding === "string") {
    return padding + value;
  }
  throw new Error(`Expected string or number, got '${padding}'.`);
}
```

 9. 模块和命名空间

9.1 模块

模块帮助组织代码。使用 `export` 和 `import` 导出和导入模块。

```typescript
// utils.ts
export function add(x: number, y: number): number {
  return x + y;
}

// main.ts
import { add } from "./utils";
console.log(add(2, 3));
```

9.2 命名空间

命名空间用于将一组相关的代码放在一个命名空间下。

```typescript
namespace MathUtils {
  export function add(x: number, y: number): number {
    return x + y;
  }
}

console.log(MathUtils.add(2, 3));
```

10. 高级类型

10.1 映射类型 (Mapped Types)

映射类型可以基于已有类型创建新的类型。

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

type ReadonlyPerson = {
  readonly [K in keyof Person]: Person[K];
}

 10.2 条件类型 (Conditional Types)

条件类型是根据条件返回不同类型的类型。

type IsString<T> = T extends string ? "string" : "not string";
type Test = IsString<string>; // "string"
type Test2 = IsString<number>; // "not string"

10.3 工具类型

TypeScript 内置了一些工具类型,如 `Partial`、`Required`、`Readonly` 等。

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

type PartialUser = Partial<User>; // 所有属性变为可选
type ReadonlyUser = Readonly<User>; // 所有属性变为只读

以上是 TypeScript 的基础到入门知识总结,希望对你有所帮助!

标签:Typescript,进阶,入门,number,name,typescript,let,类型,string
From: https://blog.csdn.net/m0_55049655/article/details/143693958

相关文章

  • Python小白学习教程从入门到入坑------第二十九课 访问模式(语法进阶)
    目录一、访问模式1.1 r1.2 w1.3 + 1.3.1r+1.3.2w+1.3.3a+1.4a一、访问模式模式可做操作若文件不存在是否覆盖r只能读报错-r+可读可写报错是w只能写创建是w+可读可写创建是a只能写创建否,追加写a+可读可写创建否,追加写1.1 rr:只读模式(默认模式),文件......
  • Python小白学习教程从入门到入坑------第三十课 文件定位操作(语法进阶)
    一、文件指针python中严格来说没有指针这个说法,但有指针这个用法的体现。指针概念常用于c语言、c++语言中在Python的文件操作中,文件指针(也称为文件游标或文件句柄的位置)是一个内部标记,它指示了当前文件操作的读写位置,文件指针在打开文件时初始化,并随着文件的读写操作而移动......
  • 精准投放新利器!谷歌应用广告的受众信号进阶功能来了!
    深入解读“受众信号进阶功能”优化指南大家好,我是App出海AI阿联,欢迎关注,全网同名。一、背景与定义“受众信号进阶功能”(AudienceSignal)是谷歌推出的一项全新功能,主要适用于希望提升广告效果的应用推广(AppCampaignforInstalls,简称ACi)广告主。通过引入谷歌数据源......
  • 【SpringMVC】基础入门实战(3)
     阿华代码,不是逆风,就是我疯你们的点赞收藏是我前进最大的动力!!希望本文内容能够帮助到你!!目录一:实践1:获取header(1)普通方法 (2)简洁方法获取Header2:返回静态页面(1)返回静态页面失败(2)Controller(3)@RestController和@Controller关联3:返回数据@ResponseBody4:返回HTM......
  • swoole,websocket服务器(协程风格)--进阶篇
        swoole的websocket服务器(协程风格)示例真不算友善,从头了解到尾,那还好,但是谁有那么多时间从头到尾了解。示例不够针对性,写websocket就该单独写websocket的东西,偏偏又加上http的东西。这里我来解读一下websocket服务器(协程风格)示例<?php  useSwoole\Http\Reque......
  • 数字后端零基础入门系列 | Innovus零基础LAB学习Day10
    ###LAB19Innovus在线DRC检查这个章节的学习目标是学会使用数字IC后端设计实现PR工具innovus来检查drc。数字后端零基础入门系列|Innovus零基础LAB学习Day9数字后端零基础入门系列|Innovus零基础LAB学习Day8数字后端零基础入门系列|Innovus零基础LAB学习Day7首先......
  • LangGraph入门:构建ReACT架构的智能Agent
    引言在人工智能和大语言模型(LLM)快速发展的今天,如何构建高效、灵活的智能Agent成为了一个热门话题。LangGraph作为一个强大的工具,为我们提供了一种新的方式来实现复杂的AI工作流,特别是在构建ReACT(ReasoningandActing)架构的智能Agent方面表现出色。本文将深入探讨如何使用LangGra......
  • LangGraph进阶:条件边与工具调用Agent实现
    在前两篇文章中,我们讨论了LCEL和AgentExecutor的局限性,以及LangGraph的基础概念。今天,我们将深入探讨LangGraph的高级特性,重点关注条件边的使用和如何实现一个完整的工具调用Agent。条件边的高级用法条件边是LangGraph中最强大的特性之一,它允许我们基于状态动态决定执行流......
  • 漏洞挖掘实战教程—记录某次SRC引起的连锁漏洞挖掘,网络安全零基础入门到精通教程!
    前言最近这几篇文章一直在围绕学习干货板块去写了,个人的写作和总结能力也有了不小的提升,停笔一想,漏洞挖掘的实战咱们也不能含糊啊,哪怕是水洞,本次是某次SRC中的一个不起眼的资产,引起的多个漏洞,在文章的最后会归纳总结,不知道各位还记不记得之前画的思维导图虽然在往下更细......
  • 最经典的黑客入门教程(安全必备技能)
    无论那类黑客,他们最初的学习内容都将是本部分所涉及的内容,而且掌握的基本技能也都是一样的。即便日后他们各自走上了不同的道路,但是所做的事情也差不多,只不过出发点和目的不一样而已第一节、黑客的种类和行为以我的理解,“黑客”大体上应该分为“正”、“邪”两类,正派黑客......