点击“前端自学社区”查看更多精彩
2020了,很多朋友疑问 TypeScript 有必要学吗
答案: 当然有必要。
现在Vue 3.0 今年预计更新了，底层采用TS 编写,
React 已经采用 TS 编写
Angular 很早就采用TS 了
前端三大巨头框架都已采用，可知TypeScript的重要性了。现在学习TypeScript 相当于站在了前端的前沿的道路，等Vue 3.0 出来,你会很快入手
什么是TypeScript
TypeScript 是一门由微软开发的免费开源的编程语言。它是 JavaScript 的一个超集，TypeScript 在 JavaScript 的基础上添加了可选的静态类型和基于类的面向对象编程。
选择TypeScript的理由
√TypeScript 增加了代码的可读性和可维护性;
√TypeScript 非常包容;
√TypeScript 拥有活跃的社区;
x有一定的学习成本,需要理解接口（Interfaces）、泛型（Generics）、类（Classes）、枚举类型（Enums）等前端工程师可能不是很熟悉的概念;
x集成到构建流程需要一些工作量;
x短期可能会增加一些开发成本，毕竟要多写一些类型的定义，不过对于一个需要长期维护的项目，TypeScript 能够减少其维护成本;
x集成到构建流程需要一些工作量;
TypeScript 快速入门
安装TS 环境
#npm install -g typescript
VSCode 配置自动编译文件
#1. 在目录下
tsc --init 自动生成 tsconfig.json
tsconfig.json 下 outdir 是输出的路径
#2. 任务--- 运行任务 监视 tsconfig.json
基本语法
数组
定义使用
// 第一种定义方法 let 数组名：类型[] = []
var arr:number[] = [1,2,3];
console.log(arr);
// 第二种定义方法 let 数组名：Array[类型] = []
var newArr:Array<number> = [1,2,3];
console.log(newArr)
元组
它表示 已经 元素的个数和元素类型的数组，各个元素类型可以不一样。
访问元组长度 和 元素
var strArr:[number,string,boolean] = [22,'测试',false]
console.log(strArr.length)
console.log(strArr[0])
#它只能按类型的优先顺序输入内容，否则报错
枚举 enum
enum类型是对JavaScript标准数据类型的一个补充。
// 枚举
enum info {student = '学生', teacher = '教师', parent = '家长' };
let names:string = '张三';
var XiamoMing:info = Job.student;
console.log(names+'是'+XiamoMing) //张三是学生
enum Color {red,black= 4,blue};
const d:Color = Color.red;
const s:Color = Color.blue;
console.log(d); //默认输出下标索引 0
console.log(s) // 5 , 可以修改下标索引
# 定义
# 枚举就是 可以方便的 读出某个属性是什么， 定义一次，可多次使用
任意类型 any
any 为 任意类型，一般在获取dom 使用
// 任意类型
const newArrs:any = ['测试不同数据 ',222,false]
console.log(newArrs)
# 输出结果为[ '测试不同数据 ', 222, false ]
# 使用场景：当你不知道类型 或 一个对象 或数据 需要多个类型时，使用any
undefined 类型
let num:number | undefined ;
console.log(num) // 输出 undefined， 但是不会报错
let newNum:number | undefined = 33;
console.log(newNum) // 输出 33
never 类型
never 代表不存在的值类型，常用作为 抛出异常或者 无限循环的函数返回类型
# 应用场景
#1. 抛错误
const errDate = (message:string): never => {
throw new Error(message)
}
#2. 死循环
const date_for = (): never => {
while(true) {}
}
# never 类型是任意类型的子类型，没有类型是never 的子类型
别的类型不能赋值给never类型， 而 never 类型可以赋值给任意类型
void 类型
void 为 函数没有类型，一般用在没有返回值的函数
# 如果方法类型为number， 则必须返回内容， 内容且必须为数字
function add():number{
return 2323;
}
# 如果方法类型为void，不需要返回内容
function getAdd():void{
console.log('测试')
}
# 如果方法类型为any，则可以返回任意类型
function getAny():any{
return 999 + 'Hello TypeScript'
}
const aa = getAny()
console.log(aa)//999 'Hello TypeScript'
类型检测
类型推断
变量的声明和初始化在同一行时，可以省去类型的声明
const names = 'XiaoMing' 此时names的变量类型为 string
names = 22 // TS 已经推断出了names 类型为string，而不能赋值为 其它类型
console.log(names)
联合类型
取值可以分为多种类型其中的一种
let response: object | string = receive() // receive() 返回的值可以是object 或者string
TS 中的函数
function 使用
#方法定义 传递参数
function getNum(str1:any,age:number):any{
console.log(str1+'的年龄为'+age)
}
getNum('张三',22)
//输出结果为：张三的年龄为22
# 在TS 中 仍然可以使用箭头函数
var ss = (str2:string,hobby:string) =>{
console.log(str2+"的爱好是"+hobby)
}
ss('小红','踢毽子')
//输出结果为：小红的爱好是踢毽子
function 参数
可选参数格式：
1.函数名（变量名？：类型）:类型 {}
2.使用场景：在使用的时候，不知道是否应该传递该参数，就可以使用 可选参数
默认参数格式：
1.函数名 (变量名：类型 = 默认值) {}
使用场景：如果在调用函数时，不需要传递其它参数，直接调用函数即可，如果想修改默认参 数，可以参数顺序位置修改即可
function 默认参数
function getInfo(name:string = '张三',age:number = 22):void {
console.log(`姓名为${name},年龄为${age}`)
}
// 不传递参数，使用默认值时调用
getInfo()
//姓名为张三,年龄为22
//如果函数有多个默认参数时，想修改其中的一个，其它对应的位置改为undefined即可
getInfo(undefined,33)
//姓名为张三,年龄为33
getInfo('老王',55)
//姓名为老王,年龄为55
function可选参数
// 可选参数
function getDate(version:number, names?:string):void {
if (names !== undefined) {
console.log(`版本号为${version},项目名为${names}`)
} else {
console.log(`版本号为${version}`)
}
}
getDate(0.2)
//版本号为0.2
function 剩余参数
剩余参数要求：
只能定义一个
定义为数组
只能定义在参数的最后一位
//剩余参数
function add(num1:number,num2:number,...numArr:number[]){
let initCount:number = num1 + num2
for (const item of numArr) {
initCount+= item
}
console.log('累加为='+initCount)
}
add(1,2,3,4,5,6) //累加为=21
ES6_11_Module 的语法(import, export,export default )
ES6系列文章已经在公众号更新完
Vue系列文章已经在公众号更新完
扫码关注，获取更多资料
扫描二维码， 回复 ‘ 加群 ‘ 可以一起来学习
原创不易 觉得不错的话点一下 **在看↓** 😝