当前位置: 首页 > 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转网口 突然无法识别解决方法

当 USB 转网口扩展坞在一台笔记本上无法识别,但在其他电脑上正常工作时,问题通常出在笔记本自身或其与扩展坞的兼容性上。以下是系统化的定位思路和排查步骤,帮助你快速找到故障原因: 背景: 一个M-pard(铭豹)扩展坞的网卡突然无法识别了,扩展出来的三个USB接口正常。…...

三维GIS开发cesium智慧地铁教程(5)Cesium相机控制

一、环境搭建 <script src"../cesium1.99/Build/Cesium/Cesium.js"></script> <link rel"stylesheet" href"../cesium1.99/Build/Cesium/Widgets/widgets.css"> 关键配置点&#xff1a; 路径验证&#xff1a;确保相对路径.…...

day52 ResNet18 CBAM

在深度学习的旅程中&#xff0c;我们不断探索如何提升模型的性能。今天&#xff0c;我将分享我在 ResNet18 模型中插入 CBAM&#xff08;Convolutional Block Attention Module&#xff09;模块&#xff0c;并采用分阶段微调策略的实践过程。通过这个过程&#xff0c;我不仅提升…...

可靠性+灵活性:电力载波技术在楼宇自控中的核心价值

可靠性灵活性&#xff1a;电力载波技术在楼宇自控中的核心价值 在智能楼宇的自动化控制中&#xff0c;电力载波技术&#xff08;PLC&#xff09;凭借其独特的优势&#xff0c;正成为构建高效、稳定、灵活系统的核心解决方案。它利用现有电力线路传输数据&#xff0c;无需额外布…...

UE5 学习系列(三)创建和移动物体

这篇博客是该系列的第三篇&#xff0c;是在之前两篇博客的基础上展开&#xff0c;主要介绍如何在操作界面中创建和拖动物体&#xff0c;这篇博客跟随的视频链接如下&#xff1a; B 站视频&#xff1a;s03-创建和移动物体 如果你不打算开之前的博客并且对UE5 比较熟的话按照以…...

汽车生产虚拟实训中的技能提升与生产优化​

在制造业蓬勃发展的大背景下&#xff0c;虚拟教学实训宛如一颗璀璨的新星&#xff0c;正发挥着不可或缺且日益凸显的关键作用&#xff0c;源源不断地为企业的稳健前行与创新发展注入磅礴强大的动力。就以汽车制造企业这一极具代表性的行业主体为例&#xff0c;汽车生产线上各类…...

USB Over IP专用硬件的5个特点

USB over IP技术通过将USB协议数据封装在标准TCP/IP网络数据包中&#xff0c;从根本上改变了USB连接。这允许客户端通过局域网或广域网远程访问和控制物理连接到服务器的USB设备&#xff08;如专用硬件设备&#xff09;&#xff0c;从而消除了直接物理连接的需要。USB over IP的…...

招商蛇口 | 执笔CID,启幕低密生活新境

作为中国城市生长的力量&#xff0c;招商蛇口以“美好生活承载者”为使命&#xff0c;深耕全球111座城市&#xff0c;以央企担当匠造时代理想人居。从深圳湾的开拓基因到西安高新CID的战略落子&#xff0c;招商蛇口始终与城市发展同频共振&#xff0c;以建筑诠释对土地与生活的…...

【Linux】Linux 系统默认的目录及作用说明

博主介绍&#xff1a;✌全网粉丝23W&#xff0c;CSDN博客专家、Java领域优质创作者&#xff0c;掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域✌ 技术范围&#xff1a;SpringBoot、SpringCloud、Vue、SSM、HTML、Nodejs、Python、MySQL、PostgreSQL、大数据、物…...

python爬虫——气象数据爬取

一、导入库与全局配置 python 运行 import json import datetime import time import requests from sqlalchemy import create_engine import csv import pandas as pd作用&#xff1a; 引入数据解析、网络请求、时间处理、数据库操作等所需库。requests&#xff1a;发送 …...