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

TypeScript 定义不同的类型(详细示例)

还是大剑师兰特:曾是美国某知名大学计算机专业研究生,现为航空航海领域高级前端工程师;CSDN知名博主,GIS领域优质创作者,深耕openlayers、leaflet、mapbox、cesium,canvas,webgl,echarts等技术开发,欢迎加底部微信(gis-dajianshi),一起交流。

No.内容链接
1Openlayers 【入门教程】 - 【源代码+示例300+】
2Leaflet 【入门教程】 - 【源代码+图文示例 150+】
3Cesium 【入门教程】 - 【源代码+图文示例200+】
4MapboxGL【入门教程】 - 【源代码+图文示例150+】
5前端就业宝典 【面试题+详细答案 1000+】

在这里插入图片描述

文章目录

      • 1. 基本类型
      • 2. 数组
      • 3. 元组 Tuple
      • 4. 枚举 Enum
      • 5. 对象类型
      • 6. 函数类型
      • 7. 类型别名 Type Alias
      • 8. 泛型 Generics
      • 9. 类 Class
      • 10. 接口 Interface


TypeScript 是 JavaScript 的一个超集,它增加了静态类型系统和一些额外的特性来帮助开发者编写可维护、可扩展的应用程序。在 TypeScript 中,你可以使用类型注解来指定变量、函数参数或返回值的类型。

下面我将通过一系列示例来展示如何在 TypeScript 中定义不同的类型:

1. 基本类型

基本类型的定义包括 stringnumberboolean 等。

let myName: string = "Alice";
let age: number = 30;
let isStudent: boolean = false;

2. 数组

数组可以定义为包含特定类型元素的列表。

let numbers: number[] = [1, 2, 3];
let fruits: string[] = ["apple", "banana"];
let truthValues: boolean[] = [true, false];

或者使用泛型数组形式:

let numbers: Array<number> = [1, 2, 3];

3. 元组 Tuple

元组允许表示一个已知元素数量和类型的数组。

let x: [string, number];
x = ["hello", 10]; // OK
// x = [10, "hello"]; // Error

4. 枚举 Enum

枚举类型为一组相关的名称提供了一种方便的方式来定义一个数值常量集合。

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

5. 对象类型

对象类型可以通过接口(interface)或者类型别名(type alias)来定义。

interface Person {name: string;age?: number; // 可选属性
}type Product = {id: number;title: string;
};let person: Person = {name: "Alice"};
let product: Product = {id: 1, title: "Book"};

6. 函数类型

函数类型可以指定参数和返回值的类型。

function greet(person: string): string {return "Hello " + person;
}// 或者
const add = (a: number, b: number): number => {return a + b;
};

7. 类型别名 Type Alias

类型别名用于给一个类型起个新名字。

type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;function getName(n: NameOrResolver): Name {if (typeof n === 'string') return n;else return n();
}

8. 泛型 Generics

泛型允许创建重用性高的函数和类。

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

9. 类 Class

类支持面向对象编程。

class Animal {name: string;constructor(name: string) {this.name = name;}
}let animal = new Animal("Cat");
console.log(animal.name); // 输出 "Cat"

10. 接口 Interface

接口描述了对象的形状。

interface LabelledValue {label: string;value: number;
}function printLabel(labelledObj: LabelledValue) {console.log(labelledObj.label);
}let myObj = {size: 10, label: "Size 10 Object"};
printLabel(myObj); // OK

这些示例覆盖了 TypeScript 中常见的类型定义方法。你可以根据自己的需求选择合适的类型定义方式。

相关文章:

TypeScript 定义不同的类型(详细示例)

还是大剑师兰特&#xff1a;曾是美国某知名大学计算机专业研究生&#xff0c;现为航空航海领域高级前端工程师&#xff1b;CSDN知名博主&#xff0c;GIS领域优质创作者&#xff0c;深耕openlayers、leaflet、mapbox、cesium&#xff0c;canvas&#xff0c;webgl&#xff0c;ech…...

