Typescript笔记

Typescript笔记

基本概念

1. 强类型、弱类型：强类型在声明的时候需要声明是什么类型的数据，并且在传参或者赋值的时候需要按照声明的数据类型赋值，并且不允许隐式类型转换，弱类型则不需声明类型可以进行数据类型转换
2. 静态类型语言、动态类型语言：变量声明后就不在变化（数据类型），而动态类型：运行时才能知道变量的数据类型，而且随时数据类型会变化
3. 强类型优势：错误更早暴露、强类型更加智能（智能提示）、重构更加牢靠、减少不必要的类型判断
4. 特殊类型：例如：const a:‘foo’=‘foo’ //a的值必须是’foo’;const type:‘success’|‘warning’|‘error’=‘success’// type的值只能是success、warning、error中的一个；type stringOrNumber=string|number //声明一个新的数据类型 const b:stringOrNumber=5//b可以是number也可以是string；const gener:?number=null=5//gener可以是number也可以是null；const gener:number|null|void=undefined //gener可以是数字、null、undefined，mixed:强类型（可以是数字、字符串等类型），any是弱类型
5. 基本编译命令：tsc XXX.ts;生成配置文件：yarn tsc --init
6. 非严格模式下,当设置变量的数据类型为string/number/boolean时变量的值可以使null或者undefined,变量设置为void类型的时候它的值可以使null或者undefined(严格模式时void类型的变量值只能是undefined),而类型是symbol的变量值也只能是symbol(但是设置symbol等新增js内置对象时要么修改(tsconfig.json文件中)target-----对应相应的标准库或者在lib下添加指定的库文件如ES2015,注意如果直接改lib库需要手动添加DOM库因为指定库文件时会自动覆盖了之前的所有默认库文件包括BOM/DOM库)
7. 显示错误消息:yarn tsc --locale zh-CN
8. 作用域问题:不同文件相同变量名:1可以使用立即执行函数将代码放在立即执行函数中;2使用export{}进行导出,此时本页内的代码视为一个模块
9. ts中object不仅仅指js中的object类型而是指所有除了基本类型(string,number,boolean,undefined等以外的数据类型)-----object/array/function,如果此时就想限制成js中的object类型可以如下:const a:{name:string,age:number}={name:‘jack’,age:18},此时赋值的结构必须等于类型的结构不可多也不可少
   10.ts中定义数组方式:1:const a:Array =[1,2,3]//纯数字数组;2:const b:number[]=[1,2,3]// 纯数字数组,例如 function sum(…args: number[]){
   return args.reduce((pre,current)=> pre+current,0)//默认参数是数字数组
   }
   11.元组类型:元组是明确元素数量和元素类型的数组,例如const temp:[number,string]=[10,‘hello’]//类型定义中定义了一个含有两个元素的数组一个是数字一个是字符串,那么赋值也要一致,否则报错
10. 枚举值:可能入侵到运行中的代码(影响编译后的结果)
11. 函数类型:function sum(a:number,bLnumber):number{
    return a+b
    }//调用函数的时候变量个数,类型以及返回值类型必须一致,如果是人一个参数则使用js中的…rest:num[]操作符,函数表达式:如果其参数是函数(回调函数时,则必须明确回调函数参数的类型)例如:const func2:(a:number,b:number)=>string=function(a:number,b:number):string{
    return ‘hello’
    }
12. 任意类型的数据:any
13. 隐式类型推断:例如:let age=18;age=‘hello’—此时会报错,因为起初赋值18,此时会默认age是number类型,再重新赋值为字符串会有问题,let name;—此时name是any类型
14. 类型断言:const nums=[110,1,2];const res=nums.find(i=>i>10);const num=res as number(就是告诉ts,res一定存在而且是number类型)或者const num2=res 同上也是断言,效果一致,但是用jsx语言时第二种方式不要用容易和标签冲突(!!!类型断言不是类型转换)
15. 接口:interface约束对象的结构,例如:interface people{
    title:string
    content:string
    }
    function pringPost(post:post){
    console.log(post.title)
    console.log(post.content)
    }
    pringPost({
    title:‘hello’,
    content:‘ts’
    });接口的可选成员:interface people{
    title:string
    content:string
    subtitle?:string
    readonly summary:string

} //subtitle就是可选成员,summary为只读成员;interface cache{
[key:string]:string
},const cache2:cache={},cache2.value=‘1’;此时cache就是有动态成员的接口, 他定义的变量可以动态添加属性,属性值是string
16. 类的使用：class person{
name:string
age:number
constructor(name:string,age:number){
this.name=name
this.age=age
}
sayHi(msg:string) void{
console.log(I am${this.name},${msg})
}
}在ts类中必须先声明相关属性才能赋值，声明的时候要把类型也声明上，此时可以赋值也可以在constructor中赋值，但是二者必有其一
17. 类的访问修饰符：例如
class person{
name:string
private age:number
protected gener: boolean
constructor(name:string,age:number){
this.name=name
this.age=age
this.gener=true
}
sayHi(msg:string) void{
console.log(I am${this.name},${msg})
console.log(this.age)
}
const tom=new person(‘tom’,18)
console.log(tom.name)
console.log(tom.gener) ----访问不到
console.log(tom.age)-----此时或报错因为age是类的私有属性，ts中属性默认是public修饰符，protected修饰的属性外界也访问不到，但是在子类中可以访问属性例如：class student extends person{
constructor(name:string,age:number){
super(name,age)
console.log(this.gener) ----此时子类中是可以访问到的
}
}如果constructor的修饰符是private，则该类不能被继承和实例化，用的话只能在内部构建一个方法去创建例如：
class person{
name:string
age:number
private constructor(name:string,age:number){
this.name=name
this.age=age
}
static create(name:string,age:number) {
return new person(name,age)
}
}
const jack=person.create(‘jack’,18);而如果constructor的修饰符是protected的话则可以继承但是不能实例化
18. 只读属性readonly只能在修饰符后面，只能在声明或者构造函数时初始化但是二者取其一；
19. 类与接口：1接口定义：
多个接口：
接口的使用implements关键字，引入多个接口时用’,'隔开，一个接口最好只约束一个方法
18. 抽象类：抽象类只能被继承不能实例化，关键字是abstract

抽象方法：abstract修饰的方法在子类中必须去实现
19.泛型就是定义函数、接口、类时不指定类型，使用时再指定，例如：
function createNumberArray(length:number,value:number):number[]{
const arr=Array(length).fill(value) ///Array此处就是泛型类，number就是泛型参数
return arr
}
function createStringArray(length:number,value:number):string[]{
const arr=Array(length).fill(value) ///Array此处就是泛型类，number就是泛型参数
return arr
} 但是两个函数各是创建新数组一个以nmber填充一个以string填充，如果合并成一个公共的函数呢？？？
function createArray(length:number,value:T):T[]{
const arr=Array(length).fill(value) ///Array此处就是泛型类，number就是泛型参数
return arr
}
const newArr=createArray(3,‘foo’)
这里面T就是泛型参数，这样的话就可以支持创建任意类型的数组了

20.类型声明：当引入第三方模块例如lodash的时候lodash不带类型修饰符这样有时候不能提示ts也无法判断这时候就需要类型声明告诉ts
如：import {camelCase} form ‘lodash’
declare function camelCase(input:string):string //类型声明
const res = camelCase(‘hello word’),