从零开始学习Vue3:掌握前端开发的核心技能——更新中

news2024/11/22 5:46:38

这里写目录标题

  • 一、了解ts
    • 1、ts是js的超集
  • 二、掌握ts基本写法
    • 1、数据类型
    • 2、对象使用
    • 3、类
    • 4、多态
    • 5、类修饰符
    • 6、存储器
    • 7、抽象类

一、了解ts

1、ts是js的超集

即你可以在ts中使用原生js语法:JavaScript + 更多功能 = TypeScript**
js是弱类型语言,而ts对此进行了加强
在这里插入图片描述

二、掌握ts基本写法

1、数据类型

(1)基本数据类型

js的基本数据类型:String、Number、NULL、Undefined、Boolean、Symbol、BigInt
ts增加了写法

1.1数字类型

//表示这个变量num是number类型的,如果赋值不是number会报错,其他类型一样
let num: number = 10   

let num1 : number = 0b1010 //二进制

1.2布尔类型

let isD: boolean = true
isD= false

1.3字符串

let str: string = 'a'
let str2: string = 'b'
//模板语法
console.log(`${str},${str1}`) //打印  a,b

…其他类型

1.4数组类型

//设置为什么类型就只能放什么
let list:number[]=[1,2,3]
let list0:Array<number>=[1,2,3]
//叫元组类型
let list1:[string, number]=['aa',10]

1.5枚举

enum Color{
	Red,
	blue,
	green
}

let color: Color = Color.red

1.6any和void

any:不清楚是什么类型用any,匹配任意字符

let str:any = 100
str = "abcdd"
let arr: any[] = [100,true,"abb"]

void:无类型,如果函数没有返回值可以用void

function showMsg():void{
	console.log(123)

}
//无返回值,函数返回的话为undefined

1.7object

function getObj(obj:object): object{
	return {}
}

1.8联合类型和类型断言

str可以传两种类型
断言两种写法:<>和as

function getStr(str: number | string): number{
	if((<string>str).length){ //数字
		return <string>str.length
	}else{  //字符串
		return str.toString().length
	}
}
function getStr(str: number | string): number{
	if(( str as string).length){ //数字
		return str.length
	}else{  //字符串
		return str.toString().length
	}
}

1.9类型推断

不明确类型ts会自动推断变量的类型

2、对象使用

interface IPerson{
	readonly id:number, //只读
	name:string,
	age?:number //可加可不加
}
const xiaoming: IPerson = {
	id:10,
	name:"小明"
}

interface Isearch{
	(source:string,subString:string):boolean
}
const searchString:Isearch = function(source:string, substring: string):boolean{
//查找字符串
	return source.search(substring)>-1
}

3、类

模仿Java的语法,面向对象的编程思想

class myclass{
	name:string,
	age:number,
	constructor(name:string,age:number){ //相当于构造器
		this.name = name
		this.age = age
	}
	sayHI(str:string){
		console.log(str,'你好')
	}
}

实现

interface one{
	fim(): any
}
interface two{
	light()
}
//实现,继承同java,要实现接口中的方法,可以多继承
class myclass implements one,two{
	fim(){}
	light(){
		console.log("飞机")
	}
}
const my1 = new myclass()
my1.light
my1.fim

继承

class person{
	name:string,
	age:number,
	constructor(name:string,age:number){
		this.name = name
		this.age = age
	}
	sayHI(str:string){
		console.log(str,'你好')
	}
}

class student extends person{
...
}

4、多态

对照java,这怎么像Java一样了

5、类修饰符

public公共的
private私有的
protected受保护

static静态的

6、存储器

class person{
	firstname:string,
	lastname:string,
	constructor(firstname:string,lastname:string){
		this.firstname = firstname
		this.lastname = lastname
	}
	get fullname(){
		return this.firstname+this.lastname
	}
	
}

7、抽象类

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

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

相关文章

ESP32设备驱动-LIS3DSH加速度传感器驱动

