Ts

ts无法直接在浏览器运行

• 安装npm i -g typescript
• tsc -v
• tsc xx.ts -w实时监听
• 运行 xx.js
• tsc --init ts配置文件

  ts数据类型 使用方法 a：number

  number string boolean

  声明变量 let a = 12 a会自动预测数据类型number

  数组

• let list:number[] = [1,2,3]
• let list:Array < number > = [1,2,3]
• let list =[1,2,3]
• 都是数字数组
• let list= [1,'rr',3] 数组里只能有数字和字符串
• let list: any[]= [1,'rr',3] 数组里类型不限制

  tuple元组

• 固定长度，固定类型的array
• let person: [number,string] = [1,"ajax"]

  联合类型Union，字面量类型

• let union: string | number
• union可以是字符串或数字类型
• 字面量类型 let a:1|2|3,范围缩小

  枚举类型

any,unknown

any可以是任意类型，unknwn不保证任何类型，但保证类型安全。

没有两个if判断 unknown会报错，any不会

void undefined never

都是修饰函数的，undefined是直接return ,never修饰永远不会停止的函数比如while循环。

索引签名,可以解决多余对象属性

interface Role{
   
   
    [index:string]:any
}
//适用于对象
const role : Role{
   
   
     a:'a',
     b:'b'
}
interface Role{
   
   
    [index:number]:any
}
//适用于对象和数组
const role : Role{
   
   
     0:'a',
     1:'b'
}
const role : Role=['a','b']

函数类型

//函数重载+可调用注解
function foo(a:number,b:number):number
function foo(a:string,b:string):string
type A={
   
   
    (n:number,m:number):number
    (n:string,m:string):string
}
let a:A=foo
另一种注解,不能和重载一起使用
type A=
    (n:number,m:number)=>number

类型适配

比如开始是any类型，后来明确知道他是什么类型，可以用as指定类型

ts里的接口interface

interface Point {
   
   
x:number;
y:number;
}
let drawPoint = (point:Point)=>{
   
   

}//对象类型接口用于定义传入对象的类型

class

interface IPoint {
   
   
x:number;
y:number;
drawPoint:() => void;
getDistances:(p:IPoint)=> number;
}
//类实现接口
 class Point implements IPoint {
   
   
  x: number
  y: number
  drawPoint = () => {
   
   
    console.log(this.x)
    console.log(this.y)
  }
  getDistances = (p: IPoint) => {
   
   
    return Math.pow(p.x - this.x, 2) + Math.pow(p.y - this.y, 2)
  }
}
const a =new Point()
a.drawPoint()//undefined undefined 因为没有传初始值，在之前设置a.x=1,a.y=2，或者直接用构造函数
 constructor(x:number,y:number){
   
    //(x?:number,y?:number=2)可选参数加问号
    this.x=x;
    this.y=y
  }
  const a =new Point(2,3)
  a.drawPoint()
  //一个类只有一个constructor,即不允许重载

 // 使用**访问修饰符**会自动声明变量自动赋值,这些可以注释，但使用了public，就不能使用？可选
   constructor(public x: number,public y: number) {
   
   
 //   this.x = x
  //  this.y = y
  }
class Point implements IPoint {
   
   
 // x: number
 // y: number
 }
 //接口中的属性方法都是公有的，所以不能用private修饰，如果要用private，在接口中删除属性
 interface IPoint {
   
   
 // x: number
 // y: number
  drawPoint: () => void
  getDistances: (p: IPoint) => number
}
//那么怎么修改私有变量
 set X(value:number){
   
   
    this.x=value
  }
  get X(){
   
   
    return this.x
  }
  //只需要把函数当成一个属性来用 实例a.X,a.X(999),在对应的接口也需要修改
  interface IPoint {
   
   
  //x: number
 // y: number
  drawPoint: () => void
  getDistances: (p: IPoint) => number
  X:number
  Y:number
  //使用set get会报错，需要执行tsc -t es5  main.ts编译
}

泛形

不知道类型是什么，就表示泛形

重载,同一个函数名，不同参数

ts中的this

如果不限制this，那么valve这个拼写错误不会提示出来。编译过程中this就会被删除掉。

ts typeof

使用typeof就可以不写注释里的内容

.d.ts

在ts文件中引用js,要有声明文件.例如

export declare function foo(n: number):void

ts转js文件,在tsconfig文件中打开declaration:true,会自动生成.d.ts文件.

React

单项数据流 虚拟Dom 组件化

• 创建项目npx create-react-app my-app //npx不需要全局安装
• npm i / npm start
• 创建ts版本的react项目 npx create-react-app my-app --template typescript
• 在 tsconfig文件 "compilerOptions"里加上这个属性"noImplicitAny": false //不需要显式地声明变量的类型,默认类型是any
• cd my-app
• npm start

  tsconfig