什么是TypeScript
-
TS并不是替代了JS ,而是以Javascript为基础构建的语言
-
TS是一个JS的超集(也就是扩展)为js添加了类型系统
-
他可以在任何支持JS的平台中使用
注意:TS不能被JS解析器直接执行 eg:xxx.ts他不可以直接运行,
他需要先编译成js才可以执行 -
相比js TS开发更友好,可以提前发现错误BUG更少,提高开发效率
使用环境搭建:
-
TS因为是要转为JS的所以要安装一个TS转换器
-
TS转换器基于node.js 所以你要先安装node.js
然后打开cmd输入npm i -g typescript
安装成功会出现这种情况
基本使用
创建一个文件夹
在文件里面创建一个ts文件
在ts文件中输入内容 eg:console.log(‘hellw ts’)
使用cmd进入你创建的文件夹里面
输入 tsc xxx.ts
打印ts里面的内容
在cmd中输入node xx.js
注释 (跟js是一样的)
- 单行注释 //
//这是注释
console.log('aa')
- 多行注释 /* 快捷键 shilt + alt +a*/
/*
console.log('aa')
console.log('aa')
console.log('aa')
*/
输出语句
console.log('hellow')
console表示控制台 node.js中表示终端,黑窗口(cmd)
变量使用
// 第一步声明变量并指定类型
let age:number
//第二步赋值
age=18
console.log(age);
在终端输入 tsc aa.ts 和 node aa.js
简化写法
let age:number = 20
console.log(age);
变量命名规则
// 变量的命名规则
// 数字,字母,下划线,$,不能以数字开头
// 变量名称区分大小写
//取名要有意义
//推荐使用驼峰命名法
练习一下
交换两个变量的值
// 交换两个变量的值
let num1 : number = 11
let num2 : number = 22
// 声明一个空变量
let temp : number
temp=num1 //temp=>11
num1=num2 //num1=>22
num2=temp //num2=>11
console.log(num1);
console.log(num2);
数据类型
- 数据类型分为两个 : 原始数据类型(基本数据类型) 对象类型(复杂数据类型)
- 常用的数据类型有:number 、string、boolean、undefined、null
数值型:
// 数值
// 整数
let age :number= 10
// 小数
let score :number= 9.9
// 正数
// +可以省略
let sa :number= +99
// 负数
let sas :number= -99
console.log(age); //10
console.log(score); //9.9
console.log(sa); //99
console.log(sas); //-99
字符串型:
// 可以使用单引号也可以使用双引号
let str:string = "abc"
console.log(str);
布尔值型:
// 布尔类型
// 只有两个值 true和false
// 真
let isbl:boolean = true
// 假
let isbls:boolean = false
console.log(isbl);
console.log(isbls);
undefied 和 null
- undefied表示声明但是为赋值的值(找不到值)
- null表示声明了值并且已赋值,但是赋的值为null
// undefied 和 null
// 他们两个只有一个值,值为类型本身
// eg:undefied类型的值为undefied
// eg:null类型的值为null
let u:undefined
console.log(u); //undefined
let u1
console.log(u1); //undefined
运算符:
- 运算符也称为操作符,用来实现赋值(=) 算数运算符,比较运算符等
- 常用的运算符:
- 算数运算符
- 赋值运算符
- 递增、递减运算符
- 比较运算符
- 逻辑运算符
- 算数运算符
// 算数运算符
console.log(2+3);//5
// 也可以用与字符串拼接
console.log('你'+'好'); //你好
//有一个是字符串那就是字符串拼接
console.log('1'+2); //'12'
console.log(2-3);//-1
console.log(2*3);//6
console.log(2/3);5//0.6666666
注意:除+号以外,其他的算数运算符只能跟数字类型一起使用
eg: console.log(2-'1') //会报错
如果非要使用的话需要转为数值型
console.log(2- +'1');
+'1'这个+是整数的意思 表示将'1'(string)=》1(number)
- 赋值运算符
// 赋值运算符
// 将等号右边的值赋值给等号左边的变量
// eg: let age:number= 10
let ages:number= 18
ages=ages+1
console.log(ages)//19;
// 执行顺序 先执行右边的代码 再把结果赋值给左边
// 简化写法
let agess:number= 18
agess+=1
console.log(agess)//19;
- 递增、递减运算符
let na:number=10
na++
console.log(na); //11
let naa:number=10
naa++
console.log(naa); //9
- 比较运算符
console.log(1>2);//false
console.log(3>=2);//true
console.log(1<2);//true
console.log(1<=2);//true
let num1 : number = 11
let num2 : number = 22
// 相等
console.log(num1===num2)//false
// 不相等
console.log(num1!==num2) //true
- 逻辑运算符
// 逻辑运算符
// && 与(逻辑与) 两边都成立为true
console.log(2>1 && 2>=2); //true
// || 或 (逻辑或)两边有一边的值成立则为true
console.log(1>1 && 2>=2); //true
// !非(逻辑非) 取反
console.log(!true);
条件语句
实现条件判断
if(){} 满足条件做的事情
let vip :boolean=true
if(vip){
console.log('进来了');
}
let vips :boolean=false
//这个就进不去
if(vips){
console.log('进来了');
}
else不满足条件执行的事情 必须和if连用
let vip :boolean=true
if(vip){
console.log('进来了');
}else{
console.log('没进去')
}
三元运算符
- 根据判断条件的真假得到不同的结果
- 语法:结果=判断条件?值1:值2
- 如果结果为真时是值1
- 结果为假是值2
let result :string =5>3?"大于":"小于"
console.log(result); //大于
//练习
let result:number=10;
if(result>10){
console.log('看电视');
}else{
console.log('打游戏');
}
// 三元运算
let res:string=result>10?"看电视":"打游戏"
console.log(res);
循环
重复做某件事就需要用到循环
语法:for(初始化语句;判断条件;计数器更新){循环体}
for(let i:number=1;i<=4;i++){
console.log('你是猪');//打印了4次
}
- break 和 continue
break能让循环提前结束(终止循环)
// break能让循环提前结束(终止循环)
for(let i:number=1;i<=5;i++){
//打印到3就停下来了
if(i===3){
break
}
console.log("我是"+i+"个");
}
continue能让循环间断执行(跳过本次循环,继续下一个循环)
for(let i:number=1;i<=5;i++){
//打印到3就跳过去了下最直接执行第4个循环
if(i===3){
continue
}
console.log("我是"+i+"个");
}
数组
- 创建数组
//第一种创建数组方法
// 创建一个空数组
let arr:string[]=[]
// 存入数据 不能存入除string以外的类型
let arrs:string[]=['你好','我好']
console.log(arrs);
//第二种创建数组方法
// 创建一个空数组
let arr:string[]=new Array()
// 存入数据 不能存入除string以外的类型
let arrs:string[]=new Array('你好','我好')
console.log(arrs);
- 数组的长度和索引
let arr:string[]=[]
// 存入数据 不能存入除string以外的类型
let arrs:string[]=['你好','我好']
console.log(arrs);
// 数组的长度和索引 数组是一个有序集合
console.log(arrs.length);
// 索引 注意:索引是从0开始的
- 数组的取值和存值
取值
语法:数组名称[索引]
let arrs:string[]=['你好','我好']
console.log(arrs[1]);//我好
存值
语法:数组名称[索引]=新值
let arrs:string[]=['你好','我好']
arrs[1]='我不好'
console.log(arrs);
添加
语法:数组名称[索引]=新值 如果索引存在就提换 不存在就添加
let arrs:string[]=['你好','我好']
arrs[2]='你好吗'
//或者这样写也可以添加
arrs[arrs.length]='他好'
console.log(arrs);
遍历数组
let num:number[]=[100,200,300]
for(let i:number=0;i<=num.length-1;i++){
console.log(num[i]);
}
//也可以这样写
let num:number[]=[100,200,300]
for(let i:number=0;i<num.length;i++){
console.log(num[i]);
}
//练习(求数组中所有元素的和)
let num:number[]=[100,200,300]
let sums:number=0
for(let i:number=0;i<num.length;i++){
sums+=num[i]
}
console.log(sums)
总结:
- TS并不是替代了JS ,而是以Javascript为基础构建的语言, 扩展了JS
- 他可以在任何支持JS的平台中使用
- TS不能被JS解析器直接执行 他需要先编译成js才可以执行