LIS3DSH加速度传感器驱动 文章目录 LIS3DSH加速度传感器驱动1、LIS3DH介绍2、硬件准备3、软件准备4、驱动实现1、LIS3DH介绍 LIS3DSH 是一款超低功耗高性能三轴线性加速度计,属于“纳米”系列,具有嵌入式状态机,可通过编程实现自主应用。 LIS3DSH 具有 2g/4g/6g/8g/16g 的动…

八、Consul注册中心

目录 1、到官网下载Consul https://www.consul.io/ 2、解压下载好的压缩包 3、配置系统环境变量 4、WINR启动cmd窗口&#xff0c;输入consul启动命令 5、启动完成后访问Consul页面 http://localhost:8500&#xff08;8500为Consul默认端口号&#xff09; 6、server-mem…

〖Python网络爬虫实战㉔〗- Ajax数据爬取之Ajax 分析案例

订阅&#xff1a;新手可以订阅我的其他专栏。免费阶段订阅量1000 python项目实战 Python编程基础教程系列&#xff08;零基础小白搬砖逆袭) 说明&#xff1a;本专栏持续更新中&#xff0c;目前专栏免费订阅&#xff0c;在转为付费专栏前订阅本专栏的&#xff0c;可以免费订阅付…

Git安装及使用

Git简介 Git是什么 Git是目前世界上最先进的分布式版本控制系统(Version Control System)。 Git的功能 Git安装 Git官网&#xff1a;https://git-scm.com/ 打开安装程序后&#xff0c;一直点击下一步&#xff0c;直到以下位置&#xff1a; 这里选择第一项&#xff0c;即…

Spring基础且核心的两大概念——IoC 与 DI

什么是Spring&#xff1f; Spring 全称 Spring Framework&#xff0c;它是一个目前市场上最流行、结构最庞大的开源框架&#xff0c;之所以如此&#xff0c;是因为其有独特且全面的应用场景&#xff0c;这样好的生态才使企业一直对青睐。 注意这句话&#xff1a;Spring 是包含了…

Vector - 常用CAN工具 - CANoe软件安装常见问题

目录 一、确认电脑系统盘是否满足要求&#xff0c;CANoe软件对PC要求如下&#xff1a; 二、确认软件安装包完整 三、确认软件与电脑系统之间的兼容性 四、关闭后台程序 五、安装软件 六、清空临时文件夹 七、尝试在其他电脑上安装 一、确认电脑系统盘是否满足要求&#…

LLVM代码空间优化(一) 编译器自带的优化选项

最近项目组遇到编译安全固件&#xff0c;超出了r52安全核SRAM自带空间问题。急需要找寻方法优化代码体积&#xff08;代码段大小数据段大小stackbss段&#xff09;方法&#xff0c;目前初步分析只有代码段&数据段有优化的可能&#xff0c;bss和stack优化空间并不大。有方法…

Unity Audio -- (5)声音的可用性考量

在某些情况下&#xff0c;用户可能会关闭声音或者让音量降低至很小的水平&#xff0c;用户本身的听力情况&#xff08;用户可能有听力障碍&#xff0c;失聪等情况&#xff09;也有差异。一个好的设计者应该要考虑到项目的可用性&#xff0c;音频也不例外。本节我们来看看如何能…

由于找不到msvcr100.dll,msvcr100.dll丢失怎样修复

在我们打开游戏或者软件的时候&#xff0c;电脑提示由于找不到msvcr100.dll文件&#xff0c;无法执行此代码是什么意思&#xff1f;msvcr100.dll为什么会丢失&#xff0c;又该如何修复呢&#xff1f;相信这些问题困扰着不少小伙伴&#xff0c;昨天是准备玩吃鸡游戏的时候&#…

被面试官故意刁难,太难了...

今年的金三银四&#xff0c;我和大多数的同行一样加入了升职涨薪的潮水&#xff0c;我早在2个月前就开始准备&#xff0c;我觉得自己在技术方面完全没有问题&#xff0c;于是这两个月我每天在公司摸鱼2小时&#xff0c;回家刷2小时&#xff0c;前前后后刷了几千到面试题&#x…

