当前位置: 首页 > news >正文

TypeScript 基础语法

文章目录

  • 1. 类型注解
  • 2. 接口(Interfaces)
  • 3. 类(Classes)
  • 4. 泛型(Generics)
  • 5. 枚举(Enums)
  • 6. 高级类型
  • 7. 模块
  • 8. 装饰器(Decorators)
  • 9. 映射类型(Mapped Types)
  • 10. 条件类型(Conditional Types)
  • 11. 索引访问类型(Indexed Access Types)
  • 12. Null 安全性(Null Safety)
  • 13. 模块解析
  • 14. 命名空间(Namespaces)
  • 15. 模块与命名空间的混合使用
  • 16. 装饰器工厂
  • 17. 类型守卫和类型区分(Type Guards and Differentiating Types)
  • 18. 高级类型和技巧
  • 19. 模块声明

TypeScript 是 JavaScript 的一个超集,由 Microsoft 开发。它添加了类型系统和一些其他特性,旨在增强代码的可靠性和开发效率。TypeScript 最终会被编译成纯 JavaScript,以便在各种浏览器和节点环境中运行。下面,我们将介绍 TypeScript 的一些基本语法和特性。

1. 类型注解

类型注解是 TypeScript 最核心的特性之一,它允许你明确地指定变量、函数参数和函数返回值的类型。

let isDone: boolean = false;
let age: number = 20;
let firstName: string = "Alice";function greet(name: string): string {return "Hello, " + name;
}

2. 接口(Interfaces)

接口是定义对象形状的强大方式,它指定了对象应该有哪些属性以及对应的类型。

interface User {name: string;age?: number;  // 可选属性
}function register(user: User) {console.log(user.name);
}register({ name: "John" }); // 有效
register({ age: 25 }); // 编译错误,缺少'name'属性

3. 类(Classes)

TypeScript 支持基于类的面向对象编程。类可以使用 publicprivateprotected 这些访问修饰符来控制成员的访问权限。

class Animal {private name: string;constructor(name: string) {this.name = name;}public move(distance: number) {console.log(`${this.name} moved ${distance}m.`);}
}

4. 泛型(Generics)

泛型提供了一种方法来创建可重用的组件,一个组件可以支持多种类型的数据,这样用户就可以以自己的数据类型来使用组件。

function identity<T>(arg: T): T {return arg;
}let output = identity<string>("myString");
let outputNumber = identity<number>(100);

5. 枚举(Enums)

枚举是一种定义命名常数组的方式,用于创建有限集合的明确值。

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

6. 高级类型

  • 联合类型:允许一个值可以是几种类型之一。
  • 交叉类型:组合多种类型成为一种类型。
  • 类型别名:提供类型的新名称。
type StringOrNumber = string | number;
type UserResponse = User & { token: string };

7. 模块

TypeScript 支持模块,允许从外部文件导入其他模块,也可以导出模块使其它文件可以使用。

// some-module.ts
export const pi = 3.14;
export function square(x: number) {return x * x;
}// main.ts
import { pi, square } from "./some-module";
console.log(pi);
console.log(square(10));

8. 装饰器(Decorators)

装饰器是一种特殊类型的声明,它可以被附加到类声明,方法,访问器,属性或参数上。装饰器使用 @expression 这种形式,expression 必须计算为一个函数。

function sealed(constructor: Function) {Object.seal(constructor);Object.seal(constructor.prototype);
}@sealed
class BugReport {type = "report";title: string;constructor(t: string) {this.title = t;}
}

继续深入探讨 TypeScript 的更多高级特性和用法,这些特性可以帮助开发者更有效地编写健壮且可维护的代码。

9. 映射类型(Mapped Types)

映射类型允许你从一个已知的类型创建新类型,它的属性是基于原始类型的属性变换而来。这是一种灵活的方法来创建相关类型,而不必重复定义。

type Keys = 'option1' | 'option2';
type Flags = { [K in Keys]: boolean };const featureFlags: Flags = {option1: true,option2: false,
};

10. 条件类型(Conditional Types)

条件类型允许类型具有类似 JavaScript 中 if 语句的逻辑。这可以用于在类型层面进行条件判断。

type Check<T> = T extends string ? 'String' : 'Not String';
type Type1 = Check<string>;  // 'String'
type Type2 = Check<number>;  // 'Not String'

11. 索引访问类型(Indexed Access Types)

通过索引访问类型,可以通过其他类型的索引来查询属性的类型。

type User = { name: string; age: number; };
type UserName = User['name'];  // string

12. Null 安全性(Null Safety)

TypeScript 强制性地处理了 null 和 undefined,可以在编译阶段防止很多运行时错误。

function doSomething(x: string | null) {console.log(x!.toUpperCase());  // 使用 '!' 非空断言操作符
}

13. 模块解析

