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
