深入浅出 Typescript

TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准(ES6 教程)。

TypeScript 由微软开发的自由和开源的编程语言。

TypeScript 设计目标是开发大型应用,它可以编译成纯 JavaScript,编译出来的 JavaScript 可以运行在任何浏览器上。

文章目录

  • 1 TypeScript VS JavaScript
  • 2 TypeScript基础
    • 2.1 TS基础-基础类型
    • 2.2 TS基础-函数类型
    • 2.3 TS基础-interface
    • 2.4 TS基础-类
  • 3 TypeScript 进阶
    • 3.1 TS进阶-高级类型
    • 3.2 TS进阶-泛型-什么时候需要泛型?
    • 3.3 TS进阶-泛型-什么时候需要泛型?
    • 3.4 TS进阶-泛型-基本使用
    • 3.5 TS进阶-泛型工具类型-基础操作符
    • 3.6 TS进阶-泛型工具类型-常用工具类型
  • 4 TypeScript 实战
    • 4.1 TS实战-声明文件
    • 4.2 TS实战-泛型约束后端接口类型

1 TypeScript VS JavaScript

在这里插入图片描述

TypeScriptJavaScript
JavaScript 的超集,用于解决大型项目的代码复杂性一种脚本语言,用于创建动态网页
强类型,支持静态和动态类型动态弱类型语言
可以在编译期间发现并纠正错误只能在运行时发现错误
不允许改变变量的数据类型变量可以被赋值成不同类型

2 TypeScript基础

2.1 TS基础-基础类型

  1. boolean、number、string
  2. undefined、null
  3. any、unknown、void
  4. never
  5. 数组类型 []
  6. 元组类型 tuple
// 举个例子
function test(x:string | number):boolean {
    if (typeof x === 'string') {
        return true;
    } else if (typeof x === 'number') {
        return false;
    }
    return throwError('参数格式不对');
}

function throwError(message:string):never {
    throw new Error(message);
}

2.2 TS基础-函数类型

定义:TS定义函数类型时要定义输入参数类型和输出类型

输入参数:参数支持可选参数和默认参数

输出参数:输出可以自动推断,没有返回值时,默认为 void 类型

函数重载:名称相同但参数不同,可以通过重载支持多种类型

function add(x:number[]):number
function add(x:string[]):string
function add(x:any[]):any {
    if (typeof x[0] === 'string') {
        return x.join()
    }
    if (typeof x[0] === 'number') {
        return x.reduce((acc,cur) => acc + cur)
    }
}

2.3 TS基础-interface

定义:接口是为了定义对象类型

特点:

  • 可选属性:?
  • 只读属性:readonly
  • 可以描述函数类型
  • 可以描述自定义属性

总结:接口非常灵活duck typing

interface RandomKey {
    [propName:string]:string
}

const obj:RandomKey = {
    a:'hello',
    b:'world',
    c:'typescript',
}

2.4 TS基础-类

定义:写法和JS差不多,增加了一些定义

特点:

  • 增加了 public、private、protected 修饰符
  • 抽象类:
    • 只能被继承,不能被实例化
    • 作为基类,抽象方法必须被子类实现
  • interface:约束类,使用implements关键字

3 TypeScript 进阶

3.1 TS进阶-高级类型

  1. 联合类型 |
  2. 交叉类型 &
  3. 类型断言
  4. 类型别名(type VS interface)
    • 定义:给类型起个别名
    • 相同点:
      1. 都可以定义对象或函数
      2. 都允许继承
    • 差异性
      1. interface是TS用来定义对象,type是用来定义别名方便使用;
      2. type可以定义基本类型,interface:不行;
      3. interface可以合并重复声明,type不行;

3.2 TS进阶-泛型-什么时候需要泛型?

官方定义:

软件工程中,我们不仅要创建一致的定义良好的API,同时也要考虑可重用性。

组件不仅能够支持当前的数据类型,同时也能支持未来的数据类型,这在创建大型系统时为你提供了十分灵活的功能。

在像 C# 和 Java 这样的语言中,可以使用泛型来创建可重用的组件,

一个组件可以支持多种类型的数据。这样用户就可以以自己的数据类型来使用组件。

有点晦涩,还是举个栗子。

3.3 TS进阶-泛型-什么时候需要泛型?

在这里插入图片描述

3.4 TS进阶-泛型-基本使用

基本定义:

  1. 泛型的语法是◇里面写类型参数,一般用T表示;
  2. 使用时有两种方法指定类型:
    1. 定义要使用的类型
    2. 通过TS类型推断,自动推导类型
  3. 泛型的作用是临时占位,之后通过传来的类型进行推导;