TypeScript 模块解析逻辑决定了模块和导入语句如何互动,支持相对和非相对模块导入。

14. 命名空间(Namespaces)

命名空间是 TypeScript 的一个早期功能,它提供了一种将多个相关的全局类型、接口和类组合到一起的方式。

namespace Validation {export interface StringValidator {isValid(s: string): boolean;}const lettersRegexp = /^[A-Za-z]+$/;export class LettersOnlyValidator implements StringValidator {isValid(s: string) {return lettersRegexp.test(s);}}
}

15. 模块与命名空间的混合使用

TypeScript 允许在模块中使用命名空间来组织代码,反之亦然。

16. 装饰器工厂

装饰器工厂是一个表达式,返回一个函数,该函数在运行时被调用来装饰类或类成员。

function Color(value: string) { // 装饰器工厂return function (target) {// 这是装饰器Object.defineProperty(target, 'color', {value: value});}
}@Color('blue')
class Car {
}

17. 类型守卫和类型区分(Type Guards and Differentiating Types)

类型守卫允许你在代码块中保证变量属于某个特定类型。这通常通过自定义的类型保护函数实现。

function isFish(pet: Fish | Bird): pet is Fish {return (pet as Fish).swim !== undefined;
}// 现在可以安全地使用 'swim' 方法
const pet = getSmallPet();
if (isFish(pet)) {pet.swim();
} else {pet.fly();
}

18. 高级类型和技巧

TypeScript 支持许多高级类型技巧,如使用 Partial, Readonly, Pick, Record 等实用的内置类型。

19. 模块声明

当需要引入非 TypeScript 模块(如某些 JavaScript 库或 JSON 文件)时,可以使用模块声明来告诉 TypeScript 如何处理它们。

declare module "*.json"{const value: any;export default value;
}

相关文章:

TypeScript 基础语法

文章目录 1. 类型注解2. 接口&#xff08;Interfaces&#xff09;3. 类&#xff08;Classes&#xff09;4. 泛型&#xff08;Generics&#xff09;5. 枚举&#xff08;Enums&#xff09;6. 高级类型7. 模块8. 装饰器&#xff08;Decorators&#xff09;9. 映射类型&#xff08;…...

服务器数据恢复—V7000存储raid5数据恢复案例

服务器数据恢复环境&#xff1a; P740AIXSybaseV7000存储阵列柜&#xff0c;阵列柜上有12块SAS机械硬盘&#xff08;包括1块热备盘&#xff09;。 服务器故障&#xff1a; 管理员在日常巡检过程中发现阵列柜中有一块磁盘发生故障&#xff0c;于是更换磁盘并同步数据&#xff0…...

扫雷 【搜索,哈希】

9.扫雷 - 蓝桥云课 (lanqiao.cn) #include<bits/stdc.h> using namespace std; #define int long long const int N1e5100; int n,m,res0; struct pt{int x,y,r; }; typedef pair<int,int> pii; map <pii,int> a;//炸雷的map,键是x,y,值是r map <pii,int&…...

如何在CentOS安装Firefox并结合内网穿透工具实现公网访问本地火狐浏览器

文章目录 1. 部署Firefox2. 本地访问Firefox3. Linux安装Cpolar4. 配置Firefox公网地址5. 远程访问Firefox6. 固定Firefox公网地址7. 固定地址访问Firefox Firefox是一款免费开源的网页浏览器&#xff0c;由Mozilla基金会开发和维护。它是第一个成功挑战微软Internet Explorer浏…...

LlamaIndex 组件 - Loading

文章目录 一、概览加载Transformations将所有内容放在一起抽象 二、文档/节点概览1、概念2、使用模式文件节点 三、定义和定制文档1、定义文档2、自定义文档2.1 元数据2.2 自定义id2.3 高级 - 元数据定制1&#xff09;自定义LLM元数据文本2&#xff09;自定义嵌入元数据文本3&a…...

再见了 wordpress !又一款简洁实用的个人博客,简单好使【文末领福利】

最近想搭一个简单的博客&#xff0c;不想要 wordpress 这类那么臃肿的系统&#xff0c;于是开源站找了下&#xff0c;看看有没有搭建简单&#xff0c;又好使的博客系统。于是还真找到了一个项目 -- VanBlog 简介 VanBlog 是一款简洁优雅的个人博客系统&#xff0c;它拥有很好性…...

【经典算法】LeetCode 136:只出现一次的数字(Java/C/Python3实现含注释说明,Easy)

个人主页&#xff1a; 进朱者赤 阿里非典型程序员一枚 &#xff0c;记录平平无奇程序员在大厂的打怪升级之路。 一起学习Java、大数据、数据结构算法&#xff08;公众号同名&#xff09; 目录 题目描述思路及实现方式一&#xff1a;使用异或运算&#xff08;推荐&#xff09;思…...

