1.ts环境配置

//安装命令
yarn add typescript --dev
//配置初始化
yarn tsc --init
//编译
yarn tsc

2.配置文件常用配置

target:转化为js时的标准
module：使用的模块规范
sourceMap：是否生成map.js文件
outDir：输出目录
rootDir:编译目录
strict：是否开启严格模式
lib:所使用的标准库，注释掉为默认标准库，dom和bom标准库和一为dom

3.标准类型

• js的六种基本类型加void
• symbol在转换模式为es5时会报错

const a:string='foo'

const b:number=3

const c:boolean = true

const d:void = undefined

const e:null = null
const f:undefined = undefined

const h:symbol= Symbol()

4.对象类型

• 直接设置object类型代表处理原始类型以外的所有类型

const foo:object=function(){} //不会报错

const obj:{foo:number,bar:string} = {foo:5,bar:'sss'} //这种方式里面的对象键值必须和设置的一样，不能多也不能少

5.数组类型

const g:Array<number>=[0,1,2] // 数组里面元素类型只能是同一种类型
const i:number[] = [5,6,7] 

const h:Array<number|string>=[0,1,'sss']  //用|可以设置数组里面元素是多种类型

6.元组类型

const tump:[number,string]=[2,'dd'] //元组里面的数据类型必须和设置的一一对应 
const tump:[number,string]=['dd',2] //顺序不一样也会报错

7.枚举类型

• 枚举类型可以通过值获取键 （置入双向键值对）
• 常量枚举不可通过值获取键 （在enum前加const）

enum postStatus{
  draft=6,
  ahah=3
}
const enum constPostStatus{
  draft=6,
  ahah=3
}

8.函数类型

函数声明方式定义

function fun1(a:number,b:number):string{
  return '只能返回string'
}

fun1(2,2) //参数的个数和类型都必须与设置的一致

//可选参数
//1.冒号前加一个问号
//2.设置参数默认值
function fun2(a?:number,b:number=3):string{
  return '只能返回string'
}

//任意个数参数使用..rest
function fun1(a:number,b:number,...rest:number):string{
  return '只能返回string'
}

函数表达式方式

const fun3:(a: number, b: number) => string = function(a:number,b:number):string{
  return '只能返回string'
}

9.任意类型

function stringfy(value:any){
  return JSON.stringify(value)
}

10.隐式类型推断

只在声明时根据赋的值进行推断，如果只声明为赋值会推断为any类型

11.类型断言

const num = [1,2,3]
const res = num.find(i=>i>0)
// const square = res as square  因为ts不确定res是数字所以会报错
const square = res as number * (res as number)

//另一种方式是使用尖括号： 
<number>res   //jsx语法中无法使用

12.接口

interface Post{
  title:string
  content:string
  subtitle?:string //可选成员
  readonly summary:string //只读成员
}
function pointPost(post:Post){
  console.log(post.title)
  console.log(post.content)
}

pointPost({
  title:'接口的作用是用来约束对象中的成员的',
  content:'使用interface关键词定义接口，里面的参数可以用逗号分割，也可以用分号，分号可省略',
  summary:'设置后不可修改'
})

let testPost:Post = {
  title:'接口的作用是用来约束对象中的成员的',
  content:'使用interface关键词定义接口，里面的参数可以用逗号分割，也可以用分号，分号可省略'，
  summary:'设置后不可修改'
}

//动态成员
interface Cache{
  [prop:string]:string
}

const cache:Cache={}
cache.poo='poo'

13.类

和es6中类的一些区别

• 构造函数中的参数必须先定义并在定义时或者构造函数中赋值
• 多了三个修饰符 ——public:共有属性，private:私有属性，protected:保护属性
• 只读属性：readonly

class Person{
  public name:string
  private age:number //私有修饰符，只能在类的内部访问
  protected readonly gender:boolean //保护修饰符，只能在类的内部和子类中访问
  constructor(name:string,age:number){
    this.name=name
    this.age=age
    this.gender=true
  }
}
const tom =new Person('tom',18)

class Student extends Person {
  //构造器上设置私有属性private，就不能在外部被new生成实例和继承了。
  //设置成保护属性protected,不能new可以继承
  private constructor(name:string,age:number){
    super(name,age)
    console.log(this.gender)  //子类中可以访问父类的保护类型
  }
 //static是代表静态方法
  static create(name:string,age:number){
    return new Student(name,age)
  }
}

const jack =Student.create('jack',18)

在类中表明实现了哪种接口的方式

使用implements关键字

interface Eat{
  eat(food:string):void
}
interface Run{
  run(distance:string):void
}
class Animal implements Eat,Run{
  eat(food:string){
    console.log(food)
  }
  run(dd:string){
    console.log(dd)
  }
}

抽象类

在class关键字前加一个abstract 关键字，抽象类只能被继承不可创建实例，在自己抽象类内部new也是不允许的

abstract class Person{
  public name:string
  private age:number //私有修饰符，只能在类的内部访问
  protected gender:boolean //保护修饰符，只能在类的内部和子类中访问
  constructor(name:string,age:number){
    this.name=name
    this.age=age
    this.gender=true
  }
  static create(name:string,age:number){
    return new Person(name,age)   //报错
  }
}
const tom =new Person('tom',18)  //报错

14.泛型和类型声明

泛型:使用尖括号在函数名后定义泛型，解决函数参数不确定类型的情况，在调用函数时用简括含传参

function Tname<T>(name:T) {
  console.log(name)
}
Tname<string>(666) //报错
Tname<string>('haha')

类型声明
使用declare声明未定义类型的函数

 import {camelCase} from 'lodash'
declare function camelCase(input:string) {
  
}