TypeScript基础使用教程

typescript环境配置的教程 通过以上步骤,你已成功配置TypeScript环境:安装了Node.js、TypeScript编译器,并运行了第一个程序。现在,你可以开始学习TypeScript语法了!练习:修改hello.ts中的代码,比如添加新函数。资源:查阅TypeScript官方文档。如果有其他问题,随时问我!😊。 阅读详情

原始类型

let num:number = 1
let name:string = '张三'
let isDone:boolean = true
let nl:null = null
let unde:undefined = undefined
let sym:symbol = Symbol('123')
let an:any = 666 // 可以是任意类型
let unusable: void = undefined // 声明void类型变量其值只能使null/undefined
function test():void {} // 此时void类型表示当一个函数无返回值

非原始类型

  • object (不包含基础数据类型)
let obj:object = {a: 1}
let obj1:object = [1, 2, 3]
let obj2:object = 100 // 报错
let obj3:object = 'hello' // 报错
  • Object(包含基础数据类型)
let obj:Object = {a: 1}
let obj1:Object = [1, 2, 3]
let obj2:Object = 360
let obj2:Object = 'world'
  • {}(等同于Object)
let obj:{} = {a: 1}
let obj1:{} = [1, 2, 3]
let obj2:{} = 360
let obj2:{} = 'world'

数组类型

let arr1:number[] = [1,2, 3]  // 数组中得元素都是number
let arr1:any[] = ['wang',2, false]  // 数组中得元素可以是任意类型
// 泛型写法   作用:类型参数化
let arr2:Array<number> = [1, 2, 3]
// 元组(表示一个已知元素数量和类型的数组)
let arr3:[number, string, boolean] = [10, 'hello', true]

联合类型

// 表示值可以为字符转/数字/布尔值
let lh:string|number|boolean = 'jiuming' 
// 冒号后得 1 | 'good'指类型,表示值只能为 1或'good'
let constant:1|'good' = '1' 
// 表示obj中的属性一定得有a:1或者b:2或者两者都有
let obj:{a:1}|{b:2}

交叉类型

// 表示一个属性出现多次类型定义,都要满足
let obj:{name: string, age:number} & {height: number, age:18}
// 满足条件,必须有name/age/height属性,并且age为常量18
obj = {
	name: 'zhangsan',
	age: 18,
	height: 180
}

接口

// 定义接口类型 ——— 对象使用
interface IObj {
	name: string;
	age: number
}
let obj:IObj
obj = {
	name: 'mike',
	age: 26
}

// 定义接口类型 ——— 数组使用
interface IArr {
	// [idx:number] 下标类型 : 值类型
	[idx:number]: number|string
}
let arr: IArr = [1, 2, 3 '4', '5']

// 定义接口类型 ——— 函数使用
interface IFun {
	// 形参 : 返回值类型
	(name:string, age:number): void
}
let fn:IFun = (name:string, age:number) => {}
fn("小明", 16) // 必选传递接口定义的参数
  • 接口继承
interface IExternal {
	skin: string
}
interface IInternal {
	organ: string
}
interface IPerson extend IExternal, IInternal {
	heigth: number
}
// 继承后也需满足继承接口定义的属性和属性类型
let p:IPerson  = {
	skin: '古铜色',
	organ: '身体机能健康',
	heigth: 180
}
  • 接口同名(特点:合并同名接口的所有属性类型)
interface IObj {
	a: number
}
interface IObj {
	b: string
}
// 需满足两个同名接口定义的属性和属性类型
let obj:IObj = {
	a: 1,
	b: 'zxc'
}
  • 缺省
interface IPerson {
	name: string
	age: number
	height?: number  // 表示该属性可以缺省(定义数据时可写可不写)
}
let man:IPerson = {
	name: 'wangming',
	age: 18,
	height: 180  // 可写可不写
}
  • 只读
interface IPerson {
	readonly name: string   // readonly 属性只读
}
let p:IPerson  = {
	name: 'lisa'
}
p.name = 'Julie' // 报错 name为只读属性不可更改

类型别名

type strAndNum = string | number
let p:strAndNum = 1  // p可以是string 或者number类型

type ObjType = {
	a: string,
	b: number & 1  // number & 1 数字类型并且只能为1
}
let obj:ObjType  = {
	a: 'xxx',
	b: 1
}

// 接口和别名混用
interface IObj {
	a: string
}
type TStr = IObj['a']  // 等价于 type TStr = string
let s:TStr = 'hello'

