1. TypeScript 介绍
TypeScript 由微软开发的自由和开源的编程语言。
TypeScript 是 JavaScript 的一个超集。它对 JavaScript 进行了扩展，向 JavaScript 中引入了类型的概念，并添加了许多新的特性。
编辑
// 这是JavaScript，是弱类型语言，变量可以赋不同类型的值let username='张三'username =1
复制代码
// TypeScript是强类型语言，变量不能给随意类型赋值 let username:string='张三' username=1
复制代码
TypeScript 代码需要通过编译器编译为 JavaScript，然后再交由 JavaScript 解析器执行。
TypeScript 完全兼容 JavaScript，换言之，任何的 TypeScript 代码都可以直接当成 JavaScript 使用。
1.1 TypeScript 好处
1.2 TypeScript 的使用场景
TS 适合用来开发中大型项目
开发通用的 JS 代码库
团队协作开发
1.3 TypeScript 的编译环境
TS 编写的代码是无法直接在 JS 引擎（浏览器/NodeJs）中运行的，最终还需要经过编译变成 JS 代码才可以正常运行
编辑
1.3.1 搭建手动编译环境
1、本地环境需要安装 npm 工具，我们通过 npm 来进行安装
npm install -g typescript
复制代码
编辑
2、安装好了之后，可以查看版本号
编辑
3、新增 hello.ts 文件，执行 tsc hello.ts 命令生成 hello.js 文件
4、在终端输入 node hello.js 就能运行
1.3.2 搭建工程化下的自动编译环境
基于工程化的 TS 开发模式（webpack/vite)，TS 的编译环境已经内置了，无需手动安装配置
以下是创建一个最基础的自动化的 TS 编译环境
npm create vite@latest ts-demo3 -- --template vanilla-ts
复制代码
1、npm create vite@latest 使用最新版本的 vite 创建项目
2、起个项目名称
3、 -- --template vanilla-ts 创建项目使用的模板为原生 ts 模板
项目搭建好了之后可以 cd 到当前项目路径下执行以下指令
2. TypeScript 的类型注解
2.1 TS 支持的常用类型注解
JS 已有类型
1、简单类型
number string boolean null undefined
2、复杂类型
数组 函数
TS 新增类型
联合类型、类型别名、接口、字面量类型、泛型、枚举、void、any
2.2 类型注解的作用是什么
限制变量能赋值的数据类型并给出提示
语法：变量:类型
2.3 类型注解讲解
2.3.1 简单类型
let age:numberage=1let isLoading:booleanisLoading=falselet name:stringname='小头'
复制代码
2.3.2 数组
// 推荐第一种写法let arr:number[]=[1,2]let test:Array<number>=[1,2]
复制代码
2.3.3 函数类型
函数类型是指给函数添加类型的注解，本质上就是给函数的参数和返回值添加类型的约束
function add(a:number,b:number):number{ return a+b;}let sum:number=add(1,2)
复制代码
函数表达式写法
const add= (a:number,b:number):number =>{ return a+b;}
复制代码
type addFn=(a:number,b:number)=>numberconst add :addFn=(a,b) =>{ return a+b;}
复制代码
可选参数表示当前参数可传可不传，一旦传递实参必须保证参数类型正确，可选参数必须在函数末尾
// 可选参数function add(a:number,b?:number):number{ if(b){ return a+b; } return a;}
复制代码
function eachArr(arr:number[]):void{ arr.forEach((item)=>console.log(item))}
复制代码
2.3.4 联合类型
将多个类型合并为一个类型对变量进行注解
// 例子1let arr:(number|string)[]=[1,2,'小头']// 例子2let arr:number|string[]arr=1arr=['小头']
复制代码
2.3.5 类型别名
通过 type 关键字给写起来较复杂的类型起一个其他的名字，用来简化和复用类型
type ItemType=(string|number)[]let arr:ItemType=[1,2,'小头']
复制代码
类型别名注解对象
在 TS 中对于对象数据的类型注解，除了使用 interface 之外还可以使用类型别名来进行注解，作用相似
type Boy={ name:string age:number}const boy:Boy={ name:"小头", age:18}
复制代码
2.3.6 接口类型
在 TS 中使用 interface 接口来描述对象数据的类型（常用于给对象的属性和方法添加类型约束)
interface LoginForm{ name:string password:string}const form:LoginForm={ name:"小头", password:"123456"}
复制代码
接口类型的可选参数写法
interface LoginForm{ name:string password?:string}const form:LoginForm={ name:"小头"}
复制代码
接口的继承
接口的很多属性是可以进行类型复用的，使用 extends 实现接口继承，实现类型复用
interface Boy{ name:string age:number}interface People extends Boy{ sex:number}
const people:People={ name:"小头", age:18, sex:1}
复制代码
2.3.7 字面量类型
使用 js 字面量作为类型对变量进行类型注解，这种类型就是字面量类型，字面量类型比普通类型更加精确
// 普通number类型let age:number=10age=20// 字面量类型,age1报错let age1:10age1=20
复制代码
字面量类型的使用 一般都是和联合类型搭配使用
type Sex ='男'|'女'let sex:Sex='女'
复制代码
2.3.8 any 类型
变量被注解为 any 类型之后，TS 会忽略类型检查，错误的类型赋值不会报错，也不会有任何提示
let age:any age=100 age='小头'
复制代码
注意：any 的使用越多，程序可能出现的漏洞越多，建议避免使用
2.3.9 类型断言
有时候开发者比 TS 本身更清楚当前的类型是什么，可以使用断言 as 让类型更加精确和具体
let someValue: any = 'this is a string';let strLen: number = (someValue as string).length;
复制代码
2.3.10 泛型
泛型是指在定义接口、函数等类型的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性，使用泛型可以复用类型并且让类型更加灵活
// 定义泛型interface ResData<T>{ message:string code:number data:T}
interface User{ username:string password:string}
const resData:ResData<User>={ message:'成功', code:200, data:{ username:'张三', password:'123456' }}
复制代码
2.3.10.1 泛型别名
在类型别名 type 的后面使用<T>即可声明一个泛型参数，接口里的其他成员都能使用该参数的类型
// 定义泛型type ResData<T> ={ message:string code:number data:T}
type User={ username:string password:string}
let resData:ResData<User>={ message:'成功', code:200, data:{ username:'张三', password:'123456' }}
复制代码
2.3.10.2 泛型函数
在函数名称的后面使用<T>即可声明一个泛型函数，整个函数中（参数、返回值、函数体）的变量都可以使用该函数的类型
function add<T> (b:T){ console.log(b)}add(1)add('1')
复制代码
2.3.10.3 泛型约束
泛型的特点就是灵活不确定，有些时候泛型函数的内部需要访问一些特定类型的数据才有的属性，此时会有类型错误，需要通过泛型约束解决
function demo<T extends Length>(a:T){console.log(a.length);
} demo('小头')
interface Length{ length:number }
复制代码
3. TypeScript 面向对象编程的基本语法
TS 具备面向对象编程的基本语法，例如 interface、class、enum 等，也具备封装、继承、多态等面向对象基本特征
3.1 定义枚举
enum Code{ SUCCESS=200, FAIL=500}
复制代码
3.2 定义接口
// 定义接口，抽象方法interface A{ sleep(people:string):void}
复制代码
3.3 实现接口
// 定义接口，抽象方法interface A{ sleep(people:string):void}// 实现接口class B implements A{ sleep(people: string): void { console.log(people); }}// 初始化对象
let a:A=new B()a.sleep('小头')
复制代码
3.4 定义类
// 定义一个类class People{ // 成员变量 private username:string private password:string // 构造方法 constructor(username:string,password:string){ this.username=username this.password=password } // 成员方法 public sleep():void{ console.log(this.username+'睡觉了'); }}
let people:People=new People('张三',"123");people.sleep()
复制代码
4. TypeScript 的条件控制
4.1 if-else
let num:number=21if(num>0){ console.log(num +'是正数') }else if(num<0){ console.log(num+'是负数'); }else{ console.log(num+'为0'); }
复制代码
4.2 switch
let grade:string='A'switch(grade){ case 'A':{ console.log('优秀') break } case 'B':{ console.log('合格') break } case 'C':{ console.log('不合格') break } default:{ console.log('输入错误') break }}
复制代码
5. TypeScript 的循环遍历
TS 支持 for 和 while 循环，并且为一些内置类型如 Array 等提供了快捷迭代的语法
5.1 for 循环遍历
for(let i=1;i<10;i++){ console.log(i);}
复制代码
5.2 while 循环遍历
let i=1;while(i<=10){ console.log(i); i++;}
复制代码
5.3 数组快捷迭代
// 定义数组let names:string[]=['小头','张三']// for in迭代器for(const i in names){ console.log(i+':'+names[i]); }// for of 迭代器for(const name of names){ console.log(name); }
复制代码
评论