TypeScript=type+javascript TypeScript是javaScript的超集，js有的ts都有
安装TypeScript
Node和游览器不能直接运行TS，需要把TS转换成JS
- npm i typescript -g #全局安装TypeScript
- tsc -v #查看版本
- tsc index.ts #编译ts文件：生成js文件
- node index.js #执行js代码
简化运行TS步骤
- npm i -g ts-node #安装ts-node包
- ts-node index.ts #将TS转换成JS，然后运行JS代码
tsconfig.json
运行tsc xxx.ts命令的时候，会把ts文件编译成js文件 { "compilerOptions":{ "watch":true, //只要代码改动，则自动刷新 "removeComments":true //移除注释 } }
为什么要为JS添加类型支持
function multiply(a,b){ return a*b } //下面这样并不会报错 multiply(1,2) //但是后面两个显然有错误 multiply("1",2) multiply(1,"2")
那怎样做就可以检查出错误呢？在参数后面添加类型检查
function multiply(a:number,b?:number){ return a*b } multiply(1,2) multiply("1",2)
常见的类型检查有number、string、boolean和any
联合类型
//联合类型 let color:number | string color="red" color=0xff0000 color=true //编译器报错 联合类型可以实现类似枚举的效果 let gender:"male" | "female" let dice:1 | 2 | 3 | 4 | 5 gender="male" //不会报错 gender="body" //不会报错 dice=3 dice=true //会报错
函数类型
我们可以设置函数签名，我们可以限定函数的类型和返回值，这在约束回调函数的时候尤其好用 function getUserName(callback:(data:string)=>void){
} getUserName((data)=>{ alert("hello world") }) 如果传入了不满足要求的回调函数，编译器也会报错 getUserName((data)=>{ alert(data*2) })
类型别名
遇到需要重复使用的数据类型，也可以使用类型别名 type UserID=number | srting function getUserInfo(userId:UserID){ } 代码先编译，后执行 TypeScript:静态类型语言，在编译期做类型检查。代码在编译(执行前)就发现错误。 JavaScript:动态类型语言，在执行期间做类型检查。代码真正执行的时候去发现错误
TS基础类型
原始类型：number、string、boolean、undefined、null、symbol 冒号后面的内容叫：类型注解 let username:string="北京"； let age:number=21; let isLoading:boolean=true; let a:null=null; let b:undefined=undefined; let c:symbol=Symbol();
数组类型
let numbers:number[]=[100,200,300] let numbers1:Array=[400,500,600] let arr:(number | string)[]=[100,200,"北京","上海"] let arr1:number | string[]=200
类型别名
相同的类型反复使用，这时候 tyep typeArray=(number | string)[] let arr1:typeArray=[2002,2003] let arr2:typeArray=["北京","上海"]
函数类型
给函数添加类型，实际给参数和返回值添加类型 //普通函数 function fn(num1:number,num2:number):number{ return num1+num2 } //箭头函数 const fn1=(num1:number,num2:number):number=>{ return num1+num2 } //同时指定参数和返回值类型 const fn3:(num1:number,num2:number)=>number=(num1,num2)=>{ return num1+num2 } console.log(fn3(100,200)) //void类型：没有返回值类型 const fn4=function(username:string):void{ console.log("hello"+username) } //可选参数 function mySlice(start?:number,end?:number){ console.log('起始索引',start,'结束索引',end) } mySlice() mySlice(10) mySlice(10,20)
对象类型
//写在同一行 let person:{name:string;age:number;say():vold}={name:"张三",age:21,say(){}}
//换行 let person1:{ name:string, age:number, say():void greet(name:string):void }={ name:"张三", age:21, say(){ console.log("北京欢迎你") }, green(){ console.log("欢迎来到北京") } }
元组
元组是另一种类型的数组，是明确元素数量和类型的数组 //元组 let position:[number,number]=[100,200]