【LeetCode困难】1263. 推箱子

「推箱子」是一款风靡全球的益智小游戏&#xff0c;玩家需要将箱子推到仓库中的目标位置。 游戏地图用大小为 m x n 的网格 grid 表示&#xff0c;其中每个元素可以是墙、地板或者是箱子。 现在你将作为玩家参与游戏&#xff0c;按规则将箱子 ‘B’ 移动到目标位置 ‘T’ &am…

设计模式|代理模式

代理模式介绍 ​代理模式指为其他对象提供一种代理&#xff0c;以控制对这个对象的访问。在某些情况下&#xff0c;一个对象若不能直接引用另一个对象&#xff0c;而代理对象可以在客户端与目标对象之间起到中介的作用。 代理模式使用场景 普通代理 普通代理模式是指在代理模…

C++的string类使用介绍

string类 1.为什么要学习string类&#xff1f;1.1.C语言中的字符串1.2. 日常中 2. 标准库中的string类2.2 string类(对于单字节的字符)的常用接口说明①string常见的构造函数②string类对象的容量操作③string类对象的访问以及遍历操作④string类对象的修改操作⑤string类非成员…

OrCAD怎样把原理图输出为DXF格式

OrCAD怎样把原理图输出为DXF格式 又有段时间没分享文章了&#xff0c;想想主要还是自媒体写点内容确实不容易&#xff0c;要不断坚持下来更不容易&#xff0c;一直以来也就是凭着“乐于分享”的心在不定时更新。 今天分享的主题是&#xff1a;OrCAD怎样把原理图输出为DXF格式…

标准CSO

Cheng R, Jin Y. A competitive swarm optimizer for large scale optimization[J]. IEEE transactions on cybernetics, 2014, 45(2): 191-204. 1.1 背景介绍 CSO&#xff08;competitive swarm optimizer&#xff09;算法是在PSO&#xff08;particle swarm optimization&a…

医日健“数智药房”解锁购药新模式

“现在买药这么方便&#xff0c;半夜拉肚子过来自助付款、自助取药&#xff0c;还能连线医生&#xff0c;很快就买好了药。”上海市宝山区消费者王先生惊喜地说。近日&#xff0c;宝山区一国大药房医日健 “智慧药房”正式上线营业&#xff0c;该药房实现自助式、无接触就医购药…

如何添加团队成员到你的项目

本文介绍在YonBuilder移动开发中&#xff0c;如何把你的团队成员添加到你的应用中&#xff0c;让团队成员也具备应用的相关配置&#xff0c;代码拉取&#xff0c;打包编译等功能权限。 简单来说把「团队成员添加到你的项目」&#xff0c;一共需要三步大流程操作&#xff0c;具…

基于AT89C51单片机的篮球比赛计时计分器

点击链接获取Keil源码与Project Backups仿真图&#xff1a; https://download.csdn.net/download/qq_64505944/87778138?spm1001.2014.3001.5503 源码获取 主要内容&#xff1a; 比赛的计分和计时的工具大多是很简陋的比分牌&#xff0c;十分的不方便。而且大多由于缺少24秒…

Meta-learning综述

文章目录 几个概念1&#xff09;监督、无监督、弱监督学习&#xff08;Weakly Supervised Learning&#xff09;以及 自监督学习&#xff08;Self-supervised Learning&#xff09;2&#xff09;域偏移、域适应、域泛化3&#xff09;N-way K-shot&#xff08;Few-shot learning…

【Java虚拟机】JVM诊断神器Arthas入门实操

1.Arthas简介快速入门 阿里开源的Java诊断工具&#xff0c;它可以在运行时对Java应用程序进行动态诊断和调试 当你遇到以下类似问题而束手无策时&#xff0c;Arthas可以帮助你解决 这个类从哪个 jar 包加载的&#xff1f;为什么会报各种类相关的 Exception&#xff1f;我改的代…