Type Script

TS静态类型的编程语言，是在编译时发生错误的，js是动态编程语言。

 

初体验

安装:npm i -g typescript

ts包用于编译ts代码

检验安装成功 ：tsc-v

 ts - 》 js命令：tsc 文件名

简化运行ts

npm i -g ts-node

使用命令：ts-node 文件名

常用类型

let 变量名：类型 = 变量值

js类型：number ，string，boolean，null，undefined，symbol，object（数组，函数，对象）

ts类型：联合类型，接口，元组，字面量类型， 枚举，void，any

let arrays: number[] = []
let arrays: Array<string> = []
let arrays:(number | string)[]=[]   联合类型
type CustomArray = (number | string)[]   类型别名
function 函数名 (参数1:number，参数2:number):number{}
const add : (num1:number,num2:number)=>number=(num1,num2)=>{}
void
function add(num1?:number) 可选参数，必须放在后面
let student : {name:string;age:number;sayHei(num1:string):void}={
    name:'ls',
    age:18,
    sayHei(num1){
        console.log(num1)
    }
}

let student : {
    name:string
    age:number
    sayHei:(num1:string)=>void
} = {
    name:'ls',
    age:18,
    sayHei(num1){
        console.log(num1)
    }
}
// 可选属性
let student : {name:string;age？:number;sayHei(num1:string)？:void}={
    name:'ls',
    age:18,
    sayHei(num1){
        console.log(num1)
    }
}
// 接口
interface 接口名={
    name:string
    age:number
    sayHei:(num1:string)=>void
}

let student :接口名 ={
}

类型别名可以为任意的类型起一个别名，接口只能作为对象的类型别名
interface重名会合并，类型别名重名会报错

//继承  两个接口之间相同的属性的继承
interface point2d ={x:number,y:number}
interface point3d ={x:number,y:number,z:number}

interface point2d ={x:number,y:number}
interface point3d  extends point2d {z:number}

// 元组  里面的数据个数，和类型给定

let position：[number,number] =[100,100]

// 类型推论
1.声明变量并初始化时
2.函数返回值

// 类型断言
给定返回值类型
const aLink =document.getElementById('a') as HTMLAnchorElement
const aLink =< HTMLAnchorElement >document.getElementById('a')

// 字面量类型
let str1 ="hello"
const str2 ="hello"  字面量类型

// 枚举   表示一组明显的可选值
enum Direction {Up, Down , Left,Right }
枚举成员的值时从0开始递增的
enum Direction {Up=1, Down=2 , Left=3,Right=4 }
Direction.Up
不可以只赋值一部分

// any   绑定任何类型
// typeof 
p={}
function add(num1:typeof p){
}

高阶类型

class， 类型兼容行，交叉类型，泛型和keyof，索引签名类型和索引查询类型，映射类型

// class
class 类名 {
    name = 'ls'   // 类型推断
    age : number  // 没有默认值  
    constructor(age:number,gender:string){
        this.age= age
        this.gender=gender
    }
    scale(n:number):void{
        
    }  
}

const p = new 类名()

// 类的继承 和 接口的实现
extends  implement

// 类成员的可见性
public   protected--类和子类可见，但是实例不可见  private---只在当前类中可见

readonly 表示只读，防止除了构造函数之外对属性进行赋值  readonly age:number = 18 不加数据类型，就变成字面量类型

// 类型兼容性
参数相同可赋值，参数多可赋值参数少的

//  交叉类型
interface person {}
interface student{}
type personDetail = person & student

交叉类型和extends的对比： 都可以实现对象类型的组合，但对于同名属性处理不同，extends 会报错，交叉类型不会报错

//泛型
让函数等与多种类型一起工作，从而实现复用
function id<Type> (value:Type):Type{}

调用时可以进行数据推断

泛型约束
function id<Type> (value:Type[]):Type[]{}

function id<Type extends {length:number}> (value:Type):Type{}

function id<Type key extends keyof Type> (value:Type,key:Key){return value[Key]}

泛型接口
interface 接口名<Type>{}

泛型类
class 类名<Type>{}

泛型工具类型
Partial<Type>   属性转为可选
Readonly<Type>    属性转为只读
Pick<Type,keys>    属性中选择一组属性，  <{id:number,title:string},"id"|"title">
Record<keys,Type>    属性构成对象类型

// 索引签名类型
无法确定对象的属性
interface AnyObject {
    [key:string]:number
}

let obj:AnyObject = {
}

// 映射类型
由已有类型产生新的类型
type PropKeys = 'X' | 'Y' |'Z'
type type2 ={[key in PropKeys]:number}
keyof 对象  返回 类似propsKeys

ts声明文件

为已存在的js库提供类型信息

两种ts文件：ts文件--可执行文件和.d.ts文件--只包含类型信息

创建自己的ts声明文件，定义类型，导入对应文件

配置webpack的ts-loader

tsc --init 生成配置文件

 react 中使用ts

1.npx create-react-app  项目名称  --template typescript

/// <reference types="react-scripts" />
// 添加其他的声明文件