「TypeScript系列」TypeScript变量声明

文章目录

  • 一、TypeScript 变量声明
  • 二、TypeScript 变量作用域
    • 1. 全局作用域
    • 2. 函数作用域(局部作用域)
    • 3. 块级作用域
    • 4. 模块作用域
  • 三、TypeScript 类型断言
  • 四、TypeScript 类型推断
    • 1. 类型推断的示例
      • 变量类型推断
      • 函数参数和返回值的类型推断
    • 2. 类型推断的边界
    • 3. 显式类型注解与类型推断的优先级
  • 五、相关链接

一、TypeScript 变量声明

在 TypeScript 中,你可以使用几种不同的方式来声明变量。以下是主要的方法:

  1. 使用 var 关键字 (不推荐在 TypeScript 中使用,因为它有函数作用域提升的问题):
var x = 10;
  1. 使用 let 关键字 (推荐用于块级作用域):
let y = 20;
  1. 使用 const 关键字 (用于声明常量,其值在初始化后不能改变):
const z = 30;
// z = 40; // 这会报错,因为 z 是一个常量

当你声明变量时,TypeScript 会根据赋值来推断变量的类型。但是,你也可以明确地指定变量的类型,这在某些情况下可能很有用,例如当你需要更明确的类型检查时:

let explicitNumber: number = 10;
const explicitString: string = "Hello, World!";

TypeScript 还支持解构赋值、模板字符串、默认参数等现代 JavaScript 功能,这些都可以用于变量声明和初始化。

请注意,虽然 var 在 JavaScript 中仍然有效,但在 TypeScript 中,为了获得更好的块级作用域和避免一些潜在的错误,推荐使用 letconst

二、TypeScript 变量作用域

在 TypeScript(以及 JavaScript)中,变量的作用域决定了变量在代码中的哪些部分是可访问的。TypeScript 支持三种主要的作用域:全局作用域、函数作用域(也称为局部作用域)和块级作用域(通过 letconst 提供)。

1. 全局作用域

在代码的任何地方声明的变量(不在任何函数内部或块级作用域内),都具有全局作用域。这意味着变量在整个脚本或模块中都是可访问的。在浏览器环境中,全局变量会成为 window 对象的属性。

var globalVar = "I'm global!";function someFunction() {console.log(globalVar); // 可以访问全局变量
}console.log(globalVar); // 也可以访问全局变量

2. 函数作用域(局部作用域)

使用 var 在函数内部声明的变量具有函数作用域。这意味着这些变量只能在函数体内部访问。然而,值得注意的是,使用 var 声明的变量存在所谓的“变量提升”现象,即变量声明会被提升到函数或全局作用域的顶部,但赋值操作不会。

function functionScopedVar() {var localVar = "I'm local!";console.log(localVar); // 可以访问局部变量
}// 这里不能访问 localVar,因为它在 functionScopedVar 函数的作用域内functionScopedVar(); // 输出 "I'm local!"

3. 块级作用域

使用 letconst 声明的变量具有块级作用域,这意味着它们只在声明它们的代码块(例如 {} 内的代码)内是可访问的。这提供了更精细的控制,并有助于避免意外的命名冲突。

if (true) {let blockScopedVar = "I'm block-scoped!";console.log(blockScopedVar); // 可以访问块级变量
}// 这里不能访问 blockScopedVar,因为它在 if 语句的代码块内

4. 模块作用域

在 TypeScript 模块(如 .ts 文件)中,使用 letconstvar 声明的变量默认具有模块作用域。这意味着变量只能在该模块内部访问,除非它被明确导出并在其他模块中导入。

// 在 moduleA.ts 中
export let moduleScopedVar = "I'm module-scoped!";// 在其他模块中
import { moduleScopedVar } from './moduleA';
console.log(moduleScopedVar); // 可以访问 moduleA 模块导出的变量

在 TypeScript 编程中,正确管理变量作用域对于代码的可读性和可维护性至关重要。使用 letconst 而不是 var 可以帮助避免一些常见的 JavaScript 作用域相关的问题。

三、TypeScript 类型断言

在 TypeScript 中,类型断言是一种明确告诉 TypeScript 编译器,你比它更确定某个值的类型的方式。有时编译器可能无法准确推断出一个值的类型,或者你可能知道一个值比编译器推断出的类型更具体。在这些情况下,你可以使用类型断言来告诉编译器你期望的类型。

