【面试】typescript

目录

为什么用TypeScript?

TS和JS的区别

控制类成员可见性的访问关键字?

public

protected),该类及其子类都可以访问它们。 但是该类的实例无法访问。

私有(private),只有类的成员可以访问它们。

接口interface与类型别名type

对象

函数

typeof

泛型T

extends

interface extends interface/type

type & interface/type(与联合类型相对,又名交叉类型)

interface(数据结构)

同名接口自动合并

type(类型关系)

类型别名

联合类型:| 或

元祖类型

工具/高级类型Utility Types

Partial :T全部属性变为可选项 ?

Required与Partial相反

Readonly

Pick:T中选K,>

Omit和Pick相反

Extract:T U交集,>

Extract和Exclude相反

判断类型:is


TS4 入门笔记

1.2W字 | 了不起的 TypeScript 入门教程 - 掘金

typescript史上最强学习入门文章(2w字) - 掘金

2022年了,我才开始学 typescript ,晚吗?(7.5k字总结) - 掘金

为什么用TypeScript?

  • 强制类型,防止报错
  • 自动类型推断,保证变量的类型稳定
// let a: string  ->  类型推断
let a = 'hello'
a = 123;   // error
  • 强大的类型系统,包括泛型
  • 支持静态类型。(主要改进)更有利于构建大型应用

代码可维护性=强类型语言(低级错误)+个人素质和团队规范约束(高级错误)

TS和JS的区别

控制类成员可见性的访问关键字?

public

protected),该类及其子类都可以访问它们。 但是该类的实例无法访问。

私有(private),只有类的成员可以访问它们。

TS与java不同,TS默认隐式公共的,

TS符合 JS 的便利性,java默认private,符合安全性

接口interface与类型别名type

对象

interface User {name: string;age: number;
}
等价于
type User = {name: string;age: number;
};const user: User = {name: "John",age: 25
};

函数

interface SetUser {(name: string, age: number): void;
}
等价于
type SetUser = (name: string, age: number) => void;const setUser: SetUser = (name, age) => {// 实际的函数实现console.log(`Setting user: ${name}, ${age}`);
};

typeof

let x = "John";const person: Name<typeof x> = {name: x,
};let div = document.createElement('div');
type B = typeof div

泛型T

interface Name<T> {name: T;
}// 使用 string 类型
const personWithString: Name<string> = {name: "John",
};// 使用 number 类型
const personWithNumber: Name<number> = {name: 25,
};// 定义 Callback 类型
type Callback<T> = (data: T) => void;// Callback 的使用
const stringCallback: Callback<string> = (data) => {console.log(`收到回调数据: ${data}`);
};// 定义 Pair 类型
type Pair<T> = [T, T];!const numberPair: Pair<number> = [42, 23];

extends

interface extends interface/type
interface Name { name: string; }
等价于
type Name = { name: string; } interface User extends Name { age: number; }
type & interface/type(与联合类型相对,又名交叉类型)
interface Name { name: string; } 
等价于
type Name = { name: string; } type User = Name & { age: number };

interface(数据结构)

同名接口自动合并

type(类型关系)

类型别名
type Str = string
type NameLookup = Dictionary<string, Person>; 
联合类型:| 或
元祖类型

数组类型一般是

但有时需要存储不同类型的值

所以可以通过ts特有的元组限制数组元素的个数和类型

工具/高级类型Utility Types

Partial<T> :T全部属性变为可选项 ?

Required与Partial相反

Readonly

Pick<T, K>:T中选K

Omit和Pick相反

type A = {username?: stringage?: numberreadonly gender: string
}type B = Readonly<A>
// Partial(可选)
type C = Partial<A>type D = Pick<A, 'username'|'age'>
//Record(改变类型)
//keyof 操作符可以用来一个对象中的所有 key 值:
type E = Record<keyof A, string>//Required(将可选变为必选)
type F = Required<A>

Extract<T, U>:T U交集

Extract和Exclude相反

判断类型:is

// !!! 使用 is 来确认参数 s 是一个 string 类型
function isString(s): s is string {return typeof s === 'string';
}

「2022」TypeScript最新高频面试题指南 - 掘金

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

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

相关文章

【RT-DETR改进】SIoU、GIoU、CIoU、DIoU、AlphaIoU等二十余种损失函数

一、本文介绍 这篇文章介绍了RT-DETR的重大改进&#xff0c;特别是在损失函数方面的创新。它不仅包括了多种IoU损失函数的改进和变体&#xff0c;如SIoU、WIoU、GIoU、DIoU、EIOU、CIoU&#xff0c;还融合了“Alpha”思想&#xff0c;创造了一系列新的损失函数。这些组合形式的…