ST-LINK Utility 4.6.0 下载安装及使用方法介绍

一、介绍 STM32 ST-LINK Utility是针对STM32全系芯片进行编程&#xff08;读、写、擦除、选项字&#xff09;的一款工具。 STM32 ST-LINK Utility软件主要的功能就是量产&#xff08;批量下载代码的工具&#xff09;。它也是比较实用的一个工具&#xff0c;当我们需要查看芯片F…...

【教程】cocos2dx资源加密混淆方案详解

1,加密,采用blowfish或其他 2,自定是32个字符的混淆code 3,对文件做blowfish加密,入口文件加密前将混淆code按约定格式(自定义的文件头或文件尾部)写入到文件 4,遍历资源目录,对每个文件做md5混淆,混淆原始串“相对路径”“文件名”混淆code, 文件改名并且移动到资源目录根…...

【Altium Designer 20 笔记】PCB板框

Altium Designer中设置PCB板框 PCB板框位于Mechanical1层 点击放置中的线条或使用其他绘图工具来绘制板框, 可以绘制矩形、圆形或其他形状的板框,确保板框是闭合的 注意&#xff1a;在绘制板框时&#xff0c;确保线条的起点和终点相连&#xff0c;形成一个闭合的图形。 快捷键D…...

el-date-picker限制只能选择当前时间前/后的时间(包含日期、时、分)

限制只能选择当前时间前/后的时间&#xff08;包含日期、时、分&#xff09; 首先需要给添加一个属性picker-options属性,然后在data中定义这个pickerOptions属性。 <el-date-pickerv-model"saveForm.startTime":picker-options"pickerOptions"format…...

MySQL 5.7 重置root用户密码

MySQL 5.7 重置root用户密码 如果你忘记了 MySQL 5.7 的 root 用户密码&#xff0c;可以按照以下步骤来重置密码&#xff1a; 1、停止 MySQL 服务。 # systemctl stop mysql.service 2、进入MySQL服务的安全启动模式 # mysqld_safe --skip-grant-tables &3、连接到 MyS…...

分布式数据库Polardb-X架构及特点

PolarDB-X架构 计算节点&#xff08;Compute Node&#xff0c;CN&#xff09;是系统的入口&#xff0c;采用无状态设计的sql引擎提供分布式路由和计算&#xff0c;包括SQL解析器、优化器、执行器等模块。负责数据分布式路由、计算及动态调度&#xff0c;负责分布式事务2PC协调…...

【spring】@Resource注解学习

Resource介绍 在Spring框架中&#xff0c;Resource 注解是一个JSR-250标准注解&#xff0c;用于自动装配&#xff08;autowiring&#xff09;Spring容器中的bean。Resource 注解可以用于字段、方法和方法参数上&#xff0c;以声明依赖注入。 Resource源码 Target({TYPE, FIE…...

【leetcode面试经典150题】43. 字母异位词分组(C++)

【leetcode面试经典150题】专栏系列将为准备暑期实习生以及秋招的同学们提高在面试时的经典面试算法题的思路和想法。本专栏将以一题多解和精简算法思路为主&#xff0c;题解使用C语言。&#xff08;若有使用其他语言的同学也可了解题解思路&#xff0c;本质上语法内容一致&…...

计算机网络 Cisco路由器基本配置

一、实验内容 1、按照下表配置好PC机IP地址和路由器端口IP地址 2、配置好路由器特权密文密码“abcd&#xff0b;两位班内序号”和远程登录密码“star” 3、验证测试 a.验证各个接口的IP地址是否正确配置和开启 b.PC1 和 PC2 互ping c.验证PC1通过远程登陆到路由器上&#…...

Windows Edge 兼容性问题修复:提升用户体验的关键步骤

&#x1f31f; 前言 欢迎来到我的技术小宇宙&#xff01;&#x1f30c; 这里不仅是我记录技术点滴的后花园&#xff0c;也是我分享学习心得和项目经验的乐园。&#x1f4da; 无论你是技术小白还是资深大牛&#xff0c;这里总有一些内容能触动你的好奇心。&#x1f50d; &#x…...

Vue 3 性能飞跃:解析其性能提升的关键方面

文章目录 响应式系统优化静态树提升diff算法优化Tree Shaking优化Composition API事件缓存机制 响应式系统优化 Vue双向绑定原理 Proxy 相较于 Object.defineProperty 在性能上的优势主要体现在以下几个方面&#xff1a; 属性检测的全面覆盖&#xff1a; Object.defineProper…...

MySQL 存储过程中,参数的传递主要通过以下两种方式:IN、OUT 和 INOUT