类型断言有两种形式:

  1. 尖括号语法 (<Type>valuevalue as Type)

    使用尖括号语法时,如果 TypeScript 的目标版本设置为 ES3 或 ES5,你可能需要避免使用它,因为尖括号在这些版本的 JavaScript 中被用作运算符重载,这可能会导致混淆。从 TypeScript 2.7 开始,你可以使用 as 语法作为尖括号语法的替代。

let someValue: any = "this is a string";// 使用尖括号语法
let strLength: number = (<string>someValue).length;// 使用 as 语法
let strLengthAs: number = (someValue as string).length;
  1. 类型断言表达式 (value as unknown as Type)

当需要进行两步或更多步的类型断言时,你可以使用 as unknown as Type 的形式。这首先将值断言为 unknown 类型,然后再断言为所需的类型。这通常用于绕过 TypeScript 的类型检查,但应谨慎使用,因为它可能隐藏类型错误。

let someValue: any = { a: 1, b: 2 };// 假设我们想要断言 someValue 是一个具有特定形状的对象
let specificObject: { a: number, b: string } = someValue as unknown as { a: number, b: string };// 注意:上述断言可能会导致运行时错误,因为 someValue.b 实际上是一个数字

注意:类型断言是告诉编译器“相信我,我知道这个值是什么类型”的一种方式,但它们不会改变值的实际运行时类型。如果类型断言是错误的,它可能会导致运行时错误。因此,在使用类型断言时应该特别小心。

类型断言通常用于以下几种情况:

  • 当你知道一个值的类型比编译器推断出的类型更具体时。
  • 当你在使用像 document.getElementById 这样的 DOM 操作时,这些方法通常返回 HTMLElementnull,但你可能知道它实际上是一个更具体的元素类型(如 HTMLInputElement)。
  • 当你在处理来自外部库或框架的数据时,这些数据可能具有比 TypeScript 编译器可以推断出的更复杂的类型。

四、TypeScript 类型推断

TypeScript 的类型推断是一种编译器功能,它允许开发者在声明变量或函数参数时省略类型注解,而编译器会根据初始值或上下文自动推断出变量的类型。类型推断可以减少代码冗余,使代码更加简洁,同时保持 TypeScript 的类型安全性。

1. 类型推断的示例

变量类型推断

let age = 30; // 推断为 number 类型
let name = "Alice"; // 推断为 string 类型
let isStudent = true; // 推断为 boolean 类型// 数组类型推断
let numbers = [1, 2, 3]; // 推断为 number[] 类型
let names = ["Alice", "Bob", "Charlie"]; // 推断为 string[] 类型// 对象字面量类型推断
let person = {firstName: "Alice",lastName: "Brown",age: 30
}; // 推断为一个具有 firstName, lastName, 和 age 属性的对象类型

函数参数和返回值的类型推断

function greet(name) { // 推断 name 为 string 类型return "Hello, " + name;
}// 调用 greet 函数时,会推断出返回的字符串类型
let greeting = greet("Bob"); // greeting 推断为 string 类型// 箭头函数的类型推断
const add = (a, b) => a + b; // 推断参数 a 和 b 为 number 类型,返回值为 number 类型// 显式指定返回类型可以覆盖类型推断
function explicitReturn(name: string): string {return name.toUpperCase(); // 明确指定返回类型为 string
}

2. 类型推断的边界

虽然 TypeScript 的类型推断功能非常强大,但它也有其边界。编译器并非总能精确推断出变量的类型,特别是当变量被赋予多个不同类型的值时,或者当变量在复杂的上下文中被使用时。在这些情况下,你可能需要显式地提供类型注解来确保类型安全。

3. 显式类型注解与类型推断的优先级

如果在变量声明或函数参数上同时提供了显式类型注解和类型推断的线索,那么显式类型注解将覆盖类型推断的结果。这是因为显式类型注解是开发者提供的明确信息,而类型推断是基于上下文和初始值的推断。

let myVar: number = "30"; // 这里会报错,因为开发者明确指定了 number 类型,但初始值是 string 类型

