TypeScript 常用知识

news2024/9/22 13:35:20

「 推荐一个学习 ts 基础的专栏,满满的干货:typeScript 」


1、为什么推荐使用 TypeScript

【】ts 是 js 的超集,包含 js 的所有元素

【】ts 通过对代码进行类型检查,可以帮助我们避免在编写 js 时经常遇到令人痛苦的错误

【】强大的类型系统,包括泛型

【】支持静态类型及类型检查

【】面向对象的语言,提供所有标准的 OOP 功能,如类、接口和模块

【】ts 代码可以按照ES5和ES6标准编译,以支持最新的浏览器

2、TS 中的类型有哪些

【】number、string、boolean、void、null、undefined、enum、any、class、interface、array、tuple(元组)、object、never

3、命名空间与模块的理解

【】命名空间:解决重名问题,命名空间定义了标识符的可见范围,一个标识符可在命名空间中定义,它在不同命名空间中的含义是互不相干的

【】任何包含顶级 import 或者 export 的文件都被当成一个模块。如果一个文件不带有顶级的 import 或者 export 声明,那么它的内容被视为全局可见的

【】区别:

  • 命名空间是位于全局命名空间下的一个普通的带有名字的 JavaScript 对象,使用起来十分容易。但就像其它的全局命名空间污染一样,它很难去识别组件之间的依赖关系,尤其是在大型的应用中
  • 像命名空间一样,模块可以包含代码和声明。 不同的是模块可以声明它的依赖
  • 在正常的TS项目开发过程中并不建议用命名空间,但通常在通过 d.ts 文件标记 js 库类型的时候使用命名空间,主要作用是给编译器编写代码的时候参考使用

4、什么是枚举

【】枚举是 TypeScipt 数据类型,它允许我们定义一组命名常量。它是相关值的集合,可以是数字值或字符串值

【】枚举类型分为:数字枚举、字符串枚举、异构枚举

【】枚举是可以合并的

5、什么是装饰器

【】装饰器是一种特殊类型的声明,它能过被附加到类声明,方法,属性或者参数上,可以修改类的行为

【】通俗的来说就是一个方法,可以注入到类,方法,属性参数上来扩展类,属性,方法,参数的功能

【】装饰器的分类: 类装饰器、属性装饰器、方法装饰器、参数装饰器

6、TS 中的类是什么

【】类表示一组相关对象的共享行为和属性

【】类之间可以通过 extend 实现继承,被继承类称为基类,继承的类称为派生类

【】一个类包括构造器、属性、方法。拥有四个特性:继承、封装、多态、抽象

7、TS 中的泛型是什么

【】 在 ts 中,定义函数,接口或者类的时候,不预先定义好具体的类型,而在使用的时候在指定类型的一种特性

【】泛型约束:<T extends xx> 的方式实现 约束泛型


【】索引类型 keyof T 把传入的对象的属性类型取出生成一个联合类型


8、const 和 readonly 的区别是什么

【】const用于变量,readonly用于属性

【】const在运行时检查,readonly在编译时检查

【】使用const变量保存的数组,可以使用push,pop等方法。但是如果使用Readonly Array声明的数组不能使用push,pop等方法

9、Omit 类型 和 Pick 类型对比

【】Omit 以一个类型为基础支持剔除某些属性,然后返回一个新类型

	Omit<Type, Keys>

【】Pick 以一个类型为基础支持选择某些属性,然后返回一个新类型

	interface Todo {
	  title: string
	  description: string
	  completed: boolean
	  createdAt: number
	}
	type Ex = "title" | "description"
	type TodoPreview = Omit<Todo, "description">
	type TodoPreview1 = Pick<Todo, Ex>

10、ts 中高级类型有哪些

【】交叉类型、联合类型、类型别名、类型索引、类型约束、映射类型、条件类型

【】映射类型:通过 in 关键字做类型的映射,遍历已有接口的 key 或者是遍历联合类型

	type Readonly<T> = {
		//P in keyof T 等同于 p in 'a' | 'b',相当于执行了一次 forEach 的逻辑,遍历 'a' | 'b'
	    readonly [P in keyof T]: T[P];
	};
	
	interface Obj {
	  a: string
	  b: string
	}
	
	type ReadOnlyObj = Readonly<Obj>

【】条件类型:条件类型的语法规则和三元表达式一致,经常用于一些类型不确定的情况

	//如果 T 是 U 的子集,就是类型 X,否则为类型 Y
	T extends U ? X : Y

11、interface 和 type 区别

【】相同点:

  • 都可以描述对象或者函数
  • 都允许扩展(extends)