type color = 'red' | 'bule' | 'green'
let c: color = 'red'  // c的值只能为'red' | 'bule' | 'green'

函数

// 接口定义函数类型
interface IFn {
	(name: string) => string
}
let fn:IFn = (name: string) => {
	return name
}
fn('wangwu')

// 类型别名定义函数类型
type TFn = (name: string) => string
let fn1:TFn = (name: string) => {
	return name
}

// 接口定义对象中的函数类型
interface IObj {
	fn: IFn // IFn 上面定义过的接口
}
let obj:IObj = {
	fn: (name) => {
		return name
	}
}
obj.fn('jordan')

// 类型别名定义对象中的函数类型
type TObj = {
	fn: (name: string) => void
}
let obj1:TObj = {
	fn: (name) => {}
}

枚举

enum Color {Red, Green, Blue} // 默认枚举元素编号从 0 开始
let c:number= Color.Red  // 值为0
let color:string = Color[0]  // 值为Red

enum Color {Red = 100, Green, Blue} // 可以手动的指定成员的数值
let n:number = Color.Red // 值为100
let n2:number = Color.Green// 值为101

泛型

// 泛型可以理解为类型参数化   T是一个标识符,可以自定义,表示某种类型
function fn<T>(n: T):T {  // 这里函数返回值指定为T, T为传递的不确定类型,n的类型又为T,所以该函数返回时只能为 n,返回其他的数据会报错
	return n
}
fn<string>('Bob')  // 此时 T 表示string
fn<boolean>(true)  // 此时 T 表示boolean
fn<'Mike'>('Mike')  // 类型传入的是个常量,此时 T 表示Mike,参数值也只能是Mike

// 多个类型传递
function fn2<T, G>(n:T, m:G) {
	return `${n}${m}岁了!`
}
fn2<string, number>('晓明', 18)
  • 泛型 - 类型别名
type StrOrNum = string | number
type TObj<T,G> = {
	name: T,
	getName: () => G
}
let obj:TObj<StrOrNum , StrOrNum > = {
	name: '',
	getName() {
		return 'xiaoming'
	}
}
  • 泛型 - 接口
type StrOrNum = string | number
interface IObj<T,G> {
	name: T,
	getName: () => G
}
let obj:IObj<StrOrNum , string> = {
	name: 007,
	getName() {
		return '007'
	}
}
  • 泛型约束
// T extends string|number  // T 只能传string/number
interface IObj<T extends string|number, G = string> {
	name: T,
	getName: () => G
}
let obj:IObj<string> = {
	name: 'xxx',
	getName() {
		return 'xxx'
	}
}

类

// 定义类时也会同时定义一个同名的接口
class Person {
	// 定义属性时需声明属性类型,也可设置默认值
	name: string = 'xiaoming'
	constructor(n: string) {
		this.name = n
	}
	getName() {
		return this.name
	}
}
let p = new Person('嘻嘻')

// Person类也可做为接口使用
let obj:Person = {
	name: '666',
	getName() {
		return 'xxx'
	}
}
【前端】Typescript使用教程 TypeScript是微软开发的一个开源的编程语言,通过在JavaScript的基础上添加静态类型定义构建而成。TypeScript通过TypeScript编译器或Babel转译为JavaScript代码,可运行在任何浏览器,任何操作系统。TypeScript添加了很多尚未正式发布的ECMAScript新特性(如装饰器)。2012年10月,微软发布了首个公开版本的TypeScript,2013年6月19日,在经历了一个预览版之后微软正式发布了正式版TypeScript。 阅读详情

相关推荐

TypeScript教程

javaScript 当年诞生时的定位是浏览器脚本语言,用于在网页中嵌入一些简单的逻辑,而且代码量很少。随着时间的推移,JavaScript 变得越来越流行,如今的 JavaScript 已经可以全栈编程了。现如今的 JavaScript 应用场景比当年丰富的多,代码量也比当年大很多,随便一个 JavaScript 项目的代码量,可以轻松的达到几万行,甚至十几万行。然而 JavaScript 当年“出生简陋”,没考虑到如今的应用场景和代码量,逐渐出现很多困扰。

汪学友的博客 1465

TypeScript详解十六:类型声明(declare)

