【Tpyescript基础】

参考以下课程
尚硅谷TS教程
datawhale课程TS

TpyeScript

简介

1. 微软开发，是JavaScript的扩展语言
2. 包含JavaScript的所有内容，是JS的超集
3. 相比JS增加了静态类型检查、接口、泛型等现代开发特性
4. 需要编译成JavaScript才能运行

必要性

在JavaScript中的困扰

• 不清楚的数据类型

  let welcome = 'hello'
  welcome();//报错 TypeError：welcome is not a function
  

• 有漏洞的逻辑

  const str = Date.now() % 2 ? '奇数' : '偶数'
  if (str !== '奇数') {
  	alert('hello')
  } else if (str === '偶数') {
  	alert('world')
  }
  

  这里JS不会发出警告
• 访问不存在的属性

  const obj = { width: 10, height: 15 };
  const area = obj.width * obj.heigth;
  

• 低级的拼写错误

  const message = 'hello,world'
  message.toUperCase()
  

  应该是toUpperCase

静态类型检查

1. 在代码运行前进行检查，将可能的错误前置
2. 虽然同样的功能TS的代码量大于JS，但是TS代码结构更加清晰，在后期维护中胜于JS

如何编译TypeScript

1. 命令行编译

全局安装TypeScript npm i typescript -g，使用命令编译ts文件 tsc demo.ts

2. 自动化编译

1. 使用tsc --init 创建TypeScript编译控制文件 tsconfig.json，其中包含着很多编译时的配置
2. tsc --watch 或 tsc -w 监视.ts文件变化
3. 小优化tsc --noEmitOnError --watch，当编译出错时不生成.js文件（也可以去修改编译控制文件中的noEmitOnError）

Typescript基础数据类型

number

双精度浮点数，64位
用来表示整数和浮点数

string

字符串，双单引号表示单行，反引号定义多行文本

boolean

布尔值

enum

枚举类型

enum Color {Red, Green, Blue};
let c: Color = Color.Blue;
console.log(c);    // 输出 2

void

定义方法无返回值

其他的

null：空
undefined：未定义的
any：任一，放弃了对该变量的类型检查。
never：表示不再存值

变量声明

var [变量名] : [类型] = 值;
var uname:string = "hello";

• 声明变量的类型，但没有初始值，变量值会设置为 undefined
• 声明变量并初始值，但不设置类型，该变量可以是任意类型：
• 声明变量没有设置类型和初始值，类型可以是任意类型，默认初始值为 undefined：

变量作用域

• 全局作用域：在程序最外层
• 类作用域：或者说字段
• 局部作用域：在代码块内，比如方法

var global_num = 12          // 全局变量
class Numbers { 
   num_val = 13;             // 实例变量
   static sval = 10;         // 静态变量
   
   storeNum():void { 
      var local_num = 14;    // 局部变量
   } 
} 
console.log("全局变量为: "+global_num)  
console.log(Numbers.sval)   // 静态变量
var obj = new Numbers(); 
console.log("实例变量: "+obj.num_val)

运算符

算术运算符

var num1:number = 10 
var num2:number = 2
var res:number = 0
    
res = num1 + num2 
console.log("加:"+res); 

res = num1 - num2; 
console.log("减:"+res) 

res = num1*num2 
console.log("乘:"+res) 

res = num1/num2 
console.log("除:"+res)
    
res = num1%num2 
console.log("余数:"+res) 

num1++ 
console.log("num1 自增运算: "+num1) 

num2-- 
console.log("num2 自减运算: "+num2)

关系运算符

关系运算符用于计算结果是否为 true 或者 false。包括==、!=、<、>、<=、>=

逻辑运算符

• 逻辑运算符用于测定变量或值之间的逻辑。包括&&、||、!
• && 与 || 是短路运算符。&& 与 || 运算符可用于组合表达式。 && 运算符只有在左右两个表达式都为 true 时才返回 true。

赋值运算符

赋值运算符用于给变量赋值。

= (赋值)

+= (先进行加运算后赋值)

-= (先进行减运算后赋值)

*= (先进行乘运算后赋值)

/= (先进行除运算后赋值)

三元运算符

var num:number = -2 
var result = num > 0 ? "大于 0" : "小于 0，或等于 0" 
console.log(result)

字符串运算符: 连接运算符 (+)

var msg:string = "hello "+"world" 
console.log(msg)

类型运算符

typeof 运算符，返回操作数的数据类型。

var num = 12 
console.log(typeof num);   //输出结果: number