面向JS程序员的TypeScript

news2024/11/18 12:31:59

定义类型

你可以在 JavaScript 中使用多种设计模式。 但是,某些设计模式使得自动推断类型变得困难(例如,使用动态编程的模式)。 为了涵盖这些情况,TypeScript 支持 JavaScript 语言的扩展,它为你提供了告诉 TypeScript 类型应该是什么的地方。

例如,要创建一个包含 name: stringid: number 的推断类型的对象,你可以编写:

const user = {
	name: "Kevin",
	id: 0,
}

你可以使用interface声明明确描述此对象的形状:

interface User {
    name: string,
    id: number
}

然后,你可以在变量声明后使用类似: TypeName的语法来声明 JavaScript 对象符合新interface的形状:

const user: User = {
    name: "Kevin",
    id: 0,
}

如果你提供的对象与你提供的接口不匹配,TS会警告你
在这里插入图片描述
由于JS支持类和面向对象编程,因此TS也支持:

interface User {
    name: string,
    id: number
}

class UserAccount {
    name: string;
    id: number;

    constructor(name: string, id: number) {
        this.name = name;
        this.id = id;
    }
}

const user2: User = new UserAccount("Book", 1)

组合类型

使用 TypeScript,你可以通过组合简单类型来创建复杂类型。 有两种流行的方法可以做到这一点: 联合和泛型。

联合

使用联合,你可以声明一个类型可以是多种类型之一。 例如,你可以将 boolean 类型描述为 truefalse

type MyBool = true | false;

注意: 如果将鼠标悬停在上面的 MyBool 上,你会看到它被归类为 boolean。 这是结构类型系统的一个属性。 更多内容请见下文。
在这里插入图片描述
联合类型的一个流行用例是描述允许值是的stringnumber字面 的集合:

type WindowStates = "open" | "closed" | "minimized";
type LockStates = "locked" | "unlocked";
type PositiveOddNumbersUnderTen = 1 | 3 | 5 | 7 | 9;

联合也提供了一种处理不同类型的方法。 例如,你可能有一个接受 arraystring 的函数:

function getLength(obj: string | string[]) {
  return obj.length;
}

泛型

泛型为类型提供变量。 一个常见的例子是数组。 没有泛型的数组可以包含任何东西。 具有泛型的数组可以描述数组包含的值。

type StringArray = Array<string>;
type NumberArray = Array<number>;
type ObjectWithNameArray = Array<{ name: string }>;

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

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

相关文章

YOLOv5改进实战 | 更换主干网络Backbone之轻量化网络EMO,结合 CNN 和 Transformer 的现代倒残差移动模块设计

前言 传统的YOLOv5系列中,Backbone采用的是较为复杂的C3网络结构,这使得模型计算量大幅度的增加,检测速度较慢,应用受限,在某些真实的应用场景如移动或者嵌入式设备,如此大而复杂的模型时难以被应用的。为了解决这个问题,本章节通过采用EMO轻量化主干网络作为Backbone的…

Python+unittest+requests接口自动化测试框架搭建 完整的框架搭建过程

首先配置好开发环境&#xff0c;下载安装Python并下载安装pycharm&#xff0c;在pycharm中创建项目功能目录。如果不会的可以百度Google一下&#xff0c;该内容网上的讲解还是比较多比较全的&#xff01; 大家可以先简单了解下该项目的目录结构介绍&#xff0c;后面会针对每个文…

黑豹程序员-架构师学习路线图-百科:MVC的演变终点SpringMVC

MVC发展史 在我们开发小型项目时&#xff0c;我们代码是混杂在一起的&#xff0c;术语称为紧耦合。 如最终写ASP、PHP。里面既包括服务器端代码&#xff0c;数据库操作的代码&#xff0c;又包括前端页面代码、HTML展现的代码、CSS美化的代码、JS交互的代码。可以看到早期编程就…

mysql反斜杠多次转义简述

概述 通常在业务中会用正则/like去匹配一些数据.如果数据中有反斜杠&#xff0c;或者是用的正则语句。 那么在写sql的时候就需要转义下反斜杠&#xff0c;转义的时候有几个隐藏问题需要注意。 使用like做where条件 如下使用like要查询这两条数据的时候&#xff0c;需要用8个…

Android音视频开发之基础知识

一、视频文件 1、视频格式 常见格式&#xff1a;mp4、mkv、flv 封装的数据&#xff1a;音频码流、视频码流 常用工具&#xff1a; [FFmpeg下载]:https://ffmpeg.org/download.html 下载、安装并配置环境变量 ffmpeg.exe 视频编解码 ffplay.exe 播放器库 ffprobe.exe 音视频分…

【三:Spring整合Mybatis】

目录 Spring整合Mybatis&#xff08;基于xml文件&#xff09;1 、项目的大体框架前期准备1.2 、使用Navicat在数据库中创建一张表account1.3、 在pom.xml文件中加入maven&#xff08;依赖的配置&#xff09;1.4、配置相应的数据库连接&#xff0c;以及扫描相应的dao层 编写实体…

Unity中Shader实现UI流光效果

文章目录 前言一、实现思路1&#xff1a;1、采集两张贴图&#xff0c;一张是主纹理&#xff0c;一张是扫光纹理2、在 v2f 定义一个二维变量 “uv2” 来存放 uv 偏移后的值3、在顶点着色器中&#xff0c;仿照之前的 uv 流动效果,与 _Time相乘后存放于 uv2 中4、最后&#xff0c;…