在 MySQL 存储过程中&#xff0c;参数的传递主要通过以下两种方式&#xff1a;IN、OUT 和 INOUT。这些参数类型决定了参数在存储过程中的使用方式以及存储过程执行完毕后参数值的变化。 1. IN 参数 IN 参数是输入参数&#xff0c;它的值在存储过程被调用时传入&#xff0c;并…...

修改当前Git仓库的地址、用户名、密码

1.修改仓库地址 git remote set-url origin 新的仓库地址2.修改用户名和密码 2.1 修改用户名和密码1 分两步操作&#xff1a; 修改用户名&#xff1a; git config --global user.name "Your New Name"修改密码&#xff1a; 如果是 HTTPS 访问方式&#xff0c;并…...

[特殊字符] 智能合约中的数据是如何在区块链中保持一致的?

&#x1f9e0; 智能合约中的数据是如何在区块链中保持一致的&#xff1f; 为什么所有区块链节点都能得出相同结果&#xff1f;合约调用这么复杂&#xff0c;状态真能保持一致吗&#xff1f;本篇带你从底层视角理解“状态一致性”的真相。 一、智能合约的数据存储在哪里&#xf…...

7.4.分块查找

一.分块查找的算法思想&#xff1a; 1.实例&#xff1a; 以上述图片的顺序表为例&#xff0c; 该顺序表的数据元素从整体来看是乱序的&#xff0c;但如果把这些数据元素分成一块一块的小区间&#xff0c; 第一个区间[0,1]索引上的数据元素都是小于等于10的&#xff0c; 第二…...

Linux 文件类型,目录与路径,文件与目录管理

文件类型 后面的字符表示文件类型标志 普通文件&#xff1a;-&#xff08;纯文本文件&#xff0c;二进制文件&#xff0c;数据格式文件&#xff09; 如文本文件、图片、程序文件等。 目录文件&#xff1a;d&#xff08;directory&#xff09; 用来存放其他文件或子目录。 设备…...

AtCoder 第409​场初级竞赛 A~E题解

A Conflict 【题目链接】 原题链接&#xff1a;A - Conflict 【考点】 枚举 【题目大意】 找到是否有两人都想要的物品。 【解析】 遍历两端字符串&#xff0c;只有在同时为 o 时输出 Yes 并结束程序&#xff0c;否则输出 No。 【难度】 GESP三级 【代码参考】 #i…...

《用户共鸣指数(E)驱动品牌大模型种草:如何抢占大模型搜索结果情感高地》

在注意力分散、内容高度同质化的时代&#xff0c;情感连接已成为品牌破圈的关键通道。我们在服务大量品牌客户的过程中发现&#xff0c;消费者对内容的“有感”程度&#xff0c;正日益成为影响品牌传播效率与转化率的核心变量。在生成式AI驱动的内容生成与推荐环境中&#xff0…...

Qwen3-Embedding-0.6B深度解析:多语言语义检索的轻量级利器

第一章 引言&#xff1a;语义表示的新时代挑战与Qwen3的破局之路 1.1 文本嵌入的核心价值与技术演进 在人工智能领域&#xff0c;文本嵌入技术如同连接自然语言与机器理解的“神经突触”——它将人类语言转化为计算机可计算的语义向量&#xff0c;支撑着搜索引擎、推荐系统、…...

CocosCreator 之 JavaScript/TypeScript和Java的相互交互

引擎版本&#xff1a; 3.8.1 语言&#xff1a; JavaScript/TypeScript、C、Java 环境&#xff1a;Window 参考&#xff1a;Java原生反射机制 您好&#xff0c;我是鹤九日&#xff01; 回顾 在上篇文章中&#xff1a;CocosCreator Android项目接入UnityAds 广告SDK。 我们简单讲…...

ios苹果系统,js 滑动屏幕、锚定无效

现象&#xff1a;window.addEventListener监听touch无效&#xff0c;划不动屏幕&#xff0c;但是代码逻辑都有执行到。 scrollIntoView也无效。 原因&#xff1a;这是因为 iOS 的触摸事件处理机制和 touch-action: none 的设置有关。ios有太多得交互动作&#xff0c;从而会影响…...

MySQL用户和授权

开放MySQL白名单 可以通过iptables-save命令确认对应客户端ip是否可以访问MySQL服务&#xff1a; test: # iptables-save | grep 3306 -A mp_srv_whitelist -s 172.16.14.102/32 -p tcp -m tcp --dport 3306 -j ACCEPT -A mp_srv_whitelist -s 172.16.4.16/32 -p tcp -m tcp -…...

什么是Ansible Jinja2

理解 Ansible Jinja2 模板 Ansible 是一款功能强大的开源自动化工具&#xff0c;可让您无缝地管理和配置系统。Ansible 的一大亮点是它使用 Jinja2 模板&#xff0c;允许您根据变量数据动态生成文件、配置设置和脚本。本文将向您介绍 Ansible 中的 Jinja2 模板&#xff0c;并通…...