function print<T>(arg:T):T {
    console.lLog(arg)
    return arg
}
print<string>('hello')  // 定义T为string
print('hello')  // TS类型推断,自动推导类型为string

3.5 TS进阶-泛型工具类型-基础操作符

在这里插入图片描述

3.6 TS进阶-泛型工具类型-常用工具类型

  • Partials:将类型属性变为可选
  • Required:将类型属性变为必选
  • Readonly.:将类型属性变为只读
  • Pick、Record…
type Partials<T> ={
    [P in keyof T]?:T[P];
};

type Required<T> = {
    [P in keyof T]-?:T[P]
};

type Readonly<T> = {
    readonly [P in keyof T]:T[P];
};

4 TypeScript 实战

4.1 TS实战-声明文件

  • declare:三方库需要类型声明文件
  • .dts:声明文件定义
  • @types:三方库TS类型包
  • tsconfig.json:定义TS的配置

4.2 TS实战-泛型约束后端接口类型

在这里插入图片描述

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

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

相关文章

C# OpenCvSharp 去水印 图像修复

效果 项目 VS2010.net4.0OpenCvSharp3 代码 using System; using System.Collections.Generic; using System.ComponentModel; using System.Data; using System.Drawing; using System.Linq; using System.Text; using System.Windows.Forms; using System.IO; using System…

【解放ipad生产力】如何在平板上使用免费IDE工具完成项目开发

我的博客即将同步至腾讯云开发者社区&#xff0c;邀请大家一同入驻&#xff1a;https://cloud.tencent.com/developer/support-plan?invite_code3o19zyy2pneoo 前言 很多人应该会像我一样吧&#xff0c;有时候身边没电脑突然要写项目&#xff0c;发现自己的平板没有一点作用&…

《HeadFirst设计模式(第二版)》第五章代码——单例模式

代码文件目录&#xff1a; 初始版本&#xff1a; package Chapter5_SingletonPattern.origin;/*** Author 竹心* Date 2023/8/5**/public class Singleton {private static Singleton uniqueInstance;private Singleton(){}public static Singleton getInstance(){if(uniqueIn…

C++ 派生类成员的标识与访问——作用域分辨符

在派生类中&#xff0c;成员可以按访问属性分为以下四种&#xff1a; &#xff08;1&#xff09;不可访问成员。这是从基类私有成员继承下来的&#xff0c;派生类或是建立派生类对象的模块都无法访问到它们&#xff0c;如果从派生类继续派生新类&#xff0c;也是无法访问的。 &…

京东开源的、高效的企业级表格可视化搭建解决方案:DripTable

DripTable 是京东零售推出的一款用于企业级中后台的动态列表解决方案&#xff0c;项目基于 React 和 JSON Schema&#xff0c;旨在通过简单配置快速生成页面动态列表来降低列表开发难度、提高工作效率。 DripTable 目前包含以下子项目&#xff1a;drip-table、drip-table-gene…

Qt下开发基于QGIS的应用程序

Qt下开发基于QGIS的应用程序 目的版本说明1、Qt的安装2、MSVC套件与Windows 10 SDK的下载3、QGIS开发有关的库文件下载4、环境搭建5、QGIS开发环境搭建6、展示网页地图 目的 由于有在背景地图上进行动态轨迹&#xff08;曲线&#xff09;显示的需要&#xff0c;故采用QtQGIS的…

MySQL 与MongoDB区别

一、什么是MongoDB呢 ? MongoDB 是由C语言编写的&#xff0c;是一个基于分布式文件存储的开源数据库系统。在高负载的情况下&#xff0c;添加更多的节点&#xff0c;可以保证服务器性能。 MongoDB 旨在为WEB应用提供可扩展的高性能数据存储解决方案。 MongoDB 将数据存储为一…

深入理解ClickHouse跳数索引教程

跳数索引 影响ClickHouse查询性能的因素很多。在大多数场景中&#xff0c;关键因素是ClickHouse在计算查询WHERE子句条件时是否可以使用主键。因此&#xff0c;选择适用于最常见查询模式的主键对于表的设计至关重要。 然而&#xff0c;无论如何仔细地调优主键&#xff0c;不可…

12.物联网操作系统之多任务核心

一。列表及列表项概念以及应用 1.freeRTOS列表介绍 列表项都是由链表生成&#xff0c;想要了解列表项&#xff0c;首先应该把上述的链表都要搞懂。 这是列表项的组件列表。 2.列表及列表项的定义 列表是双向链表构成&#xff0c;原因是双向链表的插入与删除效率高&#xff0c…

