typeScript学习笔记1

优势：类型检查，语言扩展，工具属性

强类型语言：不允许改变变量的数据类型，除非进行强制类型转换
弱类型语言：变量可以被赋值不同的数据类型

静态类型语言：在编译阶段确定所有变量的类型
动态类型语言：在执行阶段确定所有变量的类型

(js：动态弱类型语言)
ts是以JavaScript构建的语言，js的超集。

开始步骤
进入项目 初始化 npm init -y
1.全局安装typescript npm i typescript -g
安装完后就可以使用ts的编译器tsc
2.tsc --init
tsc ./src/index.ts
npm i webpack webpack-cli webpack-dev-server -D

ts数据类型有：
boolean，number，string，array，function，object，symbol，null，undefined，viod，any，never，元组，枚举，高级类型

类型注解(类似强类型语言的类型声明)：
（变量/函数）：type
基本类型

//原始类型：
let num:number=1
let str:string='hello'
let bool:boolean=true

//数组
let arr:number[]=[1,2,3]
let arr2:Array=[4,5,66,'9']


//元组，特殊的数组，限制了数组的类型和数量
let tuple:[number,string]=[1,'iu']

//函数
let sum =(a:number,b:number)=>a+b
console.log(sum(3,4))

//对象
let obj:object={a:1,b:'hello'}
//obj.a=2 //不允许直接改
let obj2:{a:number,b:string}={a:1,b:'hello'}
obj2.a=2


//symbol:每个从Symbol()返回的symbol值都是唯一的。一个symbol值能作为对象属性的标识符；这是该数据类型仅有的目的
let sym1:symbol=Symbol()
let sym2=Symbol()

//undefined,null
let un:undefined=undefined
let nu:null=null
//如果要将其它数据类型赋值undefined或null毁报错，解决方法联合声明
let num2 :number |undefined |null =9
num2=undefined

//void:运算符 对给定的表达式进行求值，然后返回 undefined
//void 运算符通常只用于获取 undefined的原始值，一般使用void(0)（等同于void 0）
 function noreturn(){}
 let voo=void 3
console.log(void noreturn(),voo)//undefined undefined

//any:任意类型，跟在js中使用差不多
let an
an=9
an="hello"

//never:永远不会有返回值类型。比如抛出异常和死循环函数

枚举类型
枚举：一组有名字的常量集合。

对象的类型注解
约束对象的结构

//对象的类型注解,注意是冒号和分号，分号可以省略
let person:{
    name:string;
    age:number
     sayHi:()=>void
    sayName:(name:string)=>void
    sum:(num1:number,num2:number)=>number
}

person={
    name:'lucy',
    age:18，
   sayHi(){
        console.log('hi')
    },
    sayName(name:string){
        console.log(name)
    },
    sum(num1,num2){
        return num1+num2
    }
}

缺点：结构相同不能复用
接口
关键字：interface
作用：约束对象 函数 类的结构；规范对象的属性 属性的类型 属性值的类型

interface List{
    id:number,
    name:string
}
interface Result{
    data:List[]
}
 function render(result:Result){
     result.data.forEach(value => {
         console.log(value.id,value.name)
     });
 }
 let result={
     data:[
        {
            id:1,
            name:"chen1"
         },
         {
            id:2,
            name:"chen2"
         },
     ]
    
    }
 render(result)

当不确定接口中属性个数时需要使用 索引签名,索引签名包括字符串索引签名和数字索引签名

//数字索引
 interface StringArray{
     [index:number]:string
 }
 let cat:StringArray=['lucky','tom','biubiu']

 //字符串索引
 interface Names{
     [x:string]:string;
 }
 let fruit:Names={
     "cc":"98",
     "ll":""
 }
//当接口中定义了一个索引后，例如设置了 【x:string】= string，就不能设置y：number了。
//因为设置了【x:string】= string相当于这个接口的字符串索引返回值都是字符串，而y：number违背这一原则，冲突了。反过来 如果定义了【x:string】=Number, 就不能设置 y:string了。
//可以同时使用两种类型的索引，但是数字索引的返回值必须是字符串索引返回值类型的子类型。
//因为 数字索引或转化为字符串索引，而转化的这部分索引对应的值的类型范围 超过了 字符串索引类型的范围，就会报错，相当于超出范围。

函数

//定义函数
 //1变量
 let add:(num1:number,num2:number)=>number
 //2接口
 interface Add{
     (num1:number,num2:number):number
 }
 //3类型别名，type关键字
 type Sum=(num1:number,num2:number)=>number
//实现具体函数
 let addfn1:Sum=(a,b)=>a+b
 let addfn2:Add=(a,b)=>a+b

 //混合类型接口：既可以定义函数，也可以像对象一样可以有属性和方法
interface Libs{
    ():void
    version:string
    doSomething():void
}
let lib:Libs=(()=>{})as Libs//用到类型断言，不然报错
lib.version="1.0.0"
lib.doSomething=()=>{
    console.log('hi,ts')
}

//封装，使之复用
function getLib(){
    let lib:Libs=(()=>{})as Libs//用到类型断言，不然报错
    lib.version="1.0.0"
    lib.doSomething=()=>{
        console.log('hi,ts')
    }
    return lib
}

let lib1=getLib()
lib1.doSomething()