目录标题
一、了解ts1、ts是js的超集 二、掌握ts基本写法1、数据类型2、对象使用3、类4、多态5、类修饰符6、存储器7、抽象类 三、React开始1、SWC认识，更快的babel2、创建项目一、了解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 = trueisD= 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 = 100str = "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 = namethis.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.lightmy1.fim
继承
class person{name:string,age:number,constructor(name:string,age:number){this.name = namethis.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 = firstnamethis.lastname = lastname}get fullname(){return this.firstname+this.lastname}}
7、抽象类
三、React开始
官网提供：
1、SWC认识，更快的babel
2、创建项目
npm create vite@latest my-react
