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

一、了解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、抽象类

三、React开始

官网提供：

1、SWC认识，更快的babel

babel	babel转换，将你写的JS转换成大多数浏览器都支持的语法样式，但是它不够快，为啥呢，Babel是JavaScript写的，JavaScript就是有点慢
swc	swc是基于Rust语言，17倍的速度提升
esbuild	esbuild是由go语言写的。Vite工具，它就是使用的esbuild

2、创建项目

npm create vite@latest my-react