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

ADS1256单端vs差分接法详解:在STM32上实现8通道电压采集与4通道差分测量的实战对比

本文深入解析ADS1256在STM32平台上的单端8通道与差分4通道电压采集方案,详细对比两种接法的硬件设计、软件配置及性能差异。通过CubeMX配置SPI接口和优化数据读取时序,实现高精度测量,适用于工业监测等高要求场景。

weixin_29165465的博客 245

西电2023秋季机器学习复习提纲

西电2023秋季机器学习复习提纲,希望对学弟学妹有帮助

weixin_62083045的博客 5676

TypeScript中的类型声明declare

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

jieyucx的博客 3885

OCV/AOCV/SOCV的介绍和应用

library中的cell delay是在某个固定的PVT(operating condition)下仿真得出的。,cell的delay并不是一个固定值,而是一个随机值,遵循高斯分布或门特卡洛分布,在STA中用OCV来模拟这一『特征』。OCV全称on chip variation,用于描述不同管子间由于工艺偏差、电压降、温度变化引起的delay变化。,也用于描述工艺偏差引起的net厚度宽度的变化从而导致net的电容电阻变化。优点:设置起来比较简单粗暴,对于不那么先进的工艺可行!的影响,更贴合实际。

m0_61003348的博客 8983

TypeScript基本用法

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

yikina_tiyoko的博客 301

(保姆式教程:从下数据到画图)python如何利用EOF分析SSTA海温异常现象并画图

保姆式教程,教你如何利用python分析1979-2004年的太平洋地区的海温异常SSTA,并且绘制出空间模态和时间序列的图片。

shayuxing的博客 2万+

用Python和CasADi实现高斯伪谱法:一个轨迹优化问题的保姆级教程

本文详细介绍了如何使用Python和CasADi框架实现高斯伪谱法解决轨迹优化问题。通过保姆级教程,从环境准备、问题建模到高斯伪谱法的核心实现,包括配点与权重计算、微分矩阵构造和动力学约束实现,最终完成问题求解与结果可视化。适用于机器人轨迹规划和无人机路径优化等工程场景。

weixin_30776273的博客 294

【入门】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

C语言实战:最小二乘法在传感器数据校准中的应用(附完整代码)

本文详细介绍了如何使用C语言实现最小二乘法,对传感器数据进行线性校准。通过模拟带噪声的传感器数据,手把手演示了从核心算法实现、参数计算到效果验证的完整流程,并提供了可直接编译运行的完整源码,帮助嵌入式开发者解决传感器数据不准的常见问题,提升系统测量精度。

weixin_28025327的博客 516

TypeScript 入门到进阶教程

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

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

【点云概述】什么是点云、来源、种类、特点、处理?

【点云概述】什么是点云、来源、种类、特点、处理?点云(point cloud)是空间中点的数据集,可以表示三维形状或对象,通常由三维扫描仪获取。点云中每个点的位置都由一组笛卡尔坐标 ( X , Y , Z ) (X, Y, Z) (X,Y,Z)描述,有些可能含有色彩信息 ( R , G , B ) (R, G, B) (R,G,B)或物体反射面强度(Intensity)信。

智慧空间实验室 9820

第4篇:使用 NModbus 库快速搭建 Modbus TCP 通信(从零开始用 C# 开发 Modbus 上位机)

本文介绍了如何使用 NModbus 库快速搭建 Modbus TCP 上位机通信程序。通过安装 NModbus4 NuGet 包,开发者可以轻松实现 Modbus TCP 连接,无需手动处理底层协议细节。文章详细演示了核心功能实现: 创建 TCP 客户端连接设备 读取保持寄存器(功能码0x03) 写入单个寄存器(功能码0x06) 关闭连接释放资源 提供完整C#示例代码,包含初始化连接、数据读写等关键操作,帮助开发者快速构建Modbus TCP通信应用。相比手动实现,NModbus库大幅简化了开发流程,特别适

这里只有干货:从 Modbus 通信到 MES 对接,从 YOLO 训练到工控机部署,带你搞定工业软件开发全流程。 1046

TypeScript 中文教程下载仓库

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

gitblog_06728的博客 736

大中型超市收银系统(可直接运行)

光步前台收银系统系统功能:商品销售、商品退货、挂单、收银员权限、会员销售、单品取消、整单取消、商品查询、脱机销售、脱机数据上传,基本资料下载,开钱箱、小票打印、收款结算,支持多币种付款方式(现金、储值卡、礼券、微信等),支持多种促销。运行环境:.net 4.0登陆信息用户名:1001 密码:123456内置商品信息,商品编码可输入00001000 - 00010000,测试效果相关功能键F5 结算 F9挂单 F11商品查询 F8退货 Insert单品取消 Del整单取消 F12开钱箱F2 会员 Ctrl+Z退出系统 Home 锁屏 相关源码待公开

TypeScript基础教程

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

wscfan的博客 864

android 蓝牙通讯demo

android 下蓝牙通讯demo,实现了发现蓝牙,使能蓝牙,通过蓝牙发送消息。

文档:亲测可用解决vnc灰屏,黑屏,鼠标大黑叉情况

主要解决vnc-viewer灰屏,黑屏,鼠标大黑叉等现象,详细见文档。

Typescript教程

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

m0_53673930的博客 709

最全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、付费专栏及课程。

余额充值