TypeScript学习

TypeScript是Javascript的超类，由微软公司开发，在这里简称为TS
首先进行TS的安装

npm  i typescript -g

查看ts版本

tsc -v

书写代码前先初始化

tsc --init

执行ts代码，这里w是watch的意思，旨在监听当前ts文件的变化

tsc -w

会发现没有达到预期输出，因为node是不识别ts的需要使用node执行由tsc -w命令生成的目标文件的js文件

//使用node
node 目标.js
//使用nodemon
nodemon 目标文件.js

如何关闭ts的严格模式
执行过ts --init命令后会生成一个tsconfig.json文件中有一个"strict": true, 当值是true是开启状态

基础类型

//ts中的数据类型
let notANumber: number = NaN;//Nan
let num: number = 123;//普通数字
let infinityNumber: number = Infinity;//无穷大
let decimal: number = 6;//十进制
let hex: number = 0xf00d;//十六进制
let binary: number = 0b1010;//二进制
let octal: number = 0o744;//八进制s
let str:string='小海'//字符串
let n:null=null//空类型，就是定义了赋值为空，不可赋值
let b:undefined=undefined//未定型，就是定义了但未赋值，可赋值
let n2:void=undefined//void运算符对给定的表达式进行求值，然后返回undefined
let n1:void=null//这里就用到了严格模式，因为void返回的是undefined所以不能给他赋值为空，严格模式开启不能这么赋值，严格模式关闭了就可以这么赋值了

全局安装"ts-node"环境
安装它的原因是ts自带的tsc命令不能直接运行ts代码。但是要注意ts-node不等于node.js仅仅是封装了ts的编译过程，提供直接运行ts代码的能力

npm install -g ts-node

ts声明文件

npm i @types/node -D

讲解任意类型

// any 任意类型 unknown 不知道的类型
//1，top type 顶级类型 any unknown
//2，Object
//3，Number String Boolean
//4，number string boolean
//5， 9     "小海"  true
//6，never
// unknown 只能赋值给自身 或者any
// unknown 没办法读任何属性 方法也不可以调用
// unknown 比 any 类型更加的安全
unknown类型属性无法读取也不能调用的举例
let info:unknown={name:'小海'}
console.log(info.name);

object和Object的区别

object类型表示非原始对象，number，string，boolean，symbol，null或undefined在JavaScript中为原始类型

//举例
let a5:object=123//错误 原始类型
let a6:object="123"// 错误 原始类型
let a7:object=false// 错误 原始类型
let a8:object=[]//正确
let a9:object={}//正确
let a10:object=()=>212//正确

Object类型是所有Object类的实例类型，简单来说就是Object就是一个对象，但是它包含了js原始的所有公用的功能

//举例
let a:Object=123//数字型
let a1:Object="123"//字符串型
let a2:Object=[]//数组型
let a3:Object={}//空对象型
let a4:Object=()=>212//Function型

• Object 接口定义了Object.prorotype原型对象上的属性
  
  Object 类的所欲哦实例都继承lObject接口中的所有属性
  
  再来说以下空对象{}
  空对象：它描述了一个没有成员的对象。当你访问任何属性时TS中都会编译报错。但是你可以使用Object类型上所有的属性和方法，这些属性和方法可通过JavaScript的原型链隐晦式的使用
  在JavaScript中可以给空对象进行赋值，但是TypeScript中会报错
  
  因为上面a的类型是{}推断出来的，它能对已有的属性赋值。如果需要进一步创建对象，我们可以使用类型断言as来消除TypeScript的类型检查

最好是在声明对象过程中一次性构建好

它和Object很像，可以包含任何类型

let a11:{}=123
let a12:{}="123"
let a13:{}=[]
let a14:{}={}
let a15:{}=()=>212

函数类型

//1.函数定义类型和返回值 | 箭头函数定义类型和返回值
//2.函数默认的参数 | 函数可选参数
//3.参数是一个对象如何定义
//4.函数this类型
//5.函数重载

1. 函数定义类型和返回值 | 箭头函数定义类型和返回值

//函数定义类型和返回值
function add(a: number, b: number): number {
    return a + b
}
console.log(add(2, 4));