[工具推荐]前端加解密之Burp插件Galaxy

如果觉得该文章有帮助的&#xff0c;麻烦师傅们可以搜索下微信公众号&#xff1a;良月安全。点个关注&#xff0c;感谢师傅们的支持。 免责声明 本号所发布的所有内容&#xff0c;包括但不限于信息、工具、项目以及文章&#xff0c;均旨在提供学习与研究之用。所有工具安全性…...

课题项目结题测试的作用

课题项目结题测试是课题项目研究过程中的一个重要环节&#xff0c;它对于确保课题项目的质量和成果具有重要的作用。本文将详细介绍课题项目结题测试的作用。 一、确保课题项目质量 课题项目结题测试是对课题项目研究成果的全面评估和检测。通过结题测试&#xff0c;可以对课…...

中国工商银行长春分行开展“工驿幸福 健康财富”长辈客群康养活动

中国工商银行长春分行作为国有大行&#xff0c;持续完善有温度、专业化、安全稳健的养老场景服务&#xff0c;以工行驿站为依托、以长辈客群养老需求为中心&#xff0c;积极对接社区构建敬老、康养的“金融泛金融”工行驿站服务生态&#xff0c;进一步提升长辈客群的到店体验。…...

机器学习 第十四章

目录 前言 一、隐马尔可夫模型 二、马尔可夫随机场 三、条件随机场 四、学习和推断 1.变量消去 2.信念传播 五、近似推断 1.MCMC采样 2.变分推断 六、话题模型 总结 前言 机器学习最重要的任务是根据一些已观察到的证据来对感兴趣的未知变量进行估计和推测。概率模…...

未来RPA财税的发展前景

近年来&#xff0c;全球数字化进程持续提速&#xff0c;越来越多企业受到效率及运营成本的压力&#xff0c;正努力寻求企业增长发展的新路径&#xff0c;而财务作为企业战略的“大脑”&#xff0c;成为企业数字化转型的重要突破口。RPA技术由于能够自动化各种重复性和繁琐的任务…...

快速设置 terminator 透明背景

看图&#xff0c;按步骤设置后⭐重启一个终端则为透明效果 效果展示&#xff1a;...

Redis+Unity 数据库搭建

游戏中需要存放排行榜等数据&#xff0c;而且是实时存放&#xff0c;所以就涉及到数据库的问题。这里找服务器大神了解到可以用Redis来做存储&#xff0c;免费的效率极高。 Redis的搭建参考上文的文章&#xff0c;同时也感谢这位网友。 搭建Redis 并测试数据 搭建Redis 1.下…...

WebTracing:如何使用一款SDK实现前端全链路监控

引言 在产品的开发和运营过程中我们经常会遇到一些问题,如用户反馈说无法对某某商品下单,而另一位负责运营的同事也提到某某广告在手机上打不开。尽管这些问题被多次报告,但我们却难以复现这些故障,这让团队感到十分棘手。如何有效地记录项目中的错误并能够重现这些问题,…...

【Story】编程迷航:从 “ 我怎么才学会 ? ” 到 “ 我怎么这么厉害 ! ”

目录 大学生编程入门指南&#xff1a;选择语言、制定计划与避坑技巧1. 选择适合的编程语言1.1 Python1.2 Java1.3 C/C1.4 JavaScript1.5 SQL 2. 制定有效的学习计划2.1 设定明确的目标2.2 制定学习时间表2.3 选择学习资源2.4 实践和项目 3. 避免常见学习陷阱3.1 避免过度焦虑3.…...

基于“日志审计应用”的 DNS 日志洞察实践

作者&#xff1a;羿莉 (萧羿) 基础背景 DNS(Domain Name System) [ 1] 是任何网络活动的基础。它将易于记忆的域名转换为机器能够理解的 IP 地址。监控 DNS 服务可以帮助用户识别网络活动并保持系统安全。出于合规和安全性的考虑&#xff0c;公司通常要求对网络日志进行存储和…...

大学按照学科类别、办学层次、教育性质分类有哪些?创龙教仪一文带您了解