【】不同点:

  • 类型别名可以为任何类型引入名称,例如基本类型,联合类型等
  • 类型别名不支持继承
  • 类型别名不会创建一个类型的名字
  • 类型别名无法被实现implements,而接口可以被派生类实现
  • 类型别名重名会抛出错误,接口重名是会产生合并

12、interface给 Function/Array/Class 做声明

	interface Say {
	    (name: string): void;
	}
	let say: Say = (name: string): void => {};
	
	interface NumberArray {
	    [index: number]: number;
	}
	let fibonacci: NumberArray = [1, 2, 3, 4];
	
	interface Person {
	    name: string;
	    sayHi(name: string): string;
	}

13、获取枚举类型的 key

	enum Str {
	    A, B, C
	}
	type strUnion = keyof typeof str; // 'A' | 'B' | 'C'

14、declare, declare global是什么

【】declare是用来定义全局变量、全局函数、全局命名空间、js modules、class等

【】declare global 为全局对象 window 增加的新属性

	declare global {
	    interface Window {
	        csrf: string;
	    }
	}

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

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

相关文章

第六节 方法

方法 方法是一种语法结构。 方法的作用&#xff1a; 1.提高代码的复用性 2.让程序逻辑更加清晰 方法定义的完整格式&#xff1a; 修饰符 返回值类型 方法名&#xff08;形参列表&#xff09;{ 方法体的代码&#xff08;需要执行的功能代码&#xff09; return 返回值&#xff…

Unity性能优化: 性能优化之内存篇

前言 本文和传统的内存优化不一样&#xff0c;不是讲如何降低内存占用&#xff0c;而是讲编程开发中要注意的内存问题以及一些内存技术的演变与原理。 对惹&#xff0c;这里有一个游戏开发交流小组&#xff0c;希望大家可以点击进来一起交流一下开发经验呀 1: Application进程…

maven项目无法解析插件

发现问题使用IDEA创建Maven项目时&#xff0c;报错无法解析插件 org.apache.maven.plugins:maven-clean-plugin这里使用的是IDEA捆绑的Maven插件解决方案查看Maven配置打开用户设置文件settings.xml&#xff0c;在其中加入如果该路径下没有此文件&#xff0c;可以自己创建一个。…

软件分析笔记02---Intermediate Representation

整体contents compiler &#xff08;source code ——> machine code&#xff09; non-trivial非平凡的 经过 语义分析->语法分析->类型检查等各种trivial的分析&#xff08;前端&#xff09;&#xff0c;生成中间代码IR->进行non-trivial的分析&#xff08;及静…

Linux 基础介绍-基础命令

文章目录01 学习目标02 Linux/Unix 操作系统简介2.1 Linux 操作系统的目标2.2 Linux 操作系统的作用2.3 Unix 家族历史2.4 Linux 家族历史2.5 Linux 和Unix 的联系2.6 Linux 内核介绍2.7 Linux 发行版本2.8 Unix/Linux 开发应用领域介绍03 Linux 目录结构3.1 Win 和Linux 文件系…

C++之入门之引用,内联函数

一、引用 1、引用的概念 在C中&#xff0c;引用的本质其实就是给一个已经存在的变量”起别名“。也就是说&#xff0c;引用与它所引用的对象共用一块空间。&#xff08;同一块空间的多个名字&#xff09; 就比如说&#xff0c;李逵又叫黑旋风&#xff0c;而黑旋风就是指李逵…

线程安全实例分析

一、变量的线程安全分析 成员变量和静态变量是否线程安全&#xff1f; ● 如果它们没有共享&#xff0c;则线程安全 ● 如果它们被共享了&#xff0c;根据它们的状态是否能够改变&#xff0c;又分两种情况 —— 如果只有读操作&#xff0c;则线程安全 —— 如果有读写操作&am…

STM32学习笔记-USART串口通信+与野火STM32F407板载ESP8266进行通信

文章目录STM32USART介绍STM32USART框图第一部分第二部分第三部分发送器时序图接收器第四部分软件部分&#xff1a;STM32通过USART与板载ESP8266通讯实验板载WIFI模块电路图实现方式&#xff1a;第一步&#xff1a;配置USART1和USART3的GPIO及其中断第二步&#xff1a;通过中断服…

(2023版)零基础入门网络安全/Web安全,收藏这一篇就够了

由于我之前写了不少网络安全技术相关的文章和回答&#xff0c;不少读者朋友知道我是从事网络安全相关的工作&#xff0c;于是经常有人私信问我&#xff1a; 我刚入门网络安全&#xff0c;该怎么学&#xff1f; 要学哪些东西&#xff1f; 有哪些方向&#xff1f; 怎么选&#x…