第一课-前提-Stable Diffusion 教程

学习 SD 的前提是电脑配置! SD 参考配置: 建议选择台式机 i5 CPU, 内存16GB,N卡 RTX3060, 8G显存以上的配置(最低配) 在此基础上的配置越高越好。 比如,cpu i7 更好,显卡能有 RTX4090 更好,32显存要能有最好,嘿嘿嘿。 如何查看自己的显卡配置? Win+R 输入 “dxdiag…

高斯过程回归 | Matlab实现高斯过程回归预测(Gaussian Process Regression)

文章目录 效果一览文章概述研究内容程序设计参考资料效果一览 文章概述 高斯过程回归 | Matlab实现高斯过程回归多输入单输出预测(Gaussian Process Regression) 研究内容 高斯过程回归(Gaussian Process Regression)是一种基于概率的非参数回归方法,用于建模输入变量和目…

TestNG中实现多线程并行,提速用例的执行时间

TestNG是一个开源自动化测试工具&#xff0c;TestNG源于Junit&#xff0c;最初用来做单元测试&#xff0c;可支持异常测试&#xff0c;忽略测试&#xff0c;超时测试&#xff0c;参数化测试和依赖测试。 除了单元测试&#xff0c;TestNG的强大功能让他在接口和UI自动化中也占有…

vue中vue-lazyload报错

1.问题&#xff1a; 说明&#xff1a;也就是版本不兼容&#xff0c;我安装的是vue2,因此需要 "vue-lazyload": "^1.2.6"或者更低 2.解决 npm i vue-lazyload1.2.6

在tensorflow分布式训练过程中突然终止(终止)

问题 这是为那些将从服务器接收渐变的员工提供的培训功能&#xff0c;在计算权重和偏差后&#xff0c;将更新的渐变发送到服务器。代码如下&#xff1a; def train():"""Train CIFAR-10 for a number of steps."""g1 tf.Graph()with g1.as_de…

shell脚本自动打包部署

1、安装git 2、使用Git克隆代码 3、安装Maven &#xff08;1&#xff09; tar -zxvf ** 解压文件 &#xff08;2&#xff09;修改配置 &#xff08;3&#xff09;source /etc/profile 重新加载一下文件 &#xff08;4&#xff09;mvn -version 查看版本号 已经安装成…

使用Python将Word文档转换为PDF的方法

摘要&#xff1a; 文介绍了如何使用Python编程语言将Word文档转换为PDF格式的方法。我们将使用python-docx和pywin32库来实现这个功能&#xff0c;这些库提供了与Microsoft Word应用程序的交互能力。 正文&#xff1a; 在现实生活和工作中&#xff0c;我们可能会遇到将Word文…

【CSS3】CSS3 2D 转换 - scale 缩放 ② ( 使用 scale 设置缩放代码示例 - 图片缩放示例 )

文章目录 一、需求分析二、代码分析三、代码示例四、执行结果 一、需求分析 默认状态下 , 界面中显示一张图片 : 当鼠标移动到 图片上时 , 显示如下效果 , 其中图片是逐渐放大的 , 有一个过渡 : 二、代码分析 上述盒子模型布局结构如下 , div 是外层父容器 , a 标签用于设置链接…

uniapp封装request请求

在基础文件里面创建一个api文件 在创建两个 js文件 http.js 里面封装 request 请求 let baseUrl https://white.51.toponet.cn; //基地址 export const request (options {}) > {//异步封装接口&#xff0c;使用Promise处理异步请求return new Promise((resolve, reject…

CNN成长路:从AlexNet到EfficientNet(01)

一、说明 在 10年的深度学习中&#xff0c;进步是多么迅速&#xff01;早在 2012 年&#xff0c;Alexnet 在 ImageNet 上的准确率就达到了 63.3% 的 Top-1。现在&#xff0c;我们超过90%的EfficientNet架构和师生训练&#xff08;teacher-student&#xff09;。 如果我们在 Ima…

基于 Debian GNU/Linux 12 “书虫 “的Neptune 8.0 “Juna “来了

导读Neptune Linux 发行版背后的团队发布了 Neptune 8.0&#xff0c;作为这个基于 Debian 的 GNU/Linux 发行版的重大更新&#xff0c;它围绕最新的 KDE Plasma 桌面环境构建。 Neptune 8.0 被命名为 “Juna”&#xff0c;是在Neptune 7.5 发布 11 个月后发布的&#xff0c;也是…