信号类型(通信)——最小频移键控(MSK)

系列文章目录 《信号类型&#xff08;通信&#xff09;——仿真》 《信号类型&#xff08;通信&#xff09;——QAM调制信号》 《信号类型&#xff08;通信&#xff09;——QPSK、OQPSK、IJF_OQPSK调制信号》 目录 前言 一、MSK信号特点 1.1、最小频移 1.2、相位连续 二…

数字员工:降本提效,强势助力数智化转型,引领新风潮

随着科技迅猛发展&#xff0c;数字化转型已经渗透到各行各业&#xff0c;在数字化进程中&#xff0c;数字员工以其高效、智能的特性引领着未来工作的新风潮。 1.高度自动化与提升效率—— 数字员工以其高度自动化的特性成为企业工作流程中的得力助手&#xff0c;能够在短时间…

oracle闪回恢复表数据

oracle闪回恢复表数据 1.打开监听和数据库&#xff0c;进入需要操作的表的所属用户下 [oraclemydb ~]$ lsnrctl start [oraclemydb ~]$ sqlplus / as sysdba SQL> startup SQL> conn test/123456 SQL> select * from test1&#xff1b;2.删除任意数据&#xff1a; …

Mybatis代码生成器

【Java代码生成神器】自动化生成Java实体类、代码、增删改查功能&#xff01;点击访问 推荐一个自己每天都在用的Java代码生成器&#xff01;这个网站支持在线生成Java代码&#xff0c;包含完整的Controller\Service\Entity\Dao代码&#xff0c;完整的增删改查功能&#xff01…

超详细的pytest玩转HTML报告:修改、汉化和优化

前言 Pytest框架可以使用两种测试报告&#xff0c;其中一种就是使用pytest-html插件生成的测试报告&#xff0c;但是报告中有一些信息没有什么用途或者显示的不太好看&#xff0c;还有一些我们想要在报告中展示的信息却没有&#xff0c;最近又有人问我pytest-html生成的报告&a…

可逆图像去噪——InvDN模型推理测试

性能&#xff1a;InvDN的去噪性能优于多数现有的竞争模型&#xff0c;在SIDD数据集上实现了新的先进的结果&#xff0c;同时享受更少的运行时间。这表明该方法在处理真实噪声问题上具有很高的效率和准确性。 模型大小&#xff1a;此外&#xff0c;InvDN的大小远小于DANet&…

除了Whimsical,这4款在线协作软件也值得推荐!干货建议收藏。

Whimsical介绍 Whimsical是一款流行的在线协作工具&#xff0c;旨在帮助团队成员更好地进行头脑风暴、设计和规划工作。它提供了多种工具&#xff0c;包括流程图、线框图、思维导图和便签板&#xff0c;以满足团队在不同阶段的需求。Whimsical的界面简洁直观&#xff0c;易于使…

MySQL--主从复制

主从复制 主从复制是指将主数据库的DDL和DML操作通过二进制日志传到从库服务器中&#xff0c;然后在从库上对这些日志重新执行&#xff08;也叫重做&#xff09;&#xff0c;从而使得从库和主库的数据保持同步。 MySQL支持一台主库同时向多台从库进行复制&#xff0c;从库同时…

OpenCV | 图像梯度sobel算子、scharr算子、lapkacian算子

import cv2 #opencv读取的格式是BGR import numpy as np import matplotlib.pyplot as plt#Matplotlib是RGB %matplotlib inline 1、sobel算子 img cv2.imread(pie.png,cv2.IMREAD_GRAYSCALE) cv2.imshow(img,img) cv2.waitKey() cv2.destroyAllWindows() pie图片 dst cv2.S…

【VScode】代码文件注释,User snippets 配置 Python/C++ , 其他语言类似

在代码文件头部&#xff0c;输入 header &#xff0c;回车&#xff0c;自动生成文件注释 Python {"HEADER": {"prefix": "header","body": ["# -*- encoding: utf-8 -*-", "\"\"\"","Date …

HCIP---MPLS---VPN

文章目录 前言一、pandas是什么&#xff1f;二、使用步骤 1.引入库2.读入数据总结 前言 MPLS协议使用标签交换来转发报文&#xff0c;最初是为了提高IP报文转发效率而设计的&#xff0c;但是后来随着硬件性能的提升&#xff0c;路由表已经不再是路由表/防火墙的转发瓶颈&#…