typescript索引类型_TypeScript学习指南(有PDF小书+思维导图)

前言 时间过得真快啊，转眼还有十多天就2021了。年前计划的目标还有好多没有实现，愧疚啊！ 2020唯一让我值得骄傲的是找到了一份满意的工作，有足够的自己时间，来做自己的事情。坚持了100天的跑步，体重从185减到现在的157，我就不在这里做总结了，等年底最后一天，来一个年度总结。这篇TypeScript文章写了好久，断断续续将近一个月，用下班时间慢慢啃。其实十一月底就差不多了，感觉没完全吸收。到十二月份了，突然起来我生病了，还挺严重，住了十来天院，一开始把我下坏了，好在后面好点了。好了不扯了，说正文，早在2019年我就把TypeScript学了，学完没实际应用，编程这技术好久不用，等于不会。哈哈，这Vue 3.0 今年在十月份出来了，在不搞搞 TypeScript ，真跟不上 时代了(其实也没有，目前Vue 3.0 也在建立社区中，需要一段过渡时间吧)，所以准备重学 TypeScript ，系统的来过一遍，然后做用TypeScript + Vue 3.-0 /   TypeScript + React 做一些demo / 项目 来熟练它们的配合使用。学会TypeScript 也对你竞争有点优势，在跳槽时，你已经使用TypeScript  结合 框架 做过一些项目，面试官也会优先考虑你的，薪水从而也提升了。前端之路还有很长，新的技术/框架更新频率很快， 最终还是离不开 JavaScript。  JavaScript 好深奥哦！ ✨✨文末有彩蛋i✨✨ 正文来了

入手导图

TypeScript

一，安装环境

#npm install -g typescript

1.1 VSCode 配置自动编译文件

#1. 在目录下  
 tsc --init   自动生成 tsconfig.json 
 tsconfig.json 下 outdir 是输出的路径
#2.  任务--- 运行任务   监视 tsconfig.json

二，基本语法

2.1 数组

定义使用

// 第一种定义方法   let 数组名：类型[] = []
var arr:number[] = [1,2,3];
console.log(arr);
// 第二种定义方法    let 数组名：Array[类型] = []
var newArr:Array<number> = [1,2,3];
console.log(newArr)

2.2 元组

它表示 已经 元素的个数和元素类型的数组，各个元素类型可以不一样。

访问元组长度 和 元素

var strArr:[number,string,boolean] = [22,'测试',false]
console.log(strArr.length)
console.log(strArr[0])
#它只能按类型的优先顺序输入内容，否则报错

2.3 枚举 enum

enum类型是对JavaScript标准数据类型的一个补充。

• 如果没有给枚举指定索引的话，默认为 0 ， 通过  枚举对象[索引]  可以获取值
• 如果指定了枚举索引为字符串的话，通过  枚举.属性  获取的 它的值

enum Sex {Man,Woman}

let m:Sex = Sex.Man;
console.log(m) //0


let w: string = Sex[1]
console.log(w) //Woman


enum Animal {Dog = 3, Cat, Tiger};

console.log(Animal[5]) //Tiger


enum info {student = '学生', teacher = '教师',  parent = '家长' };

console.log(info.teacher)  //教师

2.4 任意类型 any

any 为 任意类型，一般在获取dom 使用

// 任意类型
const newArrs:any = ['测试不同数据 ',222,false]
console.log(newArrs)
# 输出结果为[ '测试不同数据 ', 222, false ]
# 使用场景： 当你不知道类型 或 一个对象 或数据 需要多个类型时，使用any

2.5 undefined 类型

let num:number | undefined ;
console.log(num) // 输出 undefined， 但是不会报错
let newNum:number | undefined = 33;
console.log(newNum)  // 输出 33 

2.6 never 类型

never 代表不存在的值类型，常用作为 抛出异常或者 无限循环的函数返回类型

# 应用场景 
 #1. 抛错误
    const errDate = (message:string): never => {
     
        throw new Error(message)
    }
    #2.  死循环
    const date_for = (): never => {
     
        while(true) {}
    }
    
# never 类型是任意类型的子类型，没有类型是never 的子类型
别的类型不能赋值给never类型， 而 never 类型可以赋值给任意类型

2.7 void 类型

void  为 函数没有类型，一般用在没有返回值的函数

# 如果方法类型为number， 则必须返回内容， 内容且必须为数字
function add():number{
     
    return 2323;
}

# 如果方法类型为void，不需要返回内容
function getAdd():void{
     
    console.log('测试')
}

# 如果方法类型为any，则可以返回任意类型
function getAny():any{
     
    return 999 + 'Hello TypeScript'
}

console.log(getAny())//999 'Hello TypeScript'

三，类型断言

什么是类型断言？

• 有时候你在定义一个变量时，起初是不知道是什么类型，但在使用过程中知道是什么类型，这时就会用到类型断言了。

3.1第一种写法 尖括号

const str = '测试'

const resLength : number = (<string>str).length

3.2第二种写法  as

const str = '测试'

const resLength : number = (str as string).length

四，接口

TypeScript的核心原则之一是对值所具有的结构进行类型检查。

验证类型时，顺序不影响验证。

简单的来说，它是类型约束的定义，当你使用这个定义接口时，它会一一匹对接口中定义的类型。

只要不满足接口中的任何一个属性，都不会通过的。

4.1 接口可选属性

有时候，接口属性不是必须全部需要的，满足某些条件才会需要，这时，就可以采用可选属性

格式 ：属性 ?: 类型

interface  Login{
     
    userName: string,
    password: string,
    auth ?: string
}



function getLogin(obj: Login) {
     
    if(obj.auth == '管理员') {
     
        console.log('可以查看所有菜单')
    } else {
     
        console.log('您的权限比较低,目前不能查看')
    }
}