JavaScript的特点
强类型和弱类型
强类型语言和弱类型语言的区别
强类型:强类型的变量一经声明,就只能存储这种类型的值,其他的值则必须通过转换之后才能付给该变量,有编译器自动理解的转换,也有由程序员明确指定的强制转换,代表的就是Java、C++等等
弱类型:弱类型的变量类型则是随着需要不断转换,弱类型一般数据类型是根据值来确定的。Java、PHP
JS的问题
JS早期设计出来的目的就是简单快速的解决网页动态交互的效果。当初在设计过程中就要求,简单、容易上手,并且开发快速。所以早期的JS设计为弱类型、甚至模块化都没有。
随着JS语言的发展,目前前端工程非常的庞大,就导致了一些列问题。变量类型没有约束,导致在开发过程中很多问题都无法检测到,允许过程中才会抛出一些异常。并且JS这门语言是无需编译的,直接允许在浏览器里面,那就意味着,错误都在运行过程中出现的。
案列1:运行过程中才检测到对象没有某个属性
const object = {
name:"xiaowang"
}
console.log(object.eat());
案列2:函数的参数类型不确定
function add(num1,num2){
return num1 + num2
}
add("xiaowang",10)
当我们要累加两个数字时,你可以传递任何数据类型
案列3:参数传递不对,直接报错
function list(arr){
return arr.reduce((sum,next)=>{
return sum+=next
},0)
}
const res = list([1,2,3,4,5]) //假设不传递数组,代码也不会报错,运行报错
案列4:有些代码运行的时候才会检测到问题
setTimeout(()=>{
},1000)
强类型的好处
-
代码在编译的过程中,就会抛出一场,那就意味着,我们在编译的时候就可以解决很多问题,而不用上线后在检查各种错误。
-
编码的过程中,只能提示更加的准确,比如函数的参数,参数类型等等。
function show(obj){ obj.name }
在使用obj的时候,你是没有提示的,因为编译器不知道obj的什么类型。
-
减少不必要的类型判断,你为了保证参数的类型是你想要的类型,你要自己编写一些类型判断的代码
function show(num1,num2){ if(typeof num1 && typeof num2){ } }
Typescript介绍
-
TypeScript 是由微软开发的一款开源的编程语言。
-
TypeScript 是 Javascript 的超集,遵循最新的 ES6、ES5 规范。TypeScript 扩展了 JavaScript
的语法。
-
TypeScript 更像后端 java、C#这样的面向对象语言,可以让 js 开发大型企业项目。
-
谷歌也在大力支持 Typescript 的推广,谷歌的 angular2.x+就是基于 Typescript 语法。
-
最新的 Vue 、React 也可以集成 TypeScript。
-
Nodejs 框架 Nestjs、midway 中用的就是 TypeScript 语法。
TypeScript安装
在使用 npm 命令之前电脑必须得安装 nodejs
npm install -g typescript
cnpm install -g typescript
下载成功后的结果:
测试结果
tsc -v
TypeScript配置
基础编译
创建项目TS01-environment,创建index.ts文件
var username:string = "xiaofei";
将代码编译为js,终端执行
tsc index.ts
默认会在项目同级目录下面产生js文件
tsconfig.json配置
你可以创建tsconfig.json配置文件,设置编译后产生的文件路径
-
在项目的根目录下面执行
tsc --init
-
修改配置文件,设置默认编译目录,添加js目录
"outDir": "./js",
-
老版本 vscode 点击: 任务->运行任务-> tsc:监视-tsconfig.json 然后就可以自动生
成代码了
最新版本 vscode 点击: 终端->运行任务->typescript->tsc:监视-tsconfig.json 然后就
可以自动生成代码了
接下来在开发的时候,就可以自动完成编译功能。
TypeScript数据类型
数字类型
let price:number = 100;
//一旦申明了数据类型,就无法赋值其他类型的值
price = true; //报错
整数型和浮点数都可以使用number类型来表示
布尔类型
let flag:boolean = true;
flag = false;
console.log(flag);
字符串类型
let username:string = "xiaowang"
username = "xiaofei";
数组类型
-
第一种定义数组的方式
// 定义数组的第一种方式,值必须全为number类型 let covers:number[] = [10,20,30]; console.log(covers);
-
第二种定义数组的方式
// 定义数组的第二种方式。 let covers2:Array<string> = ["xiaowang","xiaozhang"] console.log(covers2);
-
第三种定义数组的方式
// 定义数组的第三种方式 let covers3:any = [1,"xiaowang",true] console.log(covers3);
元组类型(tuple)
元组类型(tuple)属于数组的一种,元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同。 比如,你可以定义一对值分别为 string和number类型的元组
let points:[string,number,boolean] = ["xiaowang",123,true];
console.log(points);
枚举类型
enum类型是对JavaScript标准数据类型的一个补充,比如:支付成功后的状态 0:失败 1:超时 2:成功,如果我们在代码中 使用0 1 2表示就不清除。这个时候可以用枚举类型
enum state {
error=0,timeout=1,success=2};
let result = state.success;
let result2 = state.timeout
console.log(result);
console.log(result2);
const order = {
id:"001",
date:"2021-09-01",
state:state.error
}
any任意类型
你可以给变量设置any类型,那变量就可以支持任何的数据类型
let num:any;
num =