在日常开发中几乎所有的项目都会应用许多第三方库来完成任务需求。这些第三方库不管是否是用 TS 编写的,最终都要编译成 JS 代码,才能发布给开发者使用。我们知道是 TS 提供了类型,才有了代码提示和类型保护等机制。但在项目开发中使用第三方库时,你会发现它们几乎都有相应的 TS 类型,这些类型都是通过类型声明文件完成的。本文主要介绍了ts中的类型声明,下次再见。

to_the_Future的博客 2万+

TypeScript新手教程

本文翻译自 TypeScript tutorial for beginners: who this guide is for TypeScript新手教程:本指南是给谁看的 下面的指南是一个TypeScript教程,供有兴趣学习更多TypeScript知识的JavaScript开发者使用。这意味着您需要对“普通的”JavaScript有足够的了解,尽管我将在接下来的过程中为您提供一些基本的指导。 单词TypeScript和“初学者”属于同一个教程吗?在写这篇指南之前,我并不确定,但每天我都看到很多初学者对T

人生代码 ---- 公众号 644

TypeScript的三种声明文件、@types、.d.ts、declare、interface、type(超详细)

我们可能在 TypeScript 项目中使用一些全局变量,这些变量没有通过模块导入的方式引入,而是直接通过 `标签引入的脚本文件。这些脚本文件可能会扩展全局命名空间,例如在浏览器环境中的 `window` 对象上添加新的属性或方法。为了让 TypeScript 编译器正确地理解这些全局变量,并提供类型检查和代码提示,我们需要编写相应的全局变量声明文件(通常命名为 `.d.ts`)

qq_51904231的博客 7201

BUCK电路的大信号模型与小信号模型推导

推导开关电源信号模型的核心是将非线性开关过程线性化,常用。如需具体拓扑的推导细节,可进一步说明!

创新改变世界! 1169

VFIO框架源码分析(二十一)- IOMMUFD 模式下的 DMA 映射机制

在虚拟化 I/O 的世界里,无论上层管理面(如对象模型、设备绑定)如何重构,数据面最核心的任务始终未变——DMA 映射(DMA Mapping)。即如何建立 Guest Physical Address (GPA) 到 Host Physical Address (HPA) 的映射关系,并将其填入 IOMMU 的硬件页表中,使得直通设备能够正确访问虚拟机内存。在 Legacy VFIO (Type1) 时代,这一职责由承担,它通过ioctl 操作 Container。

qq_36071928的博客 1010

TypeScript中的类型声明declare

提供了一种在编译过程中告诉TypeScript编译器某个标识符的类型的方式。它告诉编译器:虽然它在当前文件中没有声明,但它在其他地方已经存在了。也就是说,declare让。

jieyucx的博客 3885

PromptBio实战:如何用AI对话搞定转录组数据分析(附详细操作截图)

本文详细介绍了如何利用PromptBio平台通过AI对话完成转录组数据分析,无需编程基础即可实现从数据上传到结果解读的全流程。文章包含详细的操作截图和参数配置建议,帮助科研人员快速掌握这一生信分析工具,显著提升研究效率。

weixin_30872157的博客 136

TypeScript基本用法

需要注意的是,与javascript不同,在typescript中,数组中的每一项都必须是所定义了的类型;如果需要像javascript中一样使用可以传入不同类型的数组,考虑使用tuple类型+方括号在这里我们定义了number的数组,所以传入的必须都是number类型数组泛型3.接口表示数组、类数组我们使用接口定义了args,实际上也可以采用原生的定义,,如IArgumentsNodeList等会将添加了默认值的参数识别为可选参数使用…rest参数获取函数中的剩余参数。

yikina_tiyoko的博客 301

mot_challenge官方评估代码

mot_challenge官方代码使用介绍 评估mot17验证集:每个视频序列的后一半帧作为验证集 下载源码:git clone https://hub.fastgit.org/JonathonLuiten/TrackEval.git 官网上下载data样例,放在TrackEval/下,结构如下: data |-- gt | |-- bdd100k | |-- davis | |-- kitti | |-- mot_challenge | | |-- MOT15-train |

qq_37866436的博客 4896

Backtrader Web:开源量化交易全栈平台

Backtrader Web是一个基于Backtrader框架的现代化量化交易全栈平台,将专业回测引擎与Web技术结合,提供从策略开发到实盘交易的完整解决方案。平台采用FastAPI+Vue3技术栈,具有118个内置策略模板、专业可视化分析工具和完整的策略生命周期管理功能。支持策略版本控制、参数优化、模拟/实盘交易及监控告警,通过RESTful API和WebSocket实现前后端交互。系统采用模块化设计,包含策略服务、回测服务等核心模块,支持SQLite/PostgreSQL等多种数据库。安装简单,5分钟

云金杞 643

【入门】TypeScript基本使用

1.TypeScript介绍 TypeScript简称:TS,是JavaScript的超集。 (1)JS有的TS都有,JS写的代码在TS的环境下都能跑。 (2)在JS基础之上,为JS添加了类型支持。TypeScript=Type+JavaScript TypeScript 起源于使用JavaScript开发的大型项目 。由于JavaScript语言本身的局限性,难以胜任和维护大型项目开发。因此微软开发了TypeScript ,使得其能够胜任开发大型项目。 // TypeScript 代码有明确的数据类型

m0_66083041的博客 2727

华为OD机试真题 新系统 2026-09-26 Java&Go&C【数据中心最佳维护时间窗】

数据中心使用一个整数数组 scores,记录 N 小时内每小时的服务器得分(可正可负)。0 表示服务器故障(无效小时)。

MISAYAONE的博客 109

TypeScript 入门到进阶教程

TypeScript 是 JavaScript 的超集,它添加了静态类型和一些其他特性,使得开发大型应用程序变得更加容易和可靠。TypeScript 是一个强大的工具,它通过静态类型检查和丰富的语言特性,使得开发大型应用程序变得更加容易和可靠。本教程涵盖了从基础到高级的 TypeScript 知识,希望能够帮助你更好地理解和使用 TypeScript。随着你对 TypeScript 的深入学习,你会发现它不仅仅是 JavaScript 的超集,更是一种能够提高代码质量和开发效率的工具。

秦若宸 - 全栈工程师,擅长前端技术与架构设计。 1659

常用元器件使用方法3:电平转换芯片74LVC1T45的使用方法

介绍: 74LVC1T45是一个单位双向可控电平转换芯片。   芯片特性: 1、宽供给电压范围:1.65V到5.5V; 2、3.3V时,可输出24mA电流; 3、最大16uA电能损耗; 4、高噪音抑制;   型号:   引脚: VCC(A) 1 A端和DIR电源 GND 2 地 A 3 数据输入/输出 B 4 ...

snmplink的博客 1万+

YOLOv11 改进 - C2PSA | C2PSA融合Mask Attention掩码注意力,可学习掩码矩阵破解低分辨率特征提取难题 | 2025 预印

本文提出了用于低分辨率图像分割的MaskAttn - UNet框架,并将其核心的掩码注意力机制集成到YOLOv11中。传统U - Net类模型难以捕捉全局关联,Transformer类模型计算量大,而掩码注意力机制通过可学习的掩码,让模型选择性关注重要区域,融合了卷积的局部效率和注意力的全局视野。其工作流程包括特征适配、掩码生成、定向注意力计算和特征融合。我们将掩码注意力机制代码集成到YOLOv11中。

魔改工程师的博客 403

TypeScript 中文教程下载仓库

TypeScript 中文教程下载仓库 【下载地址】TypeScript中文教程下载仓库 探索TypeScript的奥秘,尽在这个中文教程下载仓库!无论您是初学者还是资深开发者,这里都为您准备了详尽的TypeScript学习资源,从基础语法到高级特性,一应俱全。TypeScript作为JavaScript的超集,通过静态...

gitblog_06728的博客 736

STM32F407中文手册

STM32f407中文手册 本参考手册面向应用开发人员,提供有关使用 STM32F405xx/07xx、STM32F415xx/17xx、 STM32F42xxx 和 STM32F43xxx 微控制器存储器与外设的完整信息。STM32F405xx/07xx、STM32F415xx/17xx、STM32F42xxx 和 STM32F43xxx 构成一个微 控制器系列,各产品具有不同的存储器大小、封装和外设。有关订购信息以及器件的机械与电气特性,请参见数据手册。有关 ARM Cortex™-M4F 内核的信息,请参见《Cortex™-M4F 技术参考手册》。

TypeScript基础教程

TypeScript是微软开发的一种开源编程语言,它是JavaScript的超集,添加了可选的静态类型和基于类的面向对象编程。TypeScript在编译时提供类型检查,可以在开发阶段就发现潜在错误,提高代码质量和开发效率。

wscfan的博客 864

win10 跳过U8环境检测的IE WebControls.rar

win10 安装u8的时候 提示IE WebControls 不通过,这个工具可以欺骗u8的检查。 跳过U8环境检测的IE WebControls。提示导入失败后,重新检测通过。

SIMATIC S7-1200, S7-1500 PID 控制[手册]

SIMATIC S7-1200, S7-1500 PID 控制[手册]

Typescript教程

TypeScript使用教程--->简易版

m0_53673930的博客 709

老版QQ原生表情gif动态

这是老版的QQ表情,不过全是动态的的,Windows照片查看器是不会动的,可以右击用浏览器打开查看,再说一遍是老版的,只是分享给宁愿用老版也要动态的人。

最全TypeScript 入门基础教程,看完就会

想学习 TypeScript 的小伙伴看过来,本文将带你一步步学习 TypeScript 入门相关的十四个知识点,详细的内容大纲请看下图: 一、TypeScript 是什么 TypeScript 是一种由微软开发的自由和开源的编程语言。它是 JavaScript 的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。 TypeScript 提供最新的和不断发展的 JavaScript 特性,包括那些来自 2015 年的 ECMAScript 和未来的提案中的特性,比如异步功能和 De

qq_43623970的博客 1958

TypeScript Tools 使用教程

TypeScript Tools 使用教程 项目介绍 TypeScript Tools 是一个用于增强 TypeScript 开发体验的开源项目。它提供了一系列工具和插件,帮助开发者更高效地编写和调试 TypeScript 代码。该项目的主要目标是简化 TypeScript 的开发流程,并提供与现有开发环境的良好集成。 项目快速启动 安装 首先,确保你已经安装了 Node.js 和 npm。然后,...

gitblog_00858的博客 748

Typescript教程——中文文档

TypeScript是JavaScript的超集。它对JS进行了扩展,向JS中引入了类型的概念,并添加了许多新的特性。TS代码需要通过编译器编译为JS,然后再交由JS解析器执行。TS完全兼容JS,换言之,任何的JS代码都可以直接当成JS使用。相较于JS而言,TS拥有了静态类型,更加严格的语法,更强大的功能;TS可以在代码执行前就完成代码的检查,减小了运行时异常的出现的几率;TS代码可以编译为任意版本的JS代码,可有效解决不同JS运行环境的兼容问题;

求上得中,求中得下 8960

TypeScript入门教程:从JavaScript到TypeScript的完美转型

TypeScript入门教程:从JavaScript到TypeScript的完美转型 TypeScript作为JavaScript的超集,已经从前端开发的可选技术演变为现代Web开发的必备技能。它不仅为JavaScript添加了强大的类型系统,更从根本上改变了前端开发的工程化实践和代码质量保障方式。本教程将从TypeScript的核心价值、与JavaScript的核心区别、开发环境搭建到第一个程序...

gitblog_00046的博客 1041

Rollup TypeScript 插件使用教程

Rollup TypeScript 插件使用教程 项目介绍 rollup-plugin-typescript 是一个用于 Rollup 的 TypeScript 插件,它提供了 Rollup 和 TypeScript 之间的无缝集成。该插件允许你在 Rollup 构建过程中使用 TypeScript 编写代码,并将其转换为 JavaScript。 项目快速启动 安装 首先,你需要安装 rollup...

gitblog_01191的博客 1060

【Typescript教程01】TypeScript 入门简介与环境搭建

《TypeScript 入门指南:从安装到开发环境搭建》 摘要: 本文详细介绍了TypeScript的核心概念和开发环境配置流程。TypeScript作为JavaScript的超集,提供了静态类型检查、类型推断和现代化语法支持。通过5个关键步骤(安装TypeScript编译器、ts-node工具、Node类型定义等),开发者可以快速搭建完整的开发环境。文章还对比了不同工具的使用场景,并提供了tsconfig.json的优化配置方案,包括编译目标版本设置、严格模式启用等建议。

silverclayz的技术分享 1604

Awesome TypeScript 示例教程

Awesome TypeScript 示例教程 1、项目介绍 awesome-typescript-examples 是一个由 CodelyTV 维护的 GitHub 项目,旨在提供一系列完整的 TypeScript 示例,展示如何充分利用 TypeScript 语言的潜力。该项目包含了从基础到高级的各种示例,适合不同层次的开发者学习和参考。 2、项目快速启动 环境准备 确保你已经安装了 Node...

gitblog_00997的博客 741
上一篇: uni push2.0实现消息推送(在线&离线)
下一篇: 将el-dialog封装成函数调用
kaiup
博客等级 码龄7年 32粉丝 37原创
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付:10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值