//箭头函数定义类型和返回值
const add_ = (a: number, b: number): number => {
    return a + b
}
console.log(add_(5,6));

在函数中{}叫做块级作用域，当箭头函数就一句话时可以省略掉花括号同时也不用加return，里面会有一个隐晦的return返回

2. 函数默认的参数 | 函数可选参数

//给函数参数定义默认值
const add_add = (a: number=1, b: number=7): number => {
    return a + b
}
console.log(add_add());

//可选参数和默认值不能混用，这里会报错，请看下图
const add_a = (a: number=1, b?: number=7): number => {
    return a + b
}
console.log(add_a());

//可选参数和默认值不能混用，可选参数得放在最后
const add_a = (a: number=10, b?: number): number => {
    if(b!==undefined){
        return a+b
    }else{
        return a
    }
     
}
console.log(add_a(9,2));

3. 参数是一个对象如何定义

//函数的参数是一个对象形式
interface X{
    name:string
    age:number
}
function add_ad(user:X):X{
    return user
}
console.log(add_ad({name:'小海',age:1}));

4. 函数this类型

//ts可以定义this类型，在js中无法使用，必须是第一个参数定义this类型
interface Obj{
    user:number[]
    add:(this:Obj,num:number)=>void
}
let obj:Obj={
    user:[1,2,3],
    add(this:Obj,num:number){
        this.user.push(num)
        return this.user
        
    }
}
obj.add(4)
console.log(obj.user);

5. 函数重载

//函数重载举例
let user: number[] = [1, 2, 3, 4, 5]
function findNum(add: number[]): number[]//如果传的是一个number类型的数组那就做添加
function findNum(id: number): number[]//如果传入的是一个id就是查询单个
function findNum(): number[]//如果没有传入东西就是查询全部
function findNum(ids?: number | number[]): number[] {
    if (typeof ids == 'number') {
        return user.filter(v =>v == ids)
    } else if (Array.isArray(ids)) {
        user.push(...ids)
        return user
    } else {
        return user
    }
}
console.log(findNum());
console.log(findNum(2));
console.log(findNum([5,6,7,8]));

Array.isArray(被判别对象)//判断传入的参数是否是数组类型

联合类型 | 类型断言 | 交叉类型

联合类型标识定义的变量可以是同属于两个类型

实际需求在存储一些座机号时，既属于字符串又属于数字类型

所以我们就可以使用联合类型支持座机字符串

let phone:number | string = '0310-78421'

//联合类型，后端可以给字符串也可以给Boolean值类型 “|”在这里指的是或的意思
let fn=function(type:number | boolean):boolean{
    return !!type
}
let result=fn(1)
console.log(result);

交叉类型（有点继承的那个味道了）

//交叉类型
interface People{
    name:string
    age:number
}
interface Man{
    sex:number
}
const xiaohai=(man:People & Man):void=>{
    console.log(man);
    
}
xiaohai({name:'小海',age:1,sex:1})

类型断言
就是ts相较于js是个强类型的语言他会判断你定义的类型，如果你定义的不对会提示错误那类型断言就是告诉ts我不认同他的判定规则，我就认为我定义的是什么类型
就像这个例子

//用的联合类型类型既可以是数字又可以是字符串，但是ts判断把num判定为了number类型所以不能用length这个方法
let func=function(num:number | string):void{
    console.log(num.length);
}
func('123124')

这里由类型断言一下

let fun=function(num:number | string):void{
    console.log((num as string).length);
}
fun('123124')

这里虽然不报错了但是也存在一个问题

这里联合类型我可以传入字符串或者数字类型，但是我在这里把num断言为了字符串类型所以传入给num一个数组最后会返回一个undefined
这里应该对断言有一个深入了解了，我理解为强制干预ts的判定规则，告诉它这个类型是什么类型，但是要慎用

interface A {
    run: string
}
interface B {
    build: string
}
let func = (type: A | B): void{
    console.log(type.run);
}

这段代码给type定义为联合类型的对象，但是会提示B上没有这个run这个属性，他的判定有点先数学中的取交集必须两给都有才行，那还可以给对象加一个对象类型的断言，但是没什么乱用该报错还是爆粗，只是欺骗了下编译器罢了😄(骗骗兄弟可以，别把自己给骗了)