目录标题

一、了解ts
- 1、ts是js的超集
二、掌握ts基本写法
- 1、数据类型
- 2、对象使用
- 3、类
- 4、多态
- 5、类修饰符
- 6、存储器
- 7、抽象类
三、React开始
- 1、SWC认识，更快的babel
- 2、创建项目

一、了解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 = 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.light
my1.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

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

2、创建项目

npm create vite@latest my-react

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

web前端开发入门笔记（更新中）
前言假期曾上过6节HTML与微信小程序开发基础课,对前端开发有所了解,今天上完大英就开始看了下课程,出乎意料的易于接受,也许是之前打下的基础,但还是系统地学习比较好,毕竟作为一门知识. 此外,有兴趣 ...
2015年12月份学习总结，前端开发工程师的知识库指引
本文摘录2015年12月份学习总结,创建日期:2016-01-03 14:01:01,有修改. 以下正文: 在9月份领到了一项任务是关于<前端开发工程师的知识库指引>,想了又想,而在我们现 ...
java从零开始系统性学习完整超全资源+笔记(还在更新中）
java从零开始系统性学习完整超全资源+笔记(还在更新中) 前言资源来自:王汉远java基础, B站视频: https://www.bilibili.com/video/BV1b4411g7bj/? ...
收集优质的中文前端博客（不定期更新中）
收集优质的中文前端博客(不定期更新中) 注:博主的公司信息来自网上公开资料,仅供参考,不保证准确性. 个人(控制在42个以内) 阮一峰的网络日志(蚂蚁金服) <读懂 ECMAScript 规格& ...
【学习笔记】前端开发面试锦集
链接地址:https://microzz.com/2017/02/10/interview/ 前端还是一个年轻的行业,新的行业标准, 框架, 库都不断在更新和新增,正如赫门在2015深JS大会上的&l ...
使用 Single-SPA 从零开始搭建 React 微前端项目
在这篇博客中,我们将探讨如何使用Single-SPA从零开始搭建一个React微前端项目,该项目将包含三个不同的子应用.我们将使用Webpack包管理工具和yarn来管理依赖关系,并使用Single- ...
从零开始学习移动端Web开发
背景近年来,随着智能手机的普及,移动端开发受到了异常的关注.从传统的安卓.IOS原生手机系统应用开发,转向了移动端Web开发或者是混合开发,既然有需求,那就让我们一起来学习移动端Web开发吧.本文旨 ...
一个好的web前端开发者，是怎么学习的？前端开发培训机构哪个比较好
IT 行业的变化快是众人皆知的,需要持续去学习新的知识内容.但是,往往我们工作之后,经常发现学习的东西很少了,学习效率非常低,感觉自己到了一个瓶颈期,久而久之,就演变成『一年工作经验,重复去用十年』的 ...
新手从零开始学习微信小程序开发01
新手从零开始学习小程序开发01 文章目录新手从零开始学习小程序开发01 前言一.什么是微信小程序? 二.如何着手学习微信小程序 1.开发工具下载安装 2.注册账户前言本章主要介绍微信小程序开发 ...

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