TypeScript知识汇总

news2024/11/17 9:28:33

一、ts简介

1、什么是ts

2、ts增加了什么

 

 二、TypeScript开发环境搭建

 注:如果npm i运行报错,需要以管理员身份运行一次,以上主要就是tsc xxx.ts

三、ts的基本类型——ts相当于是给js可以指定类型

//number、string、boolean等常用类型(小写)
let a :number;//1、可以直接给变量进行类型声明
let b=false;//2、如果变量的声明和赋值是同时进行的,ts可以自动对变量进行类型检测
function sum(a:number,b:number):number{//3、可以给参数加类型、也可以给返回值加类型,如果前后类型不一致,会报错
    return a+b;
}
console.log(sum(123,456));

注:等号后边的是字面量

 字面量

 

 any——自己可以修改任意类型,也可以赋值给任意类型的变量,影响自己也影响他人

 unknow——自己可以修改任意类型,但不能随意赋值给其他类型的变量,会报错,相当于类型安全的any.

 void——表示内有返回值

 never——不会返回结果,比如报错

 object——定义对象的结构

 function——定义函数的结构

 array——数组

tuple—— 元组

enum—— 枚举——可能的情况给列出来,方便用户用

 &——并且

类型的别名

 四、tsconfig.json的配置

tsc xxx.ts -w ——编译并且监视当前ts文件

如果新建一个tsconffg.json,以后直接tsc -w就可以全部文件监视

tsconfig.json文件中的配置

 

{
  "compilerOptions": {
    "allowJs": true,//是否对js文件编译,默认是false
    "checkJs": false,//是否检查js语法符合规范,默认false
    "removeComments": true,//是否将注释也编译到js文件,默认是false
    "preserveConstEnums": true,
    "moduleResolution":"node",
    "sourceMap": true,
    "baseUrl": "./",
    "noEmit": false,//不生成编译后的文件
    "noEmitOnError": true,//当有错误时候不生成编译后的文件
    "alwaysStrict": false,//设置编译后的文件时候使用严格模式,默认是false
    "noImplicitAny": false,//是否允许隐式any,默认false
    "noImplicitThis": true,//不允许不明确类型的this
    "strictNullChecks": true,//需要严格检查空值
    "paths": {
      "@/*": ["src/*"]
    },
    "target": "esnext",//指定编译的Es版本,默认是es3,现在是最新的版本
    "module": "esnext",//指定要使用的模块化规范,现在是最新的
    "strict": false,//所有严格检查的开关,//默认false关
    "jsx": "preserve",
    "allowSyntheticDefaultImports": true,
    "typeRoots": [
			"src/vue.config"
		],
    "types": ["vite/client"],

    "outDir":"./dist",//指定编译后的文件所在的位置
   // "outFile":"./dist/app.js",//将所有q全局作用域下的ts文件代码合并为一个js文件
   
  },
  "include": [//哪些ts文件需要被编译
    "src/**/*.ts",//src下的任意文件下的ts后缀文件
    "src/**/*.d.ts",
    "src/**/*.tsx",
    "src/**/*.vue",
    "vite.config.ts"
  ],
  "exclude": [//不需要被编译的文件,可以写可以不写
    "node_modules"
  ]
}

 五、使用webpack打包ts文件

1、npm init -y——生成package.json

2、npm i -D  webpack   webpack-cli   typescript   ts-loader——下载四个主要包

3、右击文件夹新建webpack.config.js——配置入口出口等

4、新建tsconfig.json——写上边第四条的配置项

5、在package,json文件中写

 6、npm run build——出现下边说明打包成功

六、面向对象——通过对象来操作事物

 七、类——定义了一个对象的结构

类——定义一个类 

 

 继承——继承一个类

 

 

 注:关于继承

继承 class Dog extends Animal{}的作用就是在不修改父类的前提下,去添加自己需要的东西,

并且减少代码数量,

如果和子类添加了和父类中相同的方法,就会把父类的方法覆盖了(方法的重写)