在上面的例子中,即使初始值是一个字符串,但由于开发者显式指定了 number 类型,TypeScript 编译器会报错,因为它认为这违反了类型安全。

五、相关链接

  1. TypeScript中文网
  2. TypeScript下载
  3. TypeScript文档
  4. TypeScript系列」TypeScript简介及基础语法
  5. 「TypeScript系列」TypeScript 基础类型

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/837479.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

28、Flink 为管理状态自定义序列化

为管理状态自定义序列化 a&#xff09;概述 对状态使用自定义序列化&#xff0c;包含如何提供自定义状态序列化程序、实现允许状态模式演变的序列化程序。 b&#xff09;使用自定义状态序列化程序 注册托管 operator 或 keyed 状态时&#xff0c;需要 StateDescriptor 来指…

从零学算法14

14. 最长公共前缀 编写一个函数来查找字符串数组中的最长公共前缀。 如果不存在公共前缀&#xff0c;返回空字符串 “”。 示例 1&#xff1a; 输入&#xff1a;strs [“flower”,“flow”,“flight”] 输出&#xff1a;“fl” 示例 2&#xff1a; 输入&#xff1a;strs [“d…

算法练习第21天|216.组合总和|||、17.电话号码的字母组合

216.组合总和 III 216. 组合总和 III - 力扣&#xff08;LeetCode&#xff09;https://leetcode.cn/problems/combination-sum-iii/ 题目描述&#xff1a; 找出所有相加之和为 n 的 k 个数的组合&#xff0c;且满足下列条件&#xff1a; 只使用数字1到9每个数字 最多使用一…

北亚MF2200手机取证平台介绍

一、产品介绍。 北亚MF2200手机取证平台是由北亚企安科技&#xff08;北京&#xff09;有限公司&#xff08;Frombyte&#xff09;自主研发的一款针对智能手机&#xff08;iPhone、Android&#xff09;及 iPad 取证分析的法证平台。本平台采集速度快&#xff0c;可通过自动提取…

【VUE】VUE3绘制箭头组件

效果预览&#xff1a; 长、宽、粗细等等根据情况合理调整即可。 组件&#xff1a; <template><div class"line" :style"props.arrowsColor"></div> </template><script setup> import { defineProps, ref, onMounted } fr…

为什么使用AI 在游戏中不犯法

使用AI在游戏中本身并不违法&#xff0c;甚至在很多情况下&#xff0c;游戏公司自己也会在游戏中集成AI来提高游戏体验&#xff0c;例如通过AI驱动的非玩家角色&#xff08;NPC&#xff09;来增加游戏的互动性和挑战性。然而&#xff0c;使用AI是否违法取决于AI的使用方式和目的…

36. 有效的数独 - 力扣(LeetCode)

基础知识要求&#xff1a; Java&#xff1a;方法、for循环、if判断、数组 Python&#xff1a; 方法、for循环、if判断、列表、集合 题目&#xff1a; 请你判断一个 9 x 9 的数独是否有效。只需要 根据以下规则 &#xff0c;验证已经填入的数字是否有效即可。 数字 1-9 在每一…

word2019 64位 NoteExpress突然无法使用解决方法

之前用的好好的&#xff0c;去除格式化运行过一次。 打开别的文档&#xff0c;突然发现红框中的图标全变灰了 根据教程添加 加载项&#xff0c;然后word以管理员身份重启&#xff0c;NE也以管理员身份运行&#xff0c;又可以了 然后突然又不行了&#xff0c;重启电脑后NE变成…

Android Studio开发之路(十二)image、byte[]、mat、Bitmap几种格式互转合集

一、知识点 Camerax中的 imageCapture用例默认的image格式是JPEG, 而ImageAnalysis用例默认的image格式是YUV_420_888. 二、ImageAnalysis用例中ImageProxy转mat YUV转Mat 三、imageCapture中image专byte[] 如下边代码&#xff0c; //拍照&#xff0c;保存到内存 private…

普中STM32F103ZET6开发板让DS0和DS1两个LED同时亮

