TypeScript 入门(基本语法+简单使用) 一

什么是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

运算符：

• 运算符也称为操作符，用来实现赋值（=） 算数运算符，比较运算符等
• 常用的运算符：
  1. 算数运算符
  2. 赋值运算符
  3. 递增、递减运算符
  4. 比较运算符
  5. 逻辑运算符

1. 算数运算符

// 算数运算符
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）

2. 赋值运算符

// 赋值运算符
// 将等号右边的值赋值给等号左边的变量
// 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;

3. 递增、递减运算符

let na:number=10
na++
console.log(na); //11
let naa:number=10
naa++
console.log(naa); //9

4. 比较运算符

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

5. 逻辑运算符

// 逻辑运算符
// && 与（逻辑与） 两边都成立为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才可以执行