微信小程序中封装请求,使用Async await方法,将异步请求变为同步请求方法

介绍 微信小程序中&#xff0c;很多 API都是异步的&#xff0c;无法同步处理。可以使用高级封装&#xff0c;通过async await方法来同步处理。 方法 在小程序右上角的 详情 里选择 本地设置 , 勾选 ES6转ES5&#xff0c;如下所示&#xff1a; 由于 Async Await 是 ES7语法&a…

Boost.Beast和C++编写程序

以下是一个使用Boost.Beast和C编写的爬虫程序&#xff0c;用于爬取。此程序使用了proxy的代码。 #include <iostream> #include <string> #include <boost/asio.hpp> #include <boost/beast.hpp> ​ std::string get_audio_url(const std::string&…

第十七章 Java连接数据库

1.打卡“命令提示符”&#xff0c;用管理员身份运行 2.登录MySQL 3.创建库和表 4.使用Java命令查询数据库操作 5.右击——点击“Build Path”——选择第四个——找到包的位置——导入成功 一、创建java项目 二、连接数据库 1.注册驱动 2.获取链接 3.获取statment对象 4.…

docker命令实例(举例子学习)

docker命令实例 实例1 docker build -t linksoul/chinese-llama2-chat .实例2 docker run --gpus all --ipchost --ulimit memlock-1 --ulimit stack67108864 --rm -it -v pwd/LinkSoul:/app/LinkSoul -p 7860:7860 linksoul/chinese-llama2-chat实例3 docker run -it -p 78…

QT串口接收数据并进行波形显示(含源码)

**使用QT在串口调试助手基础上实现波形显示&#xff08;含源码&#xff09; 评论比较多留言需要源码的&#xff0c;逐个发邮箱比较麻烦也不能及时回复&#xff0c;现将源码上传至链接&#xff08;无需积分下载&#xff09;https://download.csdn.net/download/m0_51294753/877…

Jupyter Notebook 设置黑色背景主题

Jupyter Notebook 设置黑色背景主题 # 包安装 pip install jupyterthemes -i https://mirrors.aliyun.com/pypi/simple pip install --upgrade jupyterthemes # 查看可用主题 jt -l # monokai暗背景&#xff0c;-f(字体) -fs(字体大小) -cellw(占屏比或宽度) -ofs(输出段的字…

自己DIY一个模拟多按钮电路

普通按键电路原理&#xff1a; 一般使用的按键原理图如下图所示&#xff0c;由按键、上拉电阻和消抖滤波电容组成。按键断开时KeyIin1处电压被上拉到5V&#xff0c;当按键闭合时把KeyIin1电压拉到0V&#xff0c;与按键并联的电容起到滤除按键按下与弹起时的高频信号。 如果在电…

让uniGUI支持https

今天在专家的帮助下&#xff0c;成功的让uniGUI支持https了。 首先&#xff0c;去申请个**的证书。我同事去阿里申请的&#xff0c;申请回是一个zip文件&#xff0c;里面有两个文件&#xff0c;一个扩展是per&#xff0c;一个key 然后&#xff0c;把这两个证书文件放到uniGUI…

【LeetCode】48. 旋转图像

1 问题 给定一个 n n 的二维矩阵 matrix 表示一个图像。请你将图像顺时针旋转 90 度。 你必须在 原地 旋转图像&#xff0c;这意味着你需要直接修改输入的二维矩阵。请不要 使用另一个矩阵来旋转图像。 示例 1&#xff1a; 输入&#xff1a;matrix [[1,2,3],[4,5,6],[7,8…

京东数据平台(京东数据分析)2023年9月京东冰箱行业品牌销售排行榜!

鲸参谋监测的京东平台9月份冰箱市场销售数据已出炉&#xff01; 9月份&#xff0c;大家电行业整体下滑&#xff0c;而冰箱作为大家电市场中的重点品类&#xff0c;受行业趋势变动的影响&#xff0c;冰箱销售市场也同样下滑。鲸参谋数据显示&#xff0c;9月在京东平台上&#xf…

浏览器下载打开java文件 出现一般异常错误提示你的安全设置已阻止自签名应用程序

环境&#xff1a; win10专业版 谷歌浏览器 问题描述&#xff1a; 浏览器下载打开java文件 提示你的安全设置已阻止自签名应用程序 解决方案&#xff1a; 1.打开控制&#xff0c;面板找到java 找到安全 &#xff0c; 将安全级别调至“中” 2.把例外站点也添加一下 3.重启…

总结关于计算机msvcp120.dll丢失的解决方法

在计算机的使用过程中&#xff0c;我们可能会遇到各种各样的问题&#xff0c;其中之一就是“msvcp120.dll文件丢失”。这是一个非常常见的问题&#xff0c;可能会影响到许多软件的正常运行。本文将详细介绍6种不同的解决方法&#xff0c;帮助大家解决这个问题。 首先&#xff…

No valid NAT64 prefix

As an AI language model, I do not have access to your network configuration or settings. However, in general, the error message “No valid NAT64 prefix” indicates that there is a problem with the configuration of IPv6 to IPv4 translation. NAT64 is a mech…