如果在子类中写了构造函数custructor,在子类中必须对父类的构造函数进行调用(super())抽象类——专门用来被子类继承的

 接口——对类建立的规范 

属性的封装——保证属性的安全性,不能直接修改属性,而是通过get和set去按要求修改指定属性

 

 注:public是公共的,在自己和子类中都可以访问和修改

 注:private代表他是A的私有属性,在继承B中访问不到

 注:protected受包含的属性,只能在当前类和当前类的子类中访问,也就是只能在类里边访问,

八、泛型——在定义函数或者是类时,如果遇到类型不明确,就用泛型代替一个变量

 注:T就是我指定的泛型

 注:可以写两个泛型

如何限制泛型范围——利用interface接口来指定规范 

九、Ts思维

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

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

相关文章

[游戏开发][Unreal]项目启动

新建项目时会有 [项目名].uproject文件,鼠标右键该文件点击Switch Unreal Engine version 如果你的 [项目名].uproject文件是个纯白的图标,证明没有关联到Unreal,该怎么办呢 使用搜索工具搜UnrealVersionSelector.exe 或者直接去你的UE5安装目…

在华为外包待了3年,我秃了,但没变强...

我25岁,中级测试,外包,薪资13.5k,人在上海。内卷什么的就不说了,而且人在外包那些高级精英年薪大几十的咱也接触不到,就说说外包吧。 假设以我为界限,25岁一线城市13.5k,那22-24大部…

J.A.Woollam光谱型椭偏仪电源维修M-2000XI

M-2000系列光谱椭圆仪是为满足薄膜表征的需求而设计的。RCE技术结合了旋转补偿器椭圆仪和CCD检测,在几分之一秒内收集整个光谱(数百个波长),并有多种配置。擅长于从原位监测和过程控制到大面积均匀性绘图和通用薄膜表征的椭偏仪。…

mac m1(arm)安装brew(Homebrew)

安装 使用国内脚本安装 /bin/zsh -c "$(curl -fsSL https://gitee.com/cunkai/HomebrewCN/raw/master/Homebrew.sh)"安装完成后使用brew安装tcping试试 brew install tcping发现报错 Error: Cannot install in Homebrew on ARM processor in Intel default prefi…

应急指挥调度系统之指挥中心是由什么构成的

应急指挥调度系统是应急管理的重要组成部分,而指挥中心则是应急指挥系统的控制中枢,可以说是应急指挥调度系统体系中的大脑,应急管理中的所有应急指令都会从指挥中心发出,作为应急指挥系统的控制中枢,应急指挥调度系统…

5款国产优质软件,满足工作效率提升需求,你值得拥有

不少人对国产软件的印象,还停留在各种弹窗、各种捆绑,想要提升工作效率,只能使用国外的软件。今天给大家分享5款国产优质软件,不仅没有各种弹窗、捆绑,还能满足工作效率提升需求。 亿图脑图MindMaster MindMaster是一款…

聊聊如何利用服务定位器模式按需返回我们需要的服务实例

前言 什么是服务定位器模式 服务定位器是一个了解如何提供各种应用所需的服务(或组件)的对象。在服务定位器中,每个服务(或组件)都只有一个单独的实例,并通过ID 唯一地标识。 用这个 ID 就能从服务定位器中…

JVM 调优分析 如何进行JVM调优

