一 ts的基本介绍1.1 什么是ts?通俗来说TS是指TypeScript,简单来说ts就是带“类型检查的”javascript,可以简单理解为javascript的“升级版”1. TypeScript由微软开发是基于JavaScript的⼀个扩展语⾔。2. TypeScript包含了JavaScript的所有内容即TypeScript是 JavaScript 的超集。3. TypeScript增加了静态类型检查、接⼝、 泛型等很多现代开发特性更适合⼤型项⽬的开发。4. TypeScript需要编译为JavaScript然后交给浏览器或其他JavaScript 运⾏环境执⾏。1.2为什么需要ts1.2.1 ts的发展速度JavaScript 当年诞⽣时的定位是浏览器脚本语⾔⽤于在⽹⻚中嵌⼊简单的逻辑且代码量很少。随着时间的推移JavaScript 变得越来越流⾏如今的 JavaScript 已经可以全栈编程。现如今的 JavaScript应⽤场景⽐当年丰富的多代码量也⽐当年⼤很多随便⼀个JavaScript 项⽬的代码量可以轻松的达到⼏万⾏甚⾄⼗⼏万⾏然⽽ JavaScript 当年“出⽣简陋”没考虑到如今的应⽤场景和代码量逐渐就出现了很多困扰。1.2.2 js的困扰1. 不清不楚的数据类型let a a 9 a hello a false2. 有逻辑漏洞funciton show(a) { const a 10 % 2 0 ? 偶数 : 奇数 // 明显的逻辑漏洞bug if(a 偶数) { console.log(偶数) }else if(a ! 奇数) { console.log(偶数) } }3. 访问不存在的属性let obj {name: aaa, age: 10} // 访问不存在的属性 console.log(obj.sex)4. 有错误的拼写let b sadADA //拼写错误 console.log(b.toUpercase())1.3 静态类型检查1. 在代码运⾏前进⾏检查发现代码的错误或不合理之处减⼩运⾏时出现异常的⼏率此种检查叫『静态类型检查』TypeScript 和核⼼就是『静态类型检查』简⾔之就是把运⾏时的错误前置(在写代码的过程中就能迅速发现错误。2. 同样的功能TypeScript 的代码量要⼤于JavaScript但由于 TypeScript 的代码结构更加清晰在后期代码的维护中 TypeScript 却胜于JavaScript。1.3 编译ts1.3.1 命令行编译下载插件直接创建ts, 利用命令进行ts转-》js// 下载包 npm i typescript -g // 转换ts文件 tsc demo.ts1.3.2 自动化编译保存自动编译不在手动执行命令去进行转换ts到js创建ts的编译控制文件(类似于 npm init) -会初始化tsconfig.json文件tsc --init修改配置文件 - 有写错时不进行ts的转换noEmiitOnError: true创建监听tsc --watch 或 tsc -w二 类型声明对变量或者函数进行类型类型声明// 变量类型; 一旦定义了类型后续赋值不是定义类型均会提示错误 let a:string hello let b:number 10 let c:hello // 字面量代码c拥有都是hello,一般般实际应用不这么使用 // funciton 方法名(参数值: 参数值类型): 返回值{} funciton demo(x:number, y:number):number { return x y }三 类型推断ts会根据我们的代码进行类型推导但是注意类型推断不是万能了面对复杂的类型推断容易出问题。所以尽量去明确编写类型声明let a 10 // 类型推断是number a hello // 赋值会提示报错四 类型总览4.1 js的基本类型都哪些numberstringbooleannullundefinedsymbolbigintobject4.2 ts的基本类型js的基本类型新增了6个新类型any, unknow, never, void, tuple, enum两个自定义类型的方式type,interface注意点在JavaScript中的这些内置构造函数Number、String、Boolean⽤于创建对应的包装对象 在⽇常开发时很少使⽤在TypeScript中也是同理所以在TypeScript中进⾏类型声明时通常都是⽤⼩写的number、string、booleanlet str1: string str1 hello str1 new String(hello) //报错 let str2: String str2 hello str2 new String(hello) console.log(typeof str1) console.log(typeof str2)五 常用类型和语法5.1 anyany: 任意类型一旦变量被限制为any,就代表关闭了对类型的检查后续赋值等都不会报错警告let a:any a 1 a hello a false // 任意值都可以赋值给any let c:string c a // 无警告5.2 unkonwunkonw: 未知类型可以理解为定义的时候不确定是什么类型但是在使用时候必须要知道let a:unkonw a 100 a false a hello // 可以被任意类型赋值 let b:string b a // 警告不能将类型unkonw分配飞类型 string // 进行类型缩小后在进行使用 //加上类型判断 if(typof a string) { b a } // 加上断言 let x:string x a is string // 告诉x a就是string类似 x stringa // 第二种写法 stringa.toUpperCase() // 使用属性方法前也需要进行类型限制5.3 nevernerver: 任何值都不是。let a:nerver // 没有意义指定变量a为never后意味着a以后都不能存任何数据 // never一般来说是系统自动推断出来的 // 指定b的类型为string let b: string // 给a设置⼀个值 b hello if (typeof b string) { console.log(b.toUpperCase()) } else { console.log(b) // TypeScript会推断出此处的a是never因为没有任何⼀个值符合此处的 逻辑 } // 限制函数返回值 // 限制throwError函数不需要有任何返回值任何值都不⾏像undeifned、null都不⾏ function throwError(str: string): never { throw new Error(程序异常退出: str) }5.4 voidvoid: 空函数不返回任何值调用者也不以来返回值做任何操作//标准使用 // 注意 函数定义会隐式返回undefined, 这个时候就是void; funciton load(msg: string):void{ console.log(msg) } // 以下写法均正确 funciton load_test(msg: string):void{ console.log(msg) return } funciton load_test2(msg: string):void{ console.log(msg) return undefined } load(你好) const a load(你好) // 错误这就依赖返回值做事情了 funciton load1(msg: string):undefined{ console.log(msg) } if(load1(aa)) {} // ok的5.5 object关于object与Object直接说结论实际开发中⽤的相对较少因为范围太⼤了。let a:object //a的值可以是任何【⾮原始类型】包括对象、函数、数组等 // 以下代码是将【⾮原始类型】赋给a所以均符合要求 a {} a {name:张三} a [1,3,5,7,9] a function(){} a new String(123) class Person {} a new Person() // 以下代码是将【原始类型】赋给a有警告 a 1 // 警告不能将类型“number”分配给类型“object” a true // 警告不能将类型“boolean”分配给类型“object” a 你好 // 警告不能将类型“string”分配给类型“object” a null // 警告不能将类型“null”分配给类型“object” a undefined // 警告不能将类型“undefined”分配给类型“object” let b:Object //b的值必须是Object的实例对象除去undefined和null的任何值 // 以下代码均⽆警告因为给a赋的值都是Object的实例对象 b {} b {name:张三} b [1,3,5,7,9] b function(){} b new String(123) class Person {} b new Person() b 1 // 1不是Object的实例对象但其包装对象是Object的实例 b true // truue不是Object的实例对象但其包装对象是Object的实例 b 你好 // “你好”不是Object的实例对象但其包装对象是Object的实例 // 以下代码均有警告 b null // 警告不能将类型“null”分配给类型“Object” b undefined // 警告不能将类型“undefined”分配给类型“Object”声明对象类型// age是可选属性name是必须属性 let person: {name: string, age?: number} let person2: {name: string; age?:number} let peroson3: { name: string age?:number } // 添加任意属性 // 索引签名 - 定义任何属性名是string属性值是任意类型key可以是任何也可以[name:string] let pereson3: {name: string, age?:number, [key:string]: any} // 声明函数类型 let count: (a: number, b: number) number count function (x, y) { return x y } // 声明 数组 类型 let arr1: string[] let arr2: Arraystring arr1 [a,b,c] arr2 [hello,world]5.6 元组元组(Tuple)是⼀种特殊的数组类型可以存储固定数量的元素并且每个元素的类型是已知的且可以不同。元组⽤于精确描述⼀组值的类型?表示可选元素。元组不是关键词他是一种特殊的数组类型// 第⼀个元素必须是 string 类型第⼆个元素必须是 number 类型。 let arr1: [string,number] // 第⼀个元素必须是 number 类型第⼆个元素是可选的如果存在必须是 boolean 类型。 let arr2: [number,boolean?] // 第⼀个元素必须是 number 类型后⾯的元素可以是任意数量的 string 类型 let arr3: [number,...string[]] // 可以赋值 arr1 [hello,123] arr2 [100,false] arr2 [200] arr3 [100,hello,world] arr3 [100] // 不可以赋值arr1声明时是两个元组5.7 enum 枚举枚举enum可以定义⼀组命名常量它能增强代码的可读性也让代码更好维护。enum Directions { Up, Down, Left, Right } let x Directions.Up;5.8 typetype:可以为任意类型创建别名让代码更简洁可读性更强同时能更方便的复用和扩展type Num number let price:Num price 100 // 联合类型 - 一个值是集中不同类型之一 type Status number | string funciton printStatus(status: Status) { console.log(status)} // 交叉类型 将多个类型合并为一个类型 type Area { width: number; height: number; } type Adress { num: number; cell: number; room: number; } type Huouse Area Adress const huose: Huouse { widht: 100, height: 100, num: 10, cell: 10, room: 101 } //特殊类型 使⽤ 限制函数返回值为 void 时 TypeScript 并不会严格要求函数返回空。 type LogFunc () void const f1: LogFunc () { return 100; // 允许返回⾮空值 }; const f2: LogFunc () 200; // 允许返回⾮空值 const f3: LogFunc function () { return 300; // 允许返回⾮空值 };