Typescript进阶之路

类型检查是在运行前的编译阶段
• 例子—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 = truelet count: number = 123let userName: string = \'chenchenchen\'let u: undefined = undefinedlet n: null = nulllet 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][]56c= [[\"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 //t15a9rue，一模一样的函数类型可以赋值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 | stringnumberorstring = \"abc\"numberorstring = 123

类型断言用于处理类型不确定的情况(编译器无法判断类型)，强行让编译器按照你规定的类型处理

function getlength(input:string | number):number {const str = input as stringif(str.length) {return str.length}else {const number = input as numberreturn number.toString().length![Alt text](./docker.md)}}

TypeScript也提供了

Type Guard

这种机制来确认具体类型

f、类Class

类(Class)：定义了一切事物的抽象特点，类似于蓝图(比如汽车的一张设计图)

对象(Object)：类的实例(造出来的具体的汽车)

class Car { //定义类color: stringconstructor(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 blackconsole.log(tesla.start()) //this car is whiteconsole.log(tesla.run()) //this running car is whiteconsole.log(bmw.start()) //blue , this aCar is blueconsole.loh(aCar.hight) //100class Person {constructor(private _name: string) { //定义了一个私有属性name}get name() { //可以让外部访问私有属性return this._name + \' 加密\'}set name() { //可以在外部赋值，但一般保护类的私有属性const realName = name.split(\' \')[0] // chenthis._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无法自动分析变量类型的话，我们就需要类型注解来进行标注