文章目录 1.为什么需要进行JVM调优?2.什么情况下可能需要JVM调优3.JVM调优参数4.JVM调优参数设置参考5.JVM内部结构1. 类加载器(Class Loader)2. 运行时数据区(Runtime Data Area)3. 垃圾收集器(Garbage Co…

css常见布局方式

css常见布局方式 0、前言1、两栏布局1.1 浮动 margin1.2 浮动 BFC(overflow: hidden)1.3 定位 margin-left1.4 给父容器设置flex布局,左盒子固定宽度,然后给右子元素设置 flex: 1。1.5 table布局 2、三栏布局2.1 float布局2.2 …

小红书数据分析:流量手到擒来,热点创作大解密!

年中大促618接近尾声,对小红书来说,这次的“反向”营销博得满堂彩。 为了呼吁大家不要冲动消费,线下举办了“反冲动俱乐部”活动,以“365天无理由退货”、“退货的商品可兑换成小红书现金券”等玩法在一众促销信息中呈现差异化内…

如何从Prometheus单独提取个别数据持久化到InfluxDB

背景 首先解释一个问题,为什么会选择让InfluxDB来持久化Prometheus的数据,直接存在Prometheus中不行吗?下面是Claude的回答,我来总结一下: 1)InfluxDB提供了更强大的Flux查询语言,比如提供了复…

长鑫存储面试(部分)

你平时写代码时,如何保证代码可靠、可复用、可扩展、可维护?有总结经验吗,请举例说明。参考答案 by newBing: 编写文档:编写文档是保证代码可维护性的重要手段。文档应该包括代码的设计思路、实现细节、使用方法等。 遵…

NeRF系列(2):NeRF in the wild : Neural Radiance Fields for Unconstrained Photo Collections论文解读与公式推导

NeRF in the Wild: Neural Radiance Fields for Unconstrained Photo Collections 论文:https://openaccess.thecvf.com/content/CVPR2021/papers/Martin-Brualla_NeRF_in_the_Wild_Neural_Radiance_Fields_for_Unconstrained_Photo_CVPR_2021_paper.pdfhttps://op…

pyspark安装教程

pyspark安装教程 一、Windows下配置pyspark环境1.1 JDK下载安装1.2 Scala下载安装1.3 spark下载安装1.4 Hadoop下载安装1.5 pyspark下载安装 二、pyspark原理简介 一、Windows下配置pyspark环境 在python中使用pyspark并不是单纯的导入pyspark包就可以实现的,而是需…

从0到字节跳动30W年薪,我在测试行业“混”的第5个年头····

一些碎碎念 什么都做了,和什么都没做其实是一样的,走出“瞎忙活”的安乐窝,才是避开弯路的最佳路径。希望我的经历能帮助到有需要的朋友。 在测试行业已经混了5个年头了,以前经常听到开发对我说,天天的点点点有意思没…

使用Jmeter读取和使用Redis数据

目录 前言 缓存 Redis服务和客户端安装 Jmeter使用Redis 总结: 前言 消息队列和缓存是目前主流的中间件,我们在日常测试过程中,无论是接口还是压力测试,都会遇到需要处理这些中间件数据的情况。本文以Redis对缓存做一个简单…

精选博客系列|vSphere 8 Update 1 介绍

去年,我们推出了 vSphere 8,这是传统和下一代应用程序的企业工作负载平台,该产品于 2022 年 11 月正式推出。今天,我们很高兴地宣布 vSphere 8 Update 1 版本。通过这个版本,客户可以获得增强的管理员操作效率&#xf…

【QT】QGridLayout的基础使用(添加控件、布局、间距)

目录 0.环境介绍 1.QGridLayout简介: 2.QGridLayout参数介绍 1)添加控件方式 2)添加布局方式 3.例子及代码 1)三行三列 2)有占多行多列的控件 0.环境介绍 windows vscode qt 我使用网格布局的情景是&#x…

深入理解侵入式容器与非侵入式容器(intrusive containers)

再传统的数据结构的实现中,分为侵入式容器和非侵入式容器两种 侵入式容器 这也是教材喜欢使用的数据结构的实现方式 ,将数据结构放入类中,所以先讲这个 非侵入式容器: struct ListNode {ListNode *prev, *next;int value; }; …

五分钟搞懂分布式流控算法

流控是任何一个复杂系统都必须考虑的问题,本文介绍并比较了不同的流控算法,从而帮助我们可以基于系统需求和架构选择合适的方案。原文:Distributed Rate-Limiting Algorithms[1] 当我们设计分布式流控系统(distributed rate-limit…