【九月打卡】第5天 深入了解学习typescript

课程名称：Vue3 + Typescript 从0到1开发通用基础组件

课程章节：你好 Typescript： 进入类型的世界

课程讲师：张轩

课程内容：

1. 讲述了什么是typescript以及学习typescript的必要性；
2. 老师还讲了很多ts的优点，教会我们学习是主动性的而不是被动跟风
3. ts添加的各个新特性详解

课程收获：

一、typescript的优点

• 程序更容易理解，对变量的类型、函数的输入输出类型等可以更直观看到，不必花更多的时间去理解
• js是动态语言的类型，需要在运行的时候或者调试看可以看到某些错误，而ts则是静态语言类型，编译过程中就可以提前预知更多的错误，更有利于我们开发出高质量的代码
• ts的类型特点使得我们不用花更多的时间去猜测别人的代码，而是可以直接知道这个变量方法是干什么的
• ts越来越流行，在很多大型项目里都采用它，因为它可以更好的协同大团队的开发
• 新增很多好用的新特性，但也兼容了js

二、 如何安装typescript

• npm install -g typescript
• tsc -v 查看 tsc 版本
• Typescript 官网地址: https://www.typescriptlang.org/zh/

三、typescript的类型

• 原始数据类型：boolean、null、undefined、number、string、声明变量：let name:string = ‘jack’; let a:null = null
• any: let a:any = 123; a=‘yui’
• 数组: let a:number[] = [1,2,3]
• 元祖tuple: let a: [string,number] = [‘jsgd’, 1324]
• interface接口:对对象的形状进行描述,多加少加属性也不行，使用interface关键字声明

如：interfece Iperson {
	name: string,
	age:number，
	height?: number
}
let jack: Iperson = {
	name: 'jsck',
	age: 10
}

• 函数

function add(x: number): number{
	return x
}

• 联合类型和类型断言:let a: number|string = 12
• 枚举 使用enum关键字声明

enum desc {
	up,
	down,
	left,
	right
}

desc.up => 0
desc[0] => up

enum desc {
	up=10,
	down,
	left,
	right
}

desc.dowm => 11

• 泛型

function reverse<T,U>(a: [T,U]):[U,T]{
	return [a[1], a[0]]
}
let b = reverse(['we', 345])
b[1] => 'we'

• 类型别名: 使用type关键字声明

interface IName {
	name: string
}
type Iperson  = IName &{age: number}

let person: Iperson = {
	name: 'we',
	age: 126
}

之前学习了vue会使用ts，但是总是看得懂自己写就不会了，所以今天重新学习了一下typescript，还是很有收获的，自己也跟着老师写了一下ts更加深了印象，但是ts的学习成本还是很高的，尽管能理解但是使用方面还是需要下一番功夫才能真正的掌握，尤其是接口和泛型的使用是学习ts的难点，总是似懂非懂，需要重点学习，多运用与实际项目才能熟练掌握，所以我会继续学习，感谢老师这节课的讲解，真的非常详细，每个特性都举例说明非常容易理解，棒棒的！听完还想再听一遍。