安装TypeScript环境
搞点前端框架基础,整个全栈的饭碗吃吃
在项目中安装TypeScript
进入项目目录下安装
npm install typescript --save-dev
D:\anglarProject\gavin>npm install typescript --save-dev removed 1 package, and audited 917 packages in 1m 122 packages are looking for funding run `npm fund` for details found 0 vulnerabilities
也可以在 全局中安装
npm install -g typescript
如果下载typescript时速度过慢,可以考虑换一个镜像源~国内镜像源
npm config set registry https://registry.npmmirror.com
TypeScript是js的超级集
开始一个新的项目来学习TypeScript的使用:
typescript的常用编译命令
首先学习一下typescript的语法:
我们要明确一点ts是js的超级,即ts是兼容js的,ts相对于js增加了一些功能:
类型批注和编译时类型检查 类型推断 类型擦除 接口 枚举 Mixin 泛型编程 名字空间 元组 Await 以下功能是从 ECMA 2015 反向移植而来： 类 模块 lambda 函数的箭头语法 可选参数以及默认参数
先来打印一下helloworld:
新建一个hello.ts文件,里面的内容如下:
const hello:string="hello_world" console.log(hello)
用typescript来编译一下:
tsc hello.ts
用node来运行一下刚刚编译生成的js文件
D:\anglarProject>node hello.js Hello World!
下面随便整一个html文件,引入hello.js
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>TypeScript学起来</title> <script src="hello.js"></script> </head> <body> <div>前路白云外,孤帆安可论</div> </body> </html>
我们可以同时编译多个ts文件(文件之间用空格隔开就好了)
tsc 常用的编译参数:
直接编译ts文件:
tsc 文件名.ts —>>会生成一个同名的js文件
将声明的变量给提取出来
tsc --declaration hello.ts
编译时会生成一个.d.ts文件
.d.ts文件的内容
为了编译时更加简洁,可以在编译时将注释给过滤掉
tsc --removeComments hello.ts
const hello : string = "Hello World!" console.log(hello) //这是注释文件 alert("hello") var hi="你好世界" alert(hi)
编译一下:
tsc --declaration --removeComments hello.ts
打开index文件可以体验一下
多个文件合并输出到一个文件
tsc hello.ts hi.ts --out hello.js
新建一个.ts文件,
function displayDate(){ document.getElementById("demo").innerHTML=Date(); }
index.html文件内容如下:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title>TypeScript学起来</title> <script src="hello.js"></script> </head> <body> <div>前路白云外,孤帆安可论</div> <p id="demo">点击按钮显示日期</p> <button type="button" onclick="displayDate()">显示日期</button> </body> </html>
源代码存储以及代码对于每个位置映射关系的信息.map的文件:
.map的文件内容
有版本号,文件名,来源 映射关系—>>这映射关系四个字母一组,具体映射关系暂不去管他了
{"version":3,"file":"hello.js","sourceRoot":"","sources":["hello.ts","hi.ts"],"names":[],"mappings":"AAAA,IAAM,KAAK,GAAY,cAAc,CAAA;AACrC,OAAO,CAAC,GAAG,CAAC,KAAK,CAAC,CAAA;AAClB,QAAQ;AACR,KAAK,CAAC,OAAO,CAAC,CAAA;AAEd,IAAI,EAAE,GAAC,MAAM,CAAA;AAEb,KAAK,CAAC,EAAE,CAAC,CAAA;ACPT,SAAS,WAAW;IACnB,QAAQ,CAAC,cAAc,CAAC,MAAM,CAAC,CAAC,SAAS,GAAC,IAAI,EAAE,CAAC;AAClD,CAAC"}
监视ts文件,在他们改变时重新编译
tsc --watch
tsc hello.ts hi.ts --declaration --sourcemap --removeComments --out hello.js --watch
注意:watch要放在最后
typescript的一些特点
1,typejs会忽略程序中的空格,制表符,换行符
2,typejs区分大小写
3,结束符分号是可选的,(如果语句写在一行上,是需要分隔符的)
typejs中的注释
单行注释 //
多行注释/* */
在编译时可以忽略掉注释
tsc --removeComments
TypeJs面向对象的戏码
这个就很java了
对象,类,方法…
整呗~~新建一个ts文件,
//这是一个类 class hello{ //这是一个变量 name ="我是一个粉刷匠" //这是一个构造方法 constructor ( ){ } //这是一个方法 printName():string{ return this.name } } //实例化 var obj=new hello(); //打印 console.log(obj.printName());
运行生成的js文件
D:\anglarProject>node ty.js 我是一个粉刷匠
编译之后生成的js文件:
//这是一个类 var hello = /** @class */ (function () { //这是一个构造方法 function hello() { //这是一个变量 this.name = "我是一个粉刷匠"; } //这是一个方法 hello.prototype.printName = function () { return this.name; }; return hello; }()); //实例化 var obj = new hello(); //打印 console.log(obj.printName());
看起来ts文件确实要比js好写一些
TS基础数据类型:
any —>>任意类型
任意值类型可以让这些变量跳过编译阶段的类型检查
let yyds:any =1 console.log(yyds) yyds ="我就是一个string类型" console.log(yyds) yyds=true console.log(yyds) let ds:string="long ranger" ds="我只能是字符串了" console.log(ds)
生成的js文件:
//类型推断 var yyds = 1; console.log(yyds); yyds = "我就是一个string类型"; console.log(yyds); yyds = true; console.log(yyds); var ds = "long ranger"; ds = "我只能是字符串了"; console.log(ds);
let x: any = 4; x.ifItExists(); // 正确，ifItExists方法在运行时可能存在，但这里并不会检查 x.toFixed(); // 正确
number–>>数字类型 可以表示整数和小数
string -->>字符串
单引号和双引号都可以,
注意:使用反引号时可以定义多行文本和内嵌表达式
boolean -->>布尔类型
var name1 = "Hello"; var years = 5; var words words = `您好，我是 ${ name1 } 年纪 ${ years + 1} `; console.log(words)
编译后生成的js文件:
var name1 = "Hello"; var years = 5; var words; words = "\u60A8\u597D\uFF0C\u6211\u662F ".concat(name1, " \u5E74\u7EAA ").concat(years + 1, " "); console.log(words);
在新版本的typejs中,有一个关键字 let
var name1 = "Hello"; var years = 5; var words words = `您好，我是 ${ name1 } 年纪 ${ years + 1} `; console.log(words) let helo:string ="haha" //数字类型 let size:number=100 //反引号 let result:string =`这就是个测试 ${helo} 数字是${size}` //布尔类型 let bool:boolean=true console.log(bool) console.log(result)
编译后生成的js
var name1 = "Hello"; var years = 5; var words; words = "\u60A8\u597D\uFF0C\u6211\u662F ".concat(name1, " \u5E74\u7EAA ").concat(years + 1, " "); console.log(words); var helo = "haha"; //数字类型 var size = 100; //反引号 var result = "\u8FD9\u5C31\u662F\u4E2A\u6D4B\u8BD5 ".concat(helo, " \u6570\u5B57\u662F").concat(size); //布尔类型 var bool = true; console.log(bool); console.log(result);
数组类型,元组,枚举
let arr:number[]=[1,2,3,4,5]; console.log(arr) //泛型数组 class Person{ public name:string public age:number constructor ( name:string, age:number){ this.name=name this.age=age } } let arr2:Array<Person>=[new Person("Sofia",26),new Person("Halo",28)] console.log(arr2) //元组 元素顺序对应的数据类型要一致 let xx:[string,number,boolean] xx=["hello",100,true] console.log(xx) console.log(xx[0]) //枚举 enum Color{red,green,blue}; let r:Color=Color.red console.log(r)//打印数字 //方法 function printData():void{ console.log("随便玩一下") } function printD(name:string):string{ return name } console.log(printD("amazing"))
编译后运行:—>>
生成的js文件:
var arr = [1, 2, 3, 4, 5]; console.log(arr); //泛型数组 var Person = /** @class */ (function () { function Person(name, age) { this.name = name; this.age = age; } return Person; }()); var arr2 = [new Person("Sofia", 26), new Person("Halo", 28)]; console.log(arr2); //元组 元素顺序对应的数据类型要一致 var xx; xx = ["hello", 100, true]; console.log(xx); console.log(xx[0]); //枚举 var Color; (function (Color) { Color[Color["red"] = 0] = "red"; Color[Color["green"] = 1] = "green"; Color[Color["blue"] = 2] = "blue"; })(Color || (Color = {})); ; var r = Color.red; console.log(r); //打印数字 //方法 function printData() { console.log("随便玩一下"); } function printD(name) { return name; } console.log(printD("amazing"));
现在有点体会到了,ts语言的定义方式某些程度上更倾向于java的风格
**null **
表示对象值缺失。
在js中null也是一种是数据类型,表示一个空对象
我们用type来检测null时,返回的是个object
console.log(typeof(null)) console.log(typeof(typeof(null)))
编译后:
console.log(typeof(null)) console.log(typeof(typeof(null))) let size:number size=10 size=undefined size=null console.log(size) //null
undefined
用于初始化变量为一个未定义的值
console.log(typeof(null)) console.log(typeof(typeof(null))) let size:number size=10 size=null size=undefined console.log(size) //undefined
never
never 是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。
let yyds:never let num:number //yyds=100 编译不通过,数字不能转never类型 num=(()=>{throw new Error("抛个异常")})(); yyds=(()=>{throw new Error("never类型可以赋值给数字类型")})(); function err(msg:string):never{ throw new Error("抛个异常") } function deadloop():never{ while(true){ } }
js文件
var yyds; var num; //yyds=100 编译不通过,数字不能转never类型 num = (function () { throw new Error("抛个异常"); })(); yyds = (function () { throw new Error("never类型可以赋值给数字类型"); })(); function err(msg) { throw new Error("抛个异常"); } function deadloop() { while (true) { } }
JavaScript let 和 const
JavaScript let 和 const
ECMAScript 2015(ECMAScript 6)
ES2015(ES6) 新增加了两个重要的 JavaScript 关键字: let 和 const。
let 声明的变量只在 let 命令所在的代码块内有效。
const 声明一个只读的常量，一旦声明，常量的值就不能改变。
在 ES6 之前，JavaScript 只有两种作用域： 全局变量 与 函数内的局部变量。
简单来说 使用var 声明的变量 相当于全局的变量,在代码块中修改 该变量会影响该值
如果是用let声明,那么该变量只在所在代码块中起作用;
TypeScript中的变量声明
//变量的声明 var names : string ="小明" console.log(names) var age : number console.log(age)//因为变量没有初始值此时值为undifined //带类型推断的 var color="RED" enum Colors{red,green,blue}; var c=Colors.red console.log(c)
TypeScript 遵循强类型，如果将不同的类型赋值给变量会编译错误，
var num:number = “hello” // 这个代码会编译错误
类型断言:
类型断言可以用来手动指定一个值得类型,即允许变量从一种类型更改为另一种类型,
//变量的声明 var names : string ="小明" console.log(names) var age : number console.log(age)//因为变量没有初始值此时值为undifined //带类型推断的 var color="RED" console.log(typeof(color)) enum Colors{red,green,blue}; var c=Colors.red console.log(c) //这里声明一个字符串数字, var str ='100' //通过断言来转换为数字类型,但是底层依旧是 var str2:number=<number> <any> str console.log(str2) console.log(typeof(str2))//这里类型依旧是string let num:number =100 console.log(typeof(num))
编译后运行
这里可以发现断言之后的数据类型并没有转换成number类型, 是因为转换通常意味着某种运行时的支持,java中可以通过
String.valueOf()
Integer.valueOf() 来进行类型转换
类型推断
var name;//声明时没有赋值,没有确定数据类型 name="string" //这里类型推断 name=100//这里报错,因为第二行已经能够确定数据的类型了
变量作用域
var name2;//声明时没有赋值,没有确定数据类型 name2="string" //这里类型推断 //name2=2100//这里报错,因为第二行已经能够确定数据的类型了 var global_num=12 class Demo{ num =13; static size=10; storeNum():void { var local_num=14 } } console.log("全局变量为: "+global_num) console.log(Demo.size) // 静态变量 var obj = new Demo(); console.log("实例变量: "+obj.num)
编译后 运行
TypeScript中的运算符
说一下负号运算符:
var num12=100 var y= -num12 console.log(num12) console.log(y)
TypeScript中的循环
var num =1 for(;num<=10;num++){ console.log(num) } var arr =[1,2,3,4,5,6,7,8,9] for (let index = 0; index < arr.length; index++) { const element = arr[index]; if (element==6){ break;//跳出循环 } console.log(element); }
TypeScript中的函数
带参数的函数:
function add(x :number,y:number):number{ return x+y } console.log(add(10,100))
可选参数:
参数名后用?表示该参数可选
function add(x :number,y:number):number{ return x+y } console.log(add(10,100)) function printData(x:string ,y:number,z?:string){ console.log(x,y,z) } printData("你好",12) printData("hello",19,"world")
参数默认值
function add(x :number,y:number):number{ return x+y } console.log(add(10,100)) function printData(x:string ,y:number,z:string="世界"){ console.log(x,y,z) } printData("你好",19) printData("hello",20,"world")
当我们第三个参数不传时,会使用默认值
定义方式为: 参数名:类型 =value
可选参数必须跟在必需参数后面。
参数不能同时设置为可选和默认。
PS D:\anglarProject> node .\fun.js 110 你好 19 世界 hello 20 world
可变参数:
function selection(str:string,...m:string[]){ console.log(str,m) } selection("hello","world","你好","北京欢迎你") function sprint(...str:any[]){ console.log(str) } sprint("他不懂你的心","骑自行车的风景")
编译后运行:
hello [ 'world', '你好', '北京欢迎你' ] [ '他不懂你的心', '骑自行车的风景' ]
TypeScript匿名函数
匿名函数自调用
//匿名函数 var func=function(str:string):string{ return str } console.log(func("匿名函数")); (function():void{ var str="hellohahaha" console.log(str) })();//函数自调用 //带有参数的函数自调用 (function (str:string):string{ console.log(str) return str })("hello");
编译后生成的js文件:
//匿名函数 var func = function (str) { return str; }; console.log(func("匿名函数")); (function () { var str = "hellohahaha"; console.log(str); })(); //函数自调用 //带有参数的函数自调用 (function (str) { console.log(str); return str; })("hello");
TypeScript构造函数
class Person{ name :string hobby :string constructor(name:string,hobby:string){ this.name=name this.hobby=hobby } } var per =new Person("张三","跑步") console.log(per) class MathAdd{ constructor(a:number,b:number){ } } //Function是一个接口 直接new一个该接口,传入 string[]类型的参数 然后定义返回值 var myFunction = new Function("a", "b", "return a * b"); var x = myFunction(4, 3); console.log(x); // var obj=new MathAdd("a","b","return a + b"); var test = new Function("a","b","return a + b") console.log(test(10,12)) // 递归调用 function factorial(number) { if (number <= 0) { // 停止执行 return 1; } else { return (number * factorial(number - 1)); // 调用自身 } } ; console.log(factorial(6)); // 输出 720
TypeScript中lambda表达式
// lambda函数 var fool =(s:number)=>100+x console.log(fool) console.log(fool(19)) var dtse=y=>{ // 参数类型让他自己去推断,或者给指定好 console.log(y) } var dtse2=y=>{ // 参数类型让他自己去推断,或者给指定好 if (typeof y =="string"){ console.log(y) }else{ console.log("啥也不是") } } dtse("大江大河") dtse2("hell")
无参数时可以设置空括号：
var disp =()=> { console.log("Function invoked"); } disp();
TypeScript中函数重载
这个跟java中函数的重载逻辑是一样的
//函数重载 function disp(s1:string):void; function disp(n1:number,s1:string):void; function disp(x:any,y?:any):void { console.log(x); console.log(y); } disp("abc") disp(1,"xyz") //定义一个方法 隐式的返回any function add(a:number):any; function add(a:number,b:string):void; // 定义一个方法 function add(a:string,b:string,c:number):void; // 实现 方法以便实现方法的重载 /** * 如果参数类型不同，则参数类型应设置为 any。 * 参数数量不同你可以将不同的参数设置为可选。 * * @param a * @param b */ function add(a:any,b:string,c?:number):void{ }
函数重载:
1,如果参数类型不同，则参数类型应设置为 any。
2,参数数量不同你可以将不同的参数设置为可选。
Number对象
// NUmber中的函数 var size= new Number(100.789) var niubi=size.toExponential();//把对象的值转换为指数计数法 console.log(niubi) console.log(typeof(size.toFixed()))//string console.log(size.toFixed(2)) //保留小数点后2位 console.log(size.toLocaleString)//当地的数字格式顺序 console.log(typeof(size.toPrecision())) console.log(size.toPrecision(2))//把数字格式化指定长度 console.log(size.toPrecision(4)) console.log(size.toString(10))// console.log(size.toString(2))//数字转换位字符串,可以指定进制 console.log(size.valueOf())//
String对象
//String var st= new String("嘿嘿"); console.log(st.constructor) console.log(st.length) function employ(id:string){ } var e= new employ("Hello") // employ.prototype.email="添加了属性email" console.log(e.email) console.log(st.charAt(2))//指定位置的字符 console.log(st.charCodeAt(2))//指定位置的字符 Unicode 编码。 console.log(st.concat("拼接字符串")) st.match(/el/o) //匹配 查找找到一个或多个正则表达式的匹配。 st.replace("o","a")//替换 st.search("o")//查找 st.split("o")//分割 st.trim() console.log(st.toLocaleLowerCase()) st.valueof() //其他函数略
Array对象
//数组 var j; var nums = [1001, 1002, 1003, 1004]; for (j in nums) { console.log(nums[j]); } var arr = new Array(1,2,3,4) var str =arr.join() var str2 =arr.join("-") console.log(str) console.log(str2) //遍历 arr.forEach(function (value){ console.log(value) }) var arr1= new Array(5,6,7,8) var newarr =arr.concat(arr1)//数组整合到一个数组中 newarr.forEach(function(value){ console.log(value) }) /* 确定数组的所有成员是否满足指定的测试。 * @param predicate最多接受三个参数的函数。每个方法调用 *数组中每个元素的谓词函数，直到谓词返回一个值 *，它是布尔值false的强制值，或者直到数组结束。 * @param thisArg this关键字可以在谓词函数中引用的对象。 *如果省略thisArg，则使用undefined作为this值。 */ function dayu5(ele ,_index,_array){ return (ele>=5) } // every(predicate: (value: T, index: number, array: T[]) => unknown, thisArg?: any): boolean; console.log(newarr.every(dayu5)) // 过滤 function filterRes(ele ,index,array){ return (ele>=4) } console.log(newarr.filter(filterRes)) newarr.indexOf(7)//7的位置 //返回处理之后的数组 var narr=newarr.map(Math.sqrt)//通过指定函数处理数组的每个元素，并返回处理后的数组。 narr.forEach(function(value){ console.log(value) }) // 向数组中添加元素 narr.push(100,200) narr.pop()//从尾部移除,并返回该元素 arr.shift()//删除并返回数组的第一个元素。 arr.unshift(100,300)//像数组添加元素--一个,多个 narr.forEach(function(value){ console.log(value) }) //将数组中元素按规则处理为一个值将 （从左到右） var arrs=arr.reduce(function(a,b){ return a+b }) //（从you到zuo） var arrs=arr.reduceRight(function(a,b){ return a+b }) console.log("arrs--"+ arrs) arr.reverse()//反转数组 // 将数组--切除一块作为新数组 arr.slice(0,4) arr.some(dayu5)//这个跟every()类似 arr.sort() arr.splice(1,2)//从数组位置1开始删除两个元素