欢迎关注我👆,收藏下次不迷路┗|`O′|┛ 嗷~~ 目录 一.前言 二.代码 三.运行效果 一.前言 在这套stm32教程中,只教学了如何亮DS0,而没有教学如何亮DS1。 二.代码 main.c #include "stm32f10x.h"void Syst

jQuery的选择器与自带函数详解

在前端开发中&#xff0c;jQuery是一个广泛使用的JavaScript库&#xff0c;它极大地简化了HTML文档遍历、事件处理、动画以及AJAX交互等操作。本文将通过一个示例页面&#xff0c;详细介绍jQuery的选择器和一些常用的自带函数。 示例代码优化 首先&#xff0c;我们来优化和完…

flowable多对并发网关跳转的分析

更多ruoyi-nbcio功能请看演示系统 gitee源代码地址 前后端代码&#xff1a; https://gitee.com/nbacheng/ruoyi-nbcio 演示地址&#xff1a;RuoYi-Nbcio后台管理系统 http://218.75.87.38:9666/ 更多nbcio-boot功能请看演示系统 gitee源代码地址 后端代码&#xff1a; h…

webpack监听文件改变实时编译示例:热更新

watchpack是webpack内部使用的模块&#xff0c;用于监听文件系统。当使用webpack-dev-server或webpack的–watch选项时&#xff0c;webpack会利用watchpack监听文件系统的变化 webpack-dev-server可以用来实现热更新 npm i -D webpack-dev-serverpackage.json"scripts&quo…

SpringBoot整合JavaMail邮件

JavaMail邮件发送 文章目录 JavaMail邮件发送1.方式一&#xff1a;SpringBoot整合JavaMailSender2.方式二&#xff1a;java直接发送 1.方式一&#xff1a;SpringBoot整合JavaMailSender 1.yml配置提取 application: mail:smtp:#服务器主机名host: smtp.qq.com#服务器端口 por…

spring boot3多模块项目工程搭建-下(团队开发模板)

⛰️个人主页: 蒾酒 &#x1f525;系列专栏&#xff1a;《spring boot实战》 目录 写在前面 上文衔接 Common模块 DAO模块 Service模块 Web模块 API模块 写在最后 写在前面 本文介绍了springboot开发后端服务&#xff0c;多模块项目工程搭建&#xff0c;各模块的…

ZL-016D多通道小鼠主动跑轮系统主要研究动物生活节律

简单介绍&#xff1a; 多通道小鼠主动跑轮系统是由动物本身自发运动来推动跑轮转动。在这种构型中&#xff0c;笼内动物长期活动的信息&#xff0c;如跑轮转动方向、转数、累计总行程等&#xff0c;能够使用编码器进行长度计记录。此装置由转轮组件、笼体、以及转动方向速度传…

勒索软件漏洞?在不支付赎金的情况下解密文件

概述 在上一篇文章中&#xff0c;笔者对BianLian勒索软件进行了研究剖析&#xff0c;并且尝试模拟构建了一款针对BianLian勒索软件的解密工具&#xff0c;研究分析过程中&#xff0c;笔者感觉构建勒索软件的解密工具还挺有成就感&#xff0c;因此&#xff0c;笔者准备再找一款…

uniapp外部scss文件使用scss语法不生效,

项目场景&#xff1a; 页面的样式重复我想提取出来作为公共样式 新建scss文件&#xff0c;然后引入&#xff0c;结果样式不生效 问题描述&#xff1a; uniapp官网示例引入css的方法 /* 绝对路径 */ import url(/common/uni.css); import url(/common/uni.css); /* 相对路径 …

企业OA办公系统开发笔记:2、MyBatis-Plus

文章目录 企业办公系统&#xff1a;2、MyBatis-Plus一、MyBatis-Plus1、简介2、主要特点3、依赖 二、MyBatis-Plus入门1、配置文件2、启动类3、实体类4、添加Mapper类5、测试Mapper接口6、CRUD测试6.1、insert添加6.1.1、示例6.1.2、主键策略 6.2、更新6.3、删除6.3.1、根据id删…

第十一届蓝桥杯大赛软件类决赛 Java A 组

文章目录 发现宝藏【考生须知】试题 A: 合数个数试题 B : 含 2 天数试题 C: 本质上升序列试题 D: 迨尺天涯试题 E: 玩具蛇试题 F: 游园安排试题 G: 画廊试题 H: 奇偶覆盖试题 I: 补给试题 J: 蓝跳跳 发现宝藏 前些天发现了一个巨牛的人工智能学习网站&#xff0c;通俗易懂&…