前端 TS

  • 类型:

    类型例子描述
    number1, -33, 2.5任意数字
    string‘hi’, “hi”, hi任意字符串
    booleantrue、false布尔值true或false
    字面量其本身限制变量的值就是该字面量的值
    any*任意类型
    unknown*类型安全的any
    void空值(undefined)没有值(或undefined)
    never没有值不能是任何值,只能抛出异常
    object{name:‘孙悟空’}任意的JS对象
    array[1,2,3]任意JS数组
    tuple[4,5]元素,TS新增类型,固定长度数组
    enumenum{A, B}枚举,TS中新增类型
  • 用法

    • number

      let decimal: number = 6;
      let hex: number = 0xf00d;
      let big: bigint = 100n;
      
    • boolean

      let isDone: boolean = false;
      
    • string

      let color: string = "blue";
      color = 'red';
      
    • 字面量

    • 也可以使用字面量去指定变量的类型,通过字面量可以确定变量的取值范围

      let color: 'red' | 'blue' | 'black';
      let num: 1 | 2 | 3 | 4 | 5;
      
    • any

      let d: any = 4;
      d = 'hello';
      d = true;
      
    • unknown

      let notSure: unknown = 4;
      notSure = 'hello';
      
    • void

      let unusable: void = undefined;
      function fn(): void{}
      function fn(): void {
         return undefined
      }
      
    • never

      function error(message: string): never {
         throw new Error(message);
      }
      
    • object(没啥用)

      let obj: object = {};
      
    • array

      let list: number[] = [1, 2, 3];
      let list: Array<number> = [1, 2, 3];
      
    • tuple

      let x: [string, number];
      x = ["hello", 10]; 
      
    • enum

      enum Color {
         Red,   // 0
         Green, // 1
         Blue,  // 2
      }
      let c: Color = Color.Green;
      
      enum Color {
         Red = 1,  // 1
         Green,    // 2
         Blue,     // 3
      }
      let c: Color = Color.Green;
      
      enum Color {
         Red = 1,    // 1
         Green = 2,  // 2
         Blue = 4,   // 4
      }
      let c: Color = Color.Green;
      
  • 断言

          //写法1
          let someValue: unknown = "this is a string";
          let strLength: number = (someValue as string).length;
          //写法2
          let someValue: unknown = "this is a string";
          let strLength: number = (<string>someValue).length;
          ```
    
  • 接口

    • 接口的作用类似于没有实际值的抽象类
    • 可以用于定义对象,方法的参数/返回值,接口(使用extends关键字),类(使用implements关键字)的结构
      //对象
      interface Info {
         name: string
         age: number
         say?: () => void
      }
      
      const user: Info = {
         name: '张三',
         age: 18,
         say: () => {
            console.log(`我叫${this.name}`)
         }
      }
      //方法的参数和返回值
      interface sum {
         (a: number, b: number): number
      }
      
      const add: sum = (a, b) => {
         return a + b;
      }
      sum(1, 2)
      // 接口
      interface Person{
         name: string;
         say():void;
      }
      interface man extends Person{
         eat():void;
      }
      // 类
      interface Person{
         name: string;
         say():void;
      }
      interface Student{
         hello():void;
      }
      // 同时执行多个接口,用`,`隔开
      class Student implements Person,Student{
         constructor(public name: string) {}
         say() {
            console.log(`我叫${this.name}`);
         }
         hello() {
            console.log(`我是一个学生`);
         }
      }
      
  • Class (链接: link)

  • 泛型(链接:link)

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【副本向】Lua副本逻辑

副本生命周期 OnCopySceneTick() 子线程每次心跳调用 --副本心跳 function x3323_OnCopySceneTick(elapse)if x3323_g_IsPlayerEnter 0 thenreturn; -- 如果没人进入&#xff0c;则函数直接返回endif x3323_g_GameOver 1 thenif x3323_g_EndTick > 0 thenx3323_CountDown…

简化Transformer模型,以更少的参数实现更快的训练速度

在深度学习领域&#xff0c;Transformer模型因其卓越的性能而广受欢迎&#xff0c;但其复杂的架构也带来了训练时间长和参数数量多的挑战。ETH Zurich的研究人员Bobby He和Thomas Hofmann在最新研究中提出了一种简化的Transformer模型&#xff0c;通过移除一些非必要的组件&…

STM32——GPIO篇

技术笔记&#xff01; 1. 什么是GPIO&#xff1f; GPIO是通用输入输出端口&#xff08;General-purpose input/output&#xff09;的英文简写&#xff0c;是所有的微控制器必不可少的外设之一&#xff0c;可以由STM32直接驱动从而实现与外部设备通信、控制以及采集和捕获的功…

wordpress子比主题美化-为图文列表封面添加动态缩略图特效 多种效果演示

wordpress子比主题-为图文列表文章封面添加动态缩略图特效 给自己子比主题加一个列表文章封面添加动态缩略图 直接复制以下代码&#xff0c;添加到主题自定义CSS代码中即可&#xff0c;下图为效果演示 wordpress子比主题-为图文列表文章封面添加动态缩略图特效 给自己子比主题…

MySQL①——数据库与表格的创建

今日任务&#xff1a; 创建一个名为“db_classes”的数据库 创建一行名为“db_hero”的表 将四大名著中的常见人物插入这个英雄表 数据库的创建与删除 create 命令&#xff08;创建&#xff09;&#xff1a; create database 数据库名&#xff1b;#参数默认create database …

Spring MVC(上)

initApplicationEventMulticaster为上下文初始化 simpleApplicationEventMulticaster怎么处理广播事件的 refisterListeners注册监听器 finishBeanFactoryInitialization初始化非延迟bean 惰性初始化 dispatcherServlet的初始化 servletConfigPropertyValues创建propertyValues…

虚拟化技术 安装并配置ESXi服务器系统

安装并配置ESXi服务器系统 一、实验目的与要求 1.掌握创建VMware ESXi虚拟机 2.掌握安装VMware ESXi系统 3.掌握配置VMware ESXi系统的管理IP 4.掌握开启VMware ESXi的shell和ssh功能的方法 二、实验内容 1.安装VMware workstation 15或更高版本 2.创建VMware ESXi虚拟…

软件杯 深度学习的动物识别

文章目录 0 前言1 背景2 算法原理2.1 动物识别方法概况2.2 常用的网络模型2.2.1 B-CNN2.2.2 SSD 3 SSD动物目标检测流程4 实现效果5 部分相关代码5.1 数据预处理5.2 构建卷积神经网络5.3 tensorflow计算图可视化5.4 网络模型训练5.5 对猫狗图像进行2分类 6 最后 0 前言 &#…

分布式事务—> seata

分布式事务之Seata 一、什么是分布式事务&#xff1f; 分布式事务是一种特殊类型的事务&#xff0c;它涉及多个分布式系统中的节点&#xff0c;包括事务的参与者、支持事务的服务器、资源服务器以及事务管理器。 在分布式事务中&#xff0c;一次大型操作通常由多个小操作组成…

排序算法--直接选择排序

前提&#xff1a; 选择排序&#xff1a;选择排序(Selection sort)是一种比较简单的排序算法。它的算法思想是每一次从待排序的数据元素中选出最小(或最大)的一个元素&#xff0c;存放在序列的起始位置&#xff0c;直到全部待排序的数据元素排完。 话不多说&#xff0c;直接放图…

ResponseHttp

文章目录 HTTP响应详解使用抓包查看响应报文协议内容 Response对象Response继承体系Response设置响应数据功能介绍Response请求重定向概述实现方式重定向特点 请求重定向和请求转发比较路径问题Response响应字符数据步骤实现 Response响应字节数据步骤实现 HTTP响应详解 使用抓…

Web前端一套全部清晰 ⑥ day4 CSS.1 基础选择器、文字控制属性

后来的我不在抱怨 所有的事与愿违都是我能力或者判断力不足 仅此而已 —— 24.5.1 一、CSS定义 1. 将CSS放在html文件的<style>标签中 层叠样式表(Cascading style Sheets&#xff0c;缩写为 CSS)&#xff0c;是一种 样式表 语言&#xff0c;用来描述 HTML 文档的呈现(美…

LeetCode 面试经典150题 28.找出字符串中第一个匹配项的下标

题目&#xff1a;给你两个字符串 haystack 和 needle &#xff0c;请你在 haystack 字符串中找出 needle 字符串的第一个匹配项的下标&#xff08;下标从 0 开始&#xff09;。如果 needle 不是 haystack 的一部分&#xff0c;则返回 -1 。 思路&#xff1a;暴力&#xff08;…

Pyside6详细使用教程python之GUI开发

1、首先需要安装Pyside6&#xff0c;终端执行命令&#xff1a; pip3.10 install pyside6 2、你们的一般是 pip install pyside6 2、如下代码创建一个简易程序导入必要的模块 import sys from PySide6.QtWidgets import QApplication, QWidget, QVBoxLayout, QPushButton,…

【docker】常用的Docker编排和调度平台

常用的Docker编排和调度平台 Kubernetes (K8s): Kubernetes是目前市场上最流行和功能最全面的容器编排和调度平台。它由Google开发并开源&#xff0c;现由CNCF&#xff08;云原生计算基金会&#xff09;维护。Kubernetes设计用于自动化容器部署、扩展和管理&#xff0c;支持跨…

出现nan nan

试着修改训练集大小或者batch_size大小&#xff0c;令训练集大小为batch_size的整数倍&#xff0c;不行 的话&#xff0c;看环境问题

8.k8s中网络资源service

目录 一、service资源概述 二、service资源类型 1.ClusterIP类型 2.service的nodeport类型 3.service的loadbalancer类型&#xff08;了解即可&#xff09; 4.service的externalname类型&#xff08;了解即可&#xff09; 三、nodeport的端口范围设置和svc的endpoint列表 1.修…

Jupyter Notebook魔术命令

Jupyter Notebook是一个基于网页的交互式笔记本&#xff0c;支持运行多种编程语言。 Jupyter Notebook 的本质式一个Web应用程序&#xff0c;便于创建和共享文学化程序文档&#xff0c;支持实现代码&#xff0c;数学方程&#xff0c;可视化和markdown。用途包括&#xff1a;数据…

Redis 实战2

系列文章目录 本文将从字典的实现、哈希算法、解决键冲突、rehash、渐进式rehash几方面来阐述 Redis 实战Ⅱ 系列文章目录字典的实现哈希算法解决键冲突rehash渐进式 rehash渐进式 rehash 执行期间的哈希表操作 字典 API总结 字典的实现 Redis 的字典使用哈希表作为底层实现&…

解决layui的bug 在layui tree 组件中 禁用选中父节点后自动选中子节点功能

最近做权限管理后台&#xff0c;用了layui tree 组件&#xff0c;发现选中了父节点后&#xff0c;自动选中了子节点。不满足现实业务需求。所以微调了下源代码。 在用树形组件中&#xff0c;在用文档中 tree.setChecked(demoId, [2, 3]); //批量勾选 id 为 2、3 的节点 用这句…