大学的分类多种多样&#xff0c;主要可以从学科类别、办学层次、教育性质等方面进行划分。 一、按学科类别划分 综合类大学 特点&#xff1a;学科门类齐全&#xff0c;文理渗透&#xff0c;科研实力强。 优势&#xff1a;拥有较多的国家级重点学科和实验室&#xff0c;师资…...

数据结构与算法 - 递归

一、递归 1. 概述 定义&#xff1a;在计算机科学中&#xff0c;递归是一种解决计算问题的方法&#xff0c;其中解决方案取决于同一类问题的更小子集。 比如单链表递归遍历的例子&#xff1a; void f(Node node) {if(node null) {return;}println("before:" node…...

python:plotly 网页交互式数据可视化工具

pip install plotly plotly-5.22.0-py3-none-any.whl pip install plotly_express 包含&#xff1a;GDP数据、餐厅的订单流水数据、鸢尾花 Iris数据集 等等 pip show plotly Name: plotly Version: 5.22.0 Summary: An open-source, interactive data visualization librar…...

聊一聊 webpack5性能优化有哪些?

介绍 此文章基于webpack5来阐述 webpack性能优化较多&#xff0c;可以对其进行分类 优化打包速度&#xff0c;开发或者构建时优化打包速度&#xff08;比如exclude、catch等&#xff09;优化打包后的结果&#xff0c;上线时的优化&#xff08;比如分包处理、减小包体积、CDN…...

公布一批神马爬虫IP地址,真实采集数据

一、数据来源&#xff1a; 1、这批神马爬虫IP来源于尚贤达猎头公司网站采集数据&#xff1b; 2、数据采集时间段&#xff1a;2023年10月-2024年1月&#xff1b; 3、判断标准&#xff1a;主要根据用户代理是否包含“YisouSpider”&#xff0c;具体IP没做核实。 二、神马爬虫主…...

uni-app全局文件与常用API

文章目录 rpx响应式单位import导入css样式及scss变量用法与static目录import导入css样式uni.scss变量用法 pages.json页面路由globalStyle的属性pages设置页面路径及窗口表现tabBar设置底部菜单选项及iconfont图标 vite.config中安装插件unplugin-auto-import自动导入vue和unia…...

连接器表面缺陷检测方案

连接器是一种用于连接电子设备或电路中不同部件之间的组件&#xff0c;通常用于传输电力、信号或数据。连接器的设计和类型各不相同&#xff0c;以适应不同设备和应用的需求。连接器用于连接电子设备之间的电线、电缆或电路板&#xff0c;实现信号传输和电力供应。连接器设计应…...

React项目动态设置index.html中的<title>标签内容

