TypeScript学习笔记归纳(持续更新ing)

文章目录

前言

二、TypeScript的优势体现在哪里?

1、执行时间上的区别

2、基础数据类型区别

3、TS优势

三、TypeScript的关键特性

四、TypeScript的类型系统

1、什么是类型注释?

2、类型系统核心 - 常用类型

1) 基本类型(原始类型):    

数字(Number) 

字符串(String)

布尔值(Boolean)

Null 和 Undefined 

Symbol

疑问

1、--strictNullChecks标志是什么?

2、--strictNullChecks标志默认是启动的吗?如何关闭

总结


前言

提示:该文章主要记录一下TypeScript学习笔记及使用体验,会不断丰富更新学习及使用过程中遇到的情况:


一、TypeScript是什么?

TypeScript 是一种由 Microsoft 开发的开源语言。TypeScript与JavaScript有着不同寻常的关系。它是 JavaScript 的一个超集,添加了可选的静态类型和基于类的面向对象编程。 TypeScript 提供了JavaScript的所有功能,并且额外增加了:类型系统
简单可以概述为:
TypeScript(简称:TS)是 JavaScript(简称:JS)的超集(JS 有的 TS 都有);
TypeScript =
Type + JavaScript(在 JS 基础之上,为 JS 添加了类型支持);
 

二、TypeScript的优势体现在哪里?

1、JS 代码中绝大部分错误都是 类型 错误(Uncaught Type Error);
2、在VSCode中,会先编译代码,后执行代码;

1、执行时间上的区别

在我们使用VSCode开发过程中不难发现,JS 属于动态类型的编程语言,是在执行期对代码做类型检查,这样开发过程中就需要等到代码真正去执行的时候才能发现错误,这时候再去定位并修改bug,相对来说就有点晚了,还会耽误很多时间。

然而经过学习使用会发现,TS属于静态类型的编程语言,是在编译期做类型检查,这时在代码编译的时候(代码执行前)就会发现错误,这样可以在编写代码的同时就发现代码中的错误,它可以高亮代码中的意外行为,从而降低出现错误的可能性。

2、基础数据类型区别

TS 中包含了JS中所有的数据类型,同时新增了特定类型,在TS中常用基础类型可细分为两类:

JS基础数据类型(TS包含):

  • 原始类型:number/string/boolean/null/undefined/symbol;
  • 对象类型:object(包括,数组、对象、函数等对象);
  TS新增数据类型
  • 联合类型、自定义类型(类型别名)、接口、元组、字面量类型、枚举、void、any 等。

3、TS优势

  • 所有的 JS 代码都是 TS 代码;
  • 开发过程中任何位置的代码都会有相应的 代码提示 ,增强了开发体验;
  • 可在代码编写时 显示标记出代码中的意外行为 降低出现错误的可能性 ,提升开发效率;
  • 丰富的 类型系统 提升了代码的可维护性,使得 重构代码更加容易
  • 类型推断 机制, 不需要 在代码中的 每个地方都显示标注类型
  • 支持 最新的 ECMAScript 语法
  • 支持 多种框架的使用;

三、TypeScript的关键特性

以下是一些 TS 的关键特性:

  • 静态类型检查:在代码运行之前,TS编译器会检查类型错误。这有助于在早期发现潜在的问题。
  • 类型推断TS 能够根据上下文自动推断变量的类型,减少了必须显式声明类型的情况。
  • 类型注解:可以在变量、函数参数和函数返回值上添加类型注解,以明确它们的类型。
  • 接口和类TS支持面向对象编程的特性,如类、接口和继承。
  • 枚举类型TS提供了枚举类型,这在 JS 中是没有的,可以用来定义一组命名常量。
  • 泛型:泛型允许用户创建可重用的组件,这些组件可以支持多种类型而不会丢失其原有类型。
  • 模块化TS 支持模块,可以帮助组织和维护大型代码库。
  • 工具支持TS有很好的编辑器支持,比如自动完成、导航到定义和重构支持。

四、TypeScript的类型系统

TS的类型系统是该语言的核心特性之一,它在 JS的基础上添加了类型注释和静态类型检查。这意味着你可以在编码阶段指定变量、函数参数和返回值的类型,这样 TS 编译器就可以在代码运行之前检测到潜在的类型错误。

1、什么是类型注释?

在TS中,类型注释是一种轻量级的方式来记录函数或变量的期望类型。类型注释可以帮助开发者理解代码应如何使用,同时也允许TS编译器检查类型错误。

类型注释通常跟在变量名后面,使用冒号和空格分隔,然后是类型名称。下面是一些基本的类型注释示例:

