一、什么是TypeScript
TS是以JavaScript为基础构建的语言，是JavaScript的一个超集。他扩展了JavaScript并添加了类型。在任何支持JavaScript的平台中执行。具有强类型定义特点。
TS优势
- 规范了代码
- 代码编译阶段就能发现错误
- 在原生js的基础上加了一层类型定义
- 添加了类型检查
- 避免了低级错 误
TS增加了什么？
- 类型
- 支持ES的新特性
- 添加ES不具备的新特性（抽象类，接口，工具
- 丰富的配置选项
安装
1、安装nodejs
2、安装typescript解析器：npm i -g typescript
编译
tsc 文件名
二、TypeScript的工作流
三、TypeScript语法
1-类型
boolean、string、number、array、null、undefined、object
tuple(元祖）、enum（枚举）、void、never、any
高级类型
- union组合类型
- Nullable可空类型
- Literal预定义类型
Number数字类型
- 对数字的定义可以用number来表示
- 既能表示整数、也能表示浮点数,甚至也可以表示正负数
String字符串类型
- "hello" , 'hello' ,
hello - 反引号：``，可以创建一个字符串模板
boolean布尔类型
- 真假
- 处理逻辑上的判断
数组Array
- []
- 数组中可以存放任意类型的数据
- 宽容度很大
let list1:number[] = [1,2,3,4]
let list2:Array<number> = [1,2,3,4] //泛型
let list4 = [1,"add"]
let list5:any[] = [1,"dss",true]Tuple元祖
- 固定长度，固定类型的数组
- 注意点：声明时一定要指明数据类型
let person1:[number,string] = [1,"小丑"]Union联合类型
let union : string | numberliteral字面量类型
let union3 : 0|1|2
let literal : 1 | "2" | true | [1,2,3,4]枚举类型Enum
enum Color{
red,
green,
bule
}
let color = Color.bule
console.log(color) //2
enum Color2{
red="red",
green="green",
bule=1
}
let color2 = Color2.green
console.log(color2) //greenany
- 任意类型
- 快速上线
let rand:any = 666;
rand = true;
rand = "1234";
rand = {};
rand();
rand.toUpperCase();unkown 未知类型
- 保证类型安全
let rand:unknown= 666;
rand = true;
rand = "1234";
rand= {};
if(typeof rand === 'function') {
rand();
}
if(typeof rand === 'string') {
rand.toUpperCase();
}void、undefined与never
- 一个函数在没有任何返回的情况下，函数返回类型就是void
- void与undefined区别：是否存在问题。void本身不存在；undefined未赋初值
- 保持永远无法执行的状态（抛出错误异常，while）
function throwError(message:string,errorCode:number):never {
throw {
message,
errorCode
}
}
throwError("not found",404)类型适配（类型断言）Type Assertions
//any转换为string
let message:any;
message:"abc";
//方法一 ： (<string>message)
let ddd = (<string>message).endsWith("c");
//方法二： (message as string)
let ddd2 = (message as string).endsWith("c");函数类型
- 给参数绑定类型
- 多个参数类型必须匹配一致
- 可以使用？来设置参数的可选性
- 可以设置默认值
- 默认值和可选值放在函数参数末尾
let log = (message:string) => console.log(message)
let log2 = (message:string,code?: number) => {
console.log(message,code)
}
let log3 = (message:string,code: number=0) => {
console.log(message,code)
}四、TS的面向对象
对象Object
- 对象的定义不是key to value键值对，而是key to type键类型对。
const person:{
firstName:string,
lastName:string,
age:number
} = {
firstName: 'joker',
lastName:'yan',
age:18
}
console.log(person.age)Interface接口
- 高内聚，低耦合（功能相关的事务放在用一个集合中，形成一个模块，模块之间互相独立）
let drawPoint = (point:Point) =>{
console.log({x:point.x,y:point.y})
}
drawPoint({x:105,y:24});
// drawPoint({x:'joker',y:'yan'}); // 报错
interface Point {
x:number,
y:number
}class
- 类是一个特殊的函数
- JS构造函数不可以重载 一个类有且仅有一个constructor
interface IPoint {
x:number,
y:number,
drawPoint: () => void;
getDistances:(p:IPoint)=>number;
}
class Point implements IPoint {
//成员变量
x:number
y:number
//变量初始化 构造函数
constructor(x?:number,y?:number) {
this.x = x;
this.y = y
}
//成员方法
drawPoint = () =>{
console.log("x:",this.x,"y:",this.y)
}
getDistances = (p:IPoint) =>{
return Math.pow(p.x-this.x,2) + Math.pow(p.y-this.y,2)
}
}
//声明对象
const point = new Point(2,3)
// point.x = 2;
// point.y = 3;
point.drawPoint()
//类:point;对象object:类的实例instance;
// 使用访问修饰符public、private、protected
class Point implements IPoint {
//变量初始化 构造函数
constructor(public x:number,public y:number) {
}
//成员方法
drawPoint = () =>{
console.log("x:",this.x,"y:",this.y)
}
getDistances = (p:IPoint) =>{
return Math.pow(p.x-this.x,2) + Math.pow(p.y-this.y,2)
}
}Access Modifier 访问修饰符
- 避免外部直接操作内部属性
- 对访问class内部的方法或者变量加以限制
- public、private、protected
- 接口中的定义为共有属性。
module模块
- 在class类的名称前使用export导出
- 在文件最开始使用
import { } from "文件路径"
泛型
- Array<类型>
- 数据模板
- 保持代码中类型一致，提高开发效率
let lastInArray = <T>(arr:Array<T>) => {
return arr[arr.length-1]
}
const l1 = lastInArray([1,2,3,4])
let lastInArray2 = <T>(arr:T[]) => {
return arr[arr.length-1]
}
const l2 = lastInArray2<string>(['a','b','c']);
const l3 = lastInArray2<string | number>(['a','b','c']);
let makeTuple = <T,Y=number>(x:T,y:Y) =>[x,y] //可设置默认类型
const v1 = makeTuple(1,"one")
const v2 = makeTuple<boolean,number>(true,1)泛型补充
- 泛型是可以在保证类型安全的前提下，让函数等与多种类型一起工作，从而实现复用。常用于：函数、接口、类中。
- 泛型在保证类型安全（不丢失类型信息）的同时，可以让函数等与多种不同的类型一起工作。灵活可复用。
创建泛型函数
解释:
语法：在函数名称的后面添加<> (尖括号)，尖括号中添加类型变量，比如此处的Type
- 可以省略<类型>来简化泛型函数的调用
- 使用类型判断机制，判断传入的参数类型。
- 类型变量Type,是一种特殊类型的变量，它处理类型而不是值
- 该类型变量相当于一个类型容器，能够捕获用户提供的类型(具体是什么类型由用户调用该函数时指定
- 因为Type是类型，因此可以将其作为函数参数和返回值的类型，表示参数和返回值具有相同的类型
- 类型变量Type,可以是任意合法的变量名称。
数组就是一个泛型
泛型约束
目的：收缩类型（缩窄类型取值范围）
多个泛型类型
keyof：获取到一个类型接口 所有的key的联合类型
TS创建React项目
npx create-react-app 项目名称 --template typescript
项目目录中多了tsconfig.json
React中ts与tsx的区别
- ts：纯ts代码
- tsx：ts组件
类型声明文件：d.ts
- 文件中只能出现类型声明的代码。不能出现可执行的代码
