TypeScript
何为TypeScript
一、编程语言类型
- 动态类型语言(Dynamically Typed Language)
- 类型的检查是在运行时才做
- 例子---JavaScript、Ruby、Python
- 静态类型语言(Statically Typed Language)
- 类型检查是在运行前的编译阶段
- 例子---Java、c、c++
TypeScript提前了类型检查的时机，它是静态弱类型语言
二、TypeScript特性
TypeScript(简称ts)是一种由微软开发的自由和开源的编程语言。它是 Javascript 的一个超集，扩展了JavaScript的语法. 其本质上是向Javascript语言添加了可选的静态类型和基于类的面向对象编程
- JavaScript that scales
- 静态类型风格的类型系统
- 从es6到es10以至于exnext的语法支持
- 兼容各种浏览器、系统、服务器的开源语言
三、为什么使用TypeScript
当使用一个语言库的时候我们是要有这个需求的时候才用，就像一个组件的状态管理不复杂你就没必要用redux和vuex一样，而TypeScript正是能够解决我们开发过程中的一些痛点：
- 程序更容易理解
- 能够知道函数或者方法输入输出的参数类型，外部条件
- 不用等运行的时候才能知道数据的类型
- 更容易理解别人的代码不用询问
- 效率更高
- 在不同的代码块和定义中进行跳转
- 代码自动补全
- 更少的错误
- 编译期间能发现大量错误
- 杜绝常见的错误(...undefined)
- 非常好的包容性
- 完全兼容JavaScript
- 第三方库可以直接编写ts文件
TypeScript的实践
一、安装
使用npm管理
npm install -g typescript
安装完之后可执行tsc <文件名>.ts命令生产.js的文件，在执行过程中即使因为语法不对导致编译过程报错，但还是会生成.js文件
二、数据类型
Javascript 类型分类：
① 原始数据类型 - primitive values：
- Boolean
- Null
- Undefined
- Number
- BigInt
- String
- Symbol
② Object
undefined与null在==下是相等的，但在全等===条件下是不等的，Null类型，代表“空值”，代表一个空对象指针；Undefined类型，当一个声明了一个变量未初始化时，得到的就是undefined。
其中null表示"没有对象"，即该处不应该有值，典型用法是：
- 作为函数的参数，表示该函数的参数不是对象
- 作为对象原型链的终点
而undefined表示"缺少值"，就是此处应该有一个值，但是还没有定义。典型用法是：
- 变量被声明了，但没有赋值时，就等于undefined
- 调用函数时，应该提供的参数没有提供，该参数等于undefined
- 对象没有赋值的属性，该属性的值为undefined
- 函数没有返回值时，默认返回undefined
基于Javascript的数据类型，我们在写TypeScript的时候就会严格按照其类型定义数据，这样才有便于我们代码的维护与规范
1、原始数据类型：
let isType: boolean = true
let count: number = 123
let userName: string = 'chenchenchen'
let u: undefined = undefined
let n: null = null
let notSure: any = 1 //可为任何类型
notSure = "rewq"
notSure = false
2、Object类型：
a、数组：
let arrOfNumber: number[] = [1,2,3] //数字数组
arrOfNumber.push(4)
function test() {
console.log(arguments) //类数组
console.log(arguments.length) //长度
arguments.forEach(item => {}) //报错
let arr: any[] = arguments //报错，不能把类数组赋值给数组
}
b、元组：
let user: [string,number] = ["chen",66] //元组
const arr: (number | string)[] = [1,"2",3] //数组
元组相比于数组来说是明确的知道有几个子元素也就是长度固定，而且每个子元素是什么类型，一般元组的运用场景在导入csv的数据格式的时候有大用
const memberList: [string,string,number][] = [
["abb","bcc",12],
["cvv","asd",24]
]
c、interface接口：
let interface Animal {
readonly id: number; //只读不写,与const类似
name: string;
age?: number; //该属性不是必须
[propName: string]: any; //还可以有其他的属性，类型是string，值是任意值
say(): string; //还可以加方法
}
let dog: Animal = {
name: "duoduo",
age: 6
}
dog.id = 9527 //报错，只读不写
//interface一般可以做到类型别名的作用
interface Point {x: number, y: number} //与类型别名是一样的效果
type Point {x: number, y: number} //类型别名
function Pythagorean(data: Point) { //类型别名，一眼看出参数的构造
return Math.sqrt(data.x **2 + data.y **2)
}
Pythagorean（{ x : 4, y : 5}）
类型别名和接口的区别是有的，接口只能是对象类型，而类型别名还可以是其他类型
d、Function函数
//解构写法
function add({first , second} : {first : number; second : number}):number {
return first + second
}
const add = (x:number,y:number,z?:number):number
{ //约定输入输出都为数字的函数,z为可选参数
if(typeof(z) == number) {
return x+y+z
}else {
return x+y
}
}
let add2:string = add //false，函数类型不能赋值给字符串类型
let add3:(x:number,y:number,z?:number) => number = add //true，一模一样的函数类型可以赋值
function operate(): void { //不进行return的函数
console.log("sadasd")
}
接口类型还可以描述函数类型
interface Itest{
(x:number,y:number,z?:number): number
}
let add4:Itest = add //true
e、联合类型union types
let numberorstring:number | string
numberorstring = "abc"
numberorstring = 123
类型断言用于处理类型不确定的情况(编译器无法判断类型)，强行让编译器按照你规定的类型处理
function getlength(input:string | number):number {
const str = input as string
if(str.length) {
return str.length
}else {
const number = input as number
return number.toString().length
}
}
TypeScript也提供了Type Guard这种机制来确认具体类型
f、类Class
类(Class)：定义了一切事物的抽象特点，类似于蓝图(比如汽车的一张设计图)
对象(Object)：类的实例(造出来的具体的汽车)
class Car { //定义类
color: string
constructor(color) { //在类实例化的时候才会被执行
this.color = color
}
public start() { //开放的方法
console.log(`this car is ${this.color}`)
}
}
const benz = new Car("black")
class eCar extends Car { //继承类
run() {
console.log(`this running car is ${this.color}`)
}
}
const tesla = new eCar("white")
class aCar extends Car { //继承类，重写方法
static hight = "100" //静态属性
constructor(color) {
super(color) //子类的构造函数必须得调用父类的构造函数
console.log(this.color)
}
start() {
console.log(`this aCar is ${this.color}`)
}
}
const bmw = new aCar("blue")
console.log(benz.start()) //this car is black
console.log(tesla.start()) //this car is white
console.log(tesla.run()) //this running car is white
console.log(bmw.start()) //blue , this aCar is blue
console.loh(aCar.hight) //100
class Person {
constructor(private _name: string) { //定义了一个私有属性name
}
get name() { //可以让外部访问私有属性
return this._name + ' 加密'
}
set name() { //可以在外部赋值，但一般保护类的私有属性
const realName = name.split(' ')[0] // chen
this._name = realName //私有属性_name还是"chen"
}
}
const person = new Person("chen")
console.log(person.name); //chen 加密
person.name = 'chen 加密'
console.log(person.name) //chen 加密
一般我们通过类型注解和类型推断来确认数据的类型，例如
//类型注解
let count: number;
count = 123
//类型推断
let countInference = 123
一般当ts无法自动分析变量类型的话，我们就需要类型注解来进行标注