作用:为变量添加类型约束。比如,上述例子中:
name 是一个类型为 string 的变量;
age 是一个类型为 number 的变量;
isActive 是一个类型为 boolean 的变量;
函数 greet 接收一个 string 类型的参数,并返回一个 string 类型的值;
对象 user 有两个属性,分别为 string 类型的 name 和 number 类型的 age;
数组 numbers 和 names 分别包含 number 类型和 string 类型的元素;
元组 tuple 包含一个 string 类型和一个 number 类型的元素;

⚠️!!!约定了什么类型,就只能给变量赋值该类型的值,否则,就会报错。

类型注释不是JS的一部分,它们在TS代码被编译成JS时会被移除。这意味着它们不会影响生成的JS代码的性能。它们的主要目的是在开发阶段提供类型校验和编辑器支持。

2、类型系统核心 - 常用类型

下面是 TS类型系统的一些基本组成部分:

1) 基本类型(原始类型):    

在TS中,基本类型(也称为原始类型)是构建其他类型的基石。下面是TS中的一些基本类型,这些类型,完全按照 JS 中类型的名称来书写。 

  • 数字(Number) 

       在TS中,不管是整数还是浮点数,统一使用number类型表示。它还支持十进制、十六进制、二进制和八进制字面量。

// 数字(Number)类型
let decimal: number = 6;
let hex: number = 0xf00d;
let binary: number = 0b1010;
let octal: number = 0o744;
  • 字符串(String)

       字符串数据用于表示文本数据,可以是单引号('), 双引号(")或模板字符串(``)。TS中的文本数据类型是string

// 字符串(String)
let name: string = "letu";
name = '樂途';
let sentence: string = `Hello, my name is ${ name }.`;
  • 布尔值(Boolean)

      布尔值是最基本的数据类型,在TS中,它表示逻辑上的真(true)或假(false)。只有两个值:truefalse,它通常用于控制条件语句,如if语句。

// 布尔值(Boolean)
let isDone: boolean = false;
isDone = true
  • Null 和 Undefined 

       在TypeScript中,nullundefined是所有类型的子类型。这意味着你可以将nullundefined赋值给像numberstring这样的类型。但是,当你使用--strictNullChecks标志时,nullundefined只能赋给any和它们各自的类型(这意味着undefined只能赋给undefined类型,null只能赋给null类型)

Undefined:
undefined类型代表未定义的值。在JavaScript中,如果你声明一个变量但没有给它赋值,那么它的值就是undefined。在

let notAssigned: undefined; // 变量没有赋值,只定义了类型为undefined
console.log(notAssigned); // 输出 "undefined"

TypeScript中,通常不会直接使用undefined类型,因为这限制了变量只能被赋予undefined值。

Null:

null类型表示没有任何对象值。在JavaScript中,null通常被用来表示一个意料之中的缺失值。

let emptyValue: null; // 变量被赋予null类型
emptyValue = null; // 合法的赋值

undefined一样,直接使用null类型不是特别有用,因为这样变量除了null之外不能赋予任何其它值。但是,你可以通过联合类型来指定一个变量可能是null

当启用--strictNullChecks时,nullundefined的行为会更加严格。任何不显式包含nullundefined的类型都不能被赋予这些值。

let strictString: string;
strictString = null; // 错误,不能将类型“null”分配给类型“string”
strictString = undefined; // 错误,不能将类型“undefined”分配给类型“string”
  • Symbol

    symbol类型是ECMAScript 2015的新特性,symbol是不可改变且唯一的。常用来作为对象属性的键。

    let sym1 = Symbol();
    let sym2 = Symbol("key"); // 可选的字符串key
    

    symbol类型的值是通过Symbol构造函数创建的。每个symbol都是唯一的。即使你用相同的字符串来创建两个symbol,它们也是不相等的。

    let sym3 = Symbol("key");
    let sym4 = Symbol("key");
    console.log(sym3 === sym4); // 输出 "false"
    

    symbol类型的主要用途之一是作为对象属性的键,这些属性不会与其他属性冲突,并且不会被通常的方法(如Object.keysfor...in循环)枚举到。

    let obj = {[sym1]: "value"
    };
    console.log(obj[sym1]); // "value"
    

     

2. 数组:
   - `type[]`: 表示一个元素类型为 `type` 的数组。
   - `Array<type>`: 另一种表示数组的方式。

3. 元组:
   - `[type1, type2]`: 表示一个已知元素数量和类型的数组,各元素的类型不必相同。

4. 枚举:
   - `enum`: 用于定义一组命名常量。

5. 任意类型:
   - `any`: 可以是任何类型,TypeScript 不会对这些变量进行类型检查。

6. Void:
   - 用于表示没有任何类型,通常用于函数没有返回值的情况。

7. Never:
   - 表示永远不存在的值的类型,例如,一个抛出异常或永不返回的函数的返回类型。

8. 联合类型:
   - `type1 | type2`: 表示一个值可以是 `type1` 或 `type2`。

9. 交叉类型:
   - `type1 & type2`: 表示一个值同时是 `type1` 和 `type2`。

10. 类型别名:
    - `type Name = ...`: 创建一个新名字来引用某种类型。

11. 接口:
    - `interface`: 定义对象类型,可以包括属性和方法的类型定义。

12. 泛型:
    - 允许在定义函数、接口、类时不预先指定具体的类型,而是在使用时再指定类型的特性。


疑问

1、--strictNullChecks标志是什么?

--strictNullChecks 是 TypeScript 编译器的一个选项。当这个标志被启用时,编译器会更加严格地检查 null 和 undefined 值,以避免可能的运行时错误。

在没有启用 --strictNullChecks 的情况下,所有类型都隐式地包含 null 和 undefined 值。这意味着如果你有一个类型为 string 的变量,那么它实际上可以被赋予 stringnull 或 undefined 值。

let myString: string;myString = null; // 没有错误,即使在没有 --strictNullChecks 的情况下
myString = undefined; // 没有错误

然而,当启用了 --strictNullChecks 后,null 和 undefined 只能赋给它们各自的类型和 any 类型,或者是明确声明为可选的类型。这样做可以避免很多常见的错误,比如在一个对象上调用方法之前没有正确地检查对象是否为 null

let myString: string;myString = null; // 错误: Type 'null' is not assignable to type 'string'.
myString = undefined; // 错误: Type 'undefined' is not assignable to type 'string'.

如果你想要一个变量既可以是 string 类型也可以是 null 或 undefined,你需要使用联合类型明确声明: 

let myString: string | null | undefined;myString = null; // 正确
myString = undefined; // 正确

启用 --strictNullChecks 是一个很好的实践,因为它可以帮助开发者在编译阶段捕获可能的空值错误,而不是在代码运行时才发现

2、--strictNullChecks标志默认是启动的吗?如何关闭

截至我知识更新的时间点(2023年),在 TypeScript 中,--strictNullChecks 标志默认是关闭的。如果你创建一个新的 TypeScript 项目,这个选项不会自动启用;你需要在 tsconfig.json 文件中明确地设置它。


要启用 --strictNullChecks,你需要在项目的 tsconfig.json 文件中设置 compilerOptions 部分,如下所示:

{"compilerOptions": {"strictNullChecks": true}
}

如果你想要关闭这个标志(假设它已经被启用),你需要在 tsconfig.json 中将它设置为 false

{"compilerOptions": {"strictNullChecks": false}
}

注意,关闭 --strictNullChecks 可能会使你的代码更容易出现运行时错误,因为你可能会遗漏对 null 和 undefined 的必要检查。然而,在某些情况下,例如当你迁移旧的 JavaScript 项目到 TypeScript 时,你可能需要暂时关闭这个选项,以便逐步解决类型问题。 


总结

TypeScript是一种由Microsoft开发的开源编程语言,它是JavaScript的一个超集,主要提供了类型系统和对ES6+的支持。TypeScript设计的目的是开发大型应用程序,并且能够编译成纯JavaScript。下面是TypeScript官方文档的一些关键点总结:

  • 类型系统:TypeScript的核心特性之一是它的类型系统。类型系统允许你在编写代码时定义变量、函数参数和对象属性的类型。这有助于捕捉错误,提供代码自动完成和智能提示等功能。
  • 类型推断:TypeScript能够在没有明确类型注释的情况下推断出表达式的类型,这称为“类型推断”。
  • 接口:接口是TypeScript的一个重要概念,用于定义对象的形状,包括它应该包含哪些属性和方法。
  • 类:TypeScript支持基于类的面向对象编程。你可以创建类、继承和实现接口,这些都是静态类型检查的。
  • 泛型:泛型允许你创建可重用的组件,这些组件可以支持多种类型而不会丢失其原始类型。
  • 枚举:枚举是一种特殊的类型,它允许你定义一组命名的常量。
  • 模块:TypeScript支持模块,这意味着你可以将代码分割成可重用的模块。
  • 命名空间:命名空间是另一种在TypeScript中组织代码的方法,它们可以帮助你防止全局作用域的污染。
  • 装饰器:装饰器是一种特殊类型的声明,它可以被附加到类声明、方法、访问器、属性或参数上。装饰器使用`@expression`这种形式,`expression`必须求值为一个函数,它会在运行时被调用。
  • 工具链:TypeScript提供了一系列工具,包括编译器`tsc`和语言服务,它们可以帮助你编译、检查和重构TypeScript代码。
  • 编译器选项:TypeScript编译器`tsconfig.json`文件中有许多配置选项,允许你定制编译过程。
  • 与JavaScript的互操作性**:TypeScript旨在与现有的JavaScript代码库和框架兼容。你可以在TypeScript项目中使用JavaScript代码,并且可以逐步迁移JavaScript代码到TypeScript。

TypeScript官方文档包含了从基础到高级的所有概念,还有关于如何使用TypeScript的详细指南,以及如何配置和管理TypeScript项目的信息。这些文档是学习和使用TypeScript的重要资源。

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

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

相关文章

组态王 6.55 启停plc_永宏PLC在远程控制系统中的应用

一、行业介绍本远程控制系统是给石药集团的下属子公司设计的一个控制方案。主要是配套GPRS-DTU产品实现远程plc与plc之间的数据共享。从而达到远程无线数据写入控制和读取监控的目的。二、客户需求(1) 客户可以在监控室控制至少2-3公里外的井上两个水泵的启动和停止。(2) 客户可…

Vue表格中,对数据进行转换、处理

众所周知&#xff0c;后端从Mysql取出的数据&#xff0c;一般是很难单独处理某一个Key的数据的&#xff08;需要处理的话&#xff0c;可能会浪费大量的性能。而且对页面加载时间有很大的影响&#xff09;&#xff0c;所以&#xff0c;从数据库取出的数据。只能由前端进行处理。…

Java应用程序中的SQL注入

在本文中&#xff0c;我们将讨论什么是SQL注入攻击。 以及它如何影响任何Web应用程序使用后端数据库。 在这里&#xff0c;我专注于Java Web应用程序。 开放Web应用程序安全项目&#xff08;OWAP&#xff09;列出了SQL注入是Web应用程序的主要漏洞攻击。 黑客将Web请求中的SQL代…

bluetooth射频已关闭请打开bluetooth射频_希杰大功率射频放大器烧了维修诊断步骤...

如果电阻值过低&#xff0c;说明电源内部存在短路&#xff0c;正常时其阻值应能达到100千欧以上;电容器应能够充放电&#xff0c;如果损坏&#xff0c;则表现为AC电源线两端阻值低&#xff0c;呈短路状态&#xff0c;否则可能是开关管击穿。然后检查直流输出部分脱开负载&#…

java中整数如何表示,在Java中如何在位级别上内部表示整数?

慕瓜9086354Java整数为32位&#xff0c;并且总是带符号的。这意味着&#xff0c;最高有效位(MSB)用作符号位。用an表示的整数int不过是位的加权和。权重分配如下&#xff1a;Bit# Weight31 -2^3130 2^3029 2^29... ...2 2^21 2^10 …

three.js制作3d模型工具_3D打印模型打磨抛光常用工具

对于追求更好模型品质的人来说&#xff0c;对3D打印模型进行后处理工作是必不可少的&#xff0c;而后处理&#xff0c;首要的便是对模型进行打磨、抛光&#xff0c;将不属于模型的耗材去除&#xff0c;提高表面光洁度。在此工作中&#xff0c;我们需要用到很多工具&#xff0c;…

为何要清除浮动?如何清除?

原因&#xff1a; 元素设置了float属性后&#xff0c;就会脱离文档流&#xff0c;当 包含框 的高度小于 浮动框 的时候&#xff0c;会出现高度塌陷。因此才需要清除浮动&#xff01; 表现如图&#xff1a;包括框container已经包不住float的图片了&#xff01; 清除浮动方法&a…

Spring MVC错误处理示例

这篇文章描述了在Spring MVC 3中执行错误处理的不同技术。该代码在GitHub上的Spring-MVC-Error-Handling目录中可用。 它基于带有注释的Spring MVC示例。 在Spring 3之前处理异常 在Spring 3之前&#xff0c;使用HandlerExceptionResolvers处理异常。 此接口定义一个方法&…

php数字取反,[转+自]关于PHP7的新特性(涉及取反和disabled_functions绕过)

PHP7和PHP5上的安全区别preg_replace()不再支持/e修饰符利用\e修饰符执行代码的后门大家也用了不少了&#xff0c;具体看官方的这段描述:如果设置了这个被弃用的修饰符&#xff0c; preg_replace() 在进行了对替换字符串的 后向引用替换之后, 将替换后的字符串作为php 代码评估…

如何关闭苹果手机自动扣费_教你关闭苹果手机系统的自动更新功能,旧手机还能再用几年!...

大家都知道&#xff0c;苹果手机在更新几个大版本后&#xff0c;手机不是变得非常卡&#xff0c;就是非常的耗电&#xff0c;大大的缩短了手机的使用寿命。所以&#xff0c;许多人都不会选择更新系统&#xff0c;但是手机只要连上WiFi并且在充电状态&#xff0c;就会在半夜自动…

HttpClient的使用

新引入Hutool-HttpUtil的使用&#xff08;更简单&#xff0c;更强大&#xff01;&#xff09;&#xff0c;详见&#xff1a;http://www.cnblogs.com/jiangbei/p/7667858.html 一、概述 1.简介 根据凡技术必登其官网的原则&#xff08;如果有&#xff09;&#xff0c;我们可以先…

四人帮–代理设计模式

代理是另一种结构设计模式 &#xff0c;可以“代表”另一个对象或“代替”另一个对象以访问后面的对象。 何时使用此模式&#xff1f; 当我们需要创建一个包装来覆盖客户端的主要对象的复杂性时&#xff0c;将使用代理模式。 有哪些使用场景&#xff1f; 虚拟代理–设想一种…

使用inetaddress测试目标可达性_PDPS软件机器人虚拟仿真:Smart Place功能介绍与使用方法...

概述对于机器人工作站或生产线的虚拟仿真&#xff0c;很大一部分的作用是找出机器人与工装夹具等外围设备的最佳布局位置。市面上大多数的工业机器人虚拟仿真软件都有这种专门用于检测机器人与外围设备之间最佳布局位置的功能&#xff0c;比如DELMIA软件中的“Auto Place”功能…

angular js 使用pdf.js_排名靠前的几个JS框架发展趋势和前景

转载自&#xff1a;葡萄城官网&#xff0c;葡萄城为开发者提供专业的开发工具、解决方案和服务&#xff0c;赋能开发者。原文出处&#xff1a;https://blog.bitsrc.io/top-5-javascript-frameworks-past-present-and-future-8b6fda39de02随着信息技术领域的发展&#xff0c;企业…

debian dhcp服务启动不了_DHCP服务器配置

DHCP &#xff1d; Dynamic Host Configuration Protocol 基于TCP/IP&#xff0c;用于动态配置工作站网络接口&#xff0c;使工作站的网络接口管理自动化。DHCP服务器软件dhcpd网站&#xff1a;http://www.isc.org安装方法&#xff1a;#tar -zxvf dhcp-4.0.0.tar.gz#cd dhcp-4.…

C++map类型 之 简单介绍

一&#xff1a;map的前世今生&#xff08;1&#xff09;从关联容器与顺序容器说起。关联容器通过键&#xff08;key&#xff09;存储和读取元素。而顺序容器则通过元素在容器中的位置顺序存储和訪问元素&#xff08;vector,queue,stack,list等&#xff09;。关联容器&#xff0…

MySql Socket 完成数据库的增查Demo

需求: 利用MySql数据库结合前端技术完成用户的注册(要求不使用Web服务技术),所以 Demo采用Socket技术实现Web通信. 第一部分:数据库创建 数据库采用mysql 5.7.18, 数据库名称为MyUser, 内部有一张表 user.字段有 Id,UserName,Psd,Tel 第二部分:数据库连接与Socket通信 创建控…

苹果桌面主题_看腻了手机自带的桌面主题,试试这个

在这个看脸的时代&#xff0c;颜值似乎越来越重要了。尤其是我们每天都要看到的手机桌面&#xff0c;如果它的颜值好一点&#xff0c;也许我们的心情会更好&#xff0c;所以有不少人都用手机自带的主题来美化桌面&#xff0c;但是对于喜欢个性的我们&#xff0c;手机自带的主题…

Java SE 11:推动Java向前发展

介绍 在我看来&#xff0c;这篇文章提出了Java语言应该如何发展以保持其作为首选语言的地位。 它还提供了一些我喜欢但有时&#xff08;可能永远不会&#xff09;成为Java一部分的功能&#xff0c;由于我将要解释的某些原因&#xff0c;这些功能有时我已经爱上了。 我真的很想…

Hexo使用细节及各种问题

解决markdown图片不显示(返回403 forbidden)、添加本地图片无法显示、修改文章page模板、同时部署发布同步到多个仓库站点(Github、coding、gitee 码云) 图片不显示 在使用过程中&#xff0c;会发现有的引用图片无法显示的问题。但是如果直接复制图片地址到浏览器打开的话显示…