智慧渔业海洋鱼类捕捉系统

我国的水产捕捞业可分为海洋捕捞、远洋捕捞和淡水捕捞三类&#xff0c;其中淡水渔业是指在淡水水域进行捕捞、养殖和加工淡水水产品的社会生产领域。近年来&#xff0c;随着经济水平的提高和淡水渔业的快速发展&#xff0c;捕捞业规模不断壮大。尽管渔业已从单纯的捕捞发展为系…

卷麻了,00后测试用例写的比我还好,简直无地自容......

经常看到无论是刚入职场的新人&#xff0c;还是工作了一段时间的老人&#xff0c;都会对编写测试用例感到困扰&#xff1f;例如&#xff1a; 如何编写测试用例&#xff1f; 作为一个测试新人&#xff0c;刚开始接触测试&#xff0c;对于怎么写测试用例很是头疼&#xff0c;无法…

Apple主推的智能家居是什么、怎么用?一篇文章带你从零完全入门 HomeKit

如果你对智能家居有所了解&#xff0c;那应该或多或少听人聊起过 HomeKit。由 Apple 开发并主推的的 HomeKit 既因为产品选择少、价格高而难以成为主流&#xff0c;又因其独特的优秀体验和「出身名门」而成为智能家居领域的焦点。HomeKit 究竟是什么&#xff1f;能做什么&#…

供应链的有效管理,分析指标有哪些

对于企业而言&#xff0c;供应链是一个很复杂的、体系化的生态系统&#xff0c;从原材料、到供应商、到生产、仓库、物流&#xff0c;最后到达经销商或者最终客户那里&#xff0c;这个链条很长。相关的分析指标也有很多&#xff0c;在这些指标里面也有非常多可以扩展、延申的内…

Android 系统的启动流程

前言&#xff1a;从开机的那一刻&#xff0c;到开机完成后launcher将所有应用进行图标展示的这个过程&#xff0c;大概会有哪一些操作&#xff1f;执行了哪些代码&#xff1f;作为Android开发工程师的我们&#xff0c;有必要好好的梳理一遍。既然要梳理Android系统的启动流程&a…

Python-scatter散点图及颜色大全

# -*- coding: utf-8 -*- import numpy as np import matplotlib.pyplot as pltplt.rcParams[font.sans-serif][SimHei] plt.rcParams[axes.unicode_minus] False #matplotlib画图中中文显示会有问题&#xff0c;需要这两行设置默认字体plt.xlabel(X) plt.ylabel(Y) plt.xlim…

人工智能——离线情况下自动给视频添加字幕,支持中文,英文,日文等等

前言 最近打开百度网盘&#xff0c;看到播放视频有一个AI字幕功能&#xff0c;心情非常激动&#xff0c;看视频的同时可以看自动生成的字幕&#xff0c;防止听不清视频中人物的话语 然而不是SVIP,我试用过了之后就没有这个功能选项了 我在想&#xff0c;如果随便哪一个“免费”…

Windows 安装RocketMQ

文章目录一、RocketMQ是什么&#xff1f;二、准备工作1.环境要求2.下载与解压3.启动MQ4. 测试是否成功启动三、安装管理端1. 代码下载2. 修改配置文件3. 启动MQ客户端jar包四、rocketMQ代码的使用入门五、问题记录1. 启动mqbroker.cmd没有反应2.消费者重复消费消息一、RocketMQ…

二叉搜索树实现

树的导览 树由节点&#xff08;nodes&#xff09;和边&#xff08;edges&#xff09;构成&#xff0c;如下图所示。整棵树有一个最上端节点&#xff0c;称为根节点&#xff08;root&#xff09;。每个节点可以拥有具有方向的边&#xff08;directed edges&#xff09;&#xf…

第51天|LeetCode503.下一个更大元素 II、LeetCode42. 接雨水

1.题目链接&#xff1a;下一个更大元素 II 题目描述&#xff1a; 给定一个循环数组 nums &#xff08; nums[nums.length - 1] 的下一个元素是 nums[0] &#xff09;&#xff0c;返回 nums 中每个元素的 下一个更大元素 。 数字 x 的 下一个更大的元素 是按数组遍历顺序&#…

Android kotlin 组件间通讯 - LiveEventBus 及测试(更新中)

<<返回总目录 文章目录 一、LiveEventBus是什么二、测试一、LiveEventBus是什么 LiveEventBus是Android中组件间传递消息,支持AndroidX,Event:事件,Bus:总线 范围全覆盖的消息总线解决方案 进程内消息发送App内,跨进程消息发送App之间的消息发送更多特性支持 免配…