1. 安装react-helmet-async npm install react-helmet-async -S2. 如下修改App.tsx即可 import { ConfigProvider } from "antd"; import { RouterProvider } from "react-router-dom"; import { router } from "//router"; import { Helmet, …...

大龄程序员转型攻略:拥抱人工智能,开启新征程

前言 随着科技的飞速发展&#xff0c;人工智能浪潮席卷全球&#xff0c;相关岗位炙手可热。在这个背景下&#xff0c;许多大龄程序员开始思考如何转型&#xff0c;以适应时代的变化。结合自身编程基础&#xff0c;大龄程序员可以学习机器学习、深度学习算法&#xff0c;投身于…...

告别一堆转换头!一个自研小工具搞定USB、网口、485、232、TTL全互连(附配置软件)

极简主义工程师的终极武器&#xff1a;全协议互连调试工具实战指南 每次出差调试设备&#xff0c;我的背包里总塞满了各种转换头——USB转串口、网口转485、232电平转换器...直到上个月在客户现场&#xff0c;当我蹲在机柜旁手忙脚乱切换第五个转换器时&#xff0c;螺丝刀不小心…...

uni-number-box深度解析:从基础属性到高级双向绑定实战

1. uni-number-box基础入门&#xff1a;从零开始玩转数字输入框 第一次接触uni-number-box时&#xff0c;我也觉得这不就是个简单的数字加减控件吗&#xff1f;直到在电商项目中真正用起来&#xff0c;才发现这个看似简单的组件藏着不少门道。uni-number-box是uni-app框架提供的…...

cpdown:精准下载Git仓库文件,告别克隆整个项目的低效操作

1. 项目概述与核心价值最近在整理本地开发环境&#xff0c;发现一个高频痛点&#xff1a;从各种代码托管平台&#xff08;比如 GitHub、GitLab、Gitee&#xff09;下载单个文件或特定目录时&#xff0c;总是特别麻烦。要么得克隆整个仓库&#xff0c;动辄几百兆&#xff0c;浪费…...

告别编译警告!MDK AC6编译器下STM32Cube FreeRTOS工程的__packed等语法适配指南

ARM Compiler v6下STM32Cube FreeRTOS工程的零警告优化实战 当你从ARM Compiler v5切换到v6时&#xff0c;可能会发现原本运行良好的STM32CubeMX生成的FreeRTOS工程突然冒出几十个编译警告。这些黄色的小三角虽然不会阻止程序编译&#xff0c;但对于追求代码质量的开发者来说&a…...

告别手动拼报文!用MQTT.fx和OneNet平台快速调试你的ESP8266物联网设备

用MQTT.fx与OneNet构建高效物联网调试工作流 调试物联网设备时&#xff0c;你是否厌倦了反复修改代码、烧录固件、查看串口日志的循环&#xff1f;当ESP8266与OneNet平台通信异常时&#xff0c;传统调试方式往往让我们陷入二进制报文的泥潭。本文将介绍如何通过MQTT.fx这款图形…...

Simulink模块搭建跟踪误差不归零?可能是隐藏的信号延迟在捣鬼(附S函数解法)

Simulink隐性信号延迟&#xff1a;从图形化建模到S函数的高精度控制实践 在控制系统仿真领域&#xff0c;Simulink作为行业标准工具链的核心组件&#xff0c;其图形化建模方式极大降低了算法验证的门槛。但当工程师从功能实现进阶到性能优化阶段时&#xff0c;常常会遇到一个令…...

FPGA新手避坑指南:用SPWM驱动电机时,你的死区时间加对了吗?

FPGA电机驱动实战&#xff1a;SPWM死区时间设计的核心要点与避坑策略 在数字电源和电机控制领域&#xff0c;FPGA因其并行处理能力和精确时序控制而备受青睐。许多工程师在成功实现SPWM信号生成后&#xff0c;往往忽略了驱动电路中最致命的一环——死区时间设置。我曾亲眼见证过…...

从信息学奥赛真题到项目实战:C++浮点数精度那些坑,你的double真的够用吗?

从信息学奥赛真题到项目实战&#xff1a;C浮点数精度那些坑&#xff0c;你的double真的够用吗&#xff1f; 在信息学奥赛的赛场上&#xff0c;一个看似简单的多项式计算题可能让许多选手栽跟头——不是算法思路不对&#xff0c;而是浮点数精度处理不当导致答案偏差。这种问题在…...

MentalLLaMA:基于指令微调的可解释心理健康分析大模型实践

1. 项目概述&#xff1a;MentalLLaMA——一个面向社交媒体心理健康分析的指令微调大语言模型 如果你正在关注大语言模型在垂直领域的应用&#xff0c;特别是如何让AI模型在理解人类复杂情感和心理状态时&#xff0c;不仅能“判断”&#xff0c;还能“解释”&#xff0c;那么这个…...

从ABL项目看激光武器发展:技术挑战、工程突破与未来转型

1. 项目背景与核心争议十几年前&#xff0c;当美国国防部&#xff08;DoD&#xff09;最终决定为YAL-1机载激光试验台&#xff08;ABL&#xff09;项目画上句号时&#xff0c;在军事与航空航天工程圈子里引发的讨论&#xff0c;远比一份简单的项目终止公告要复杂得多。这个项目…...