TypeScript(一)--基本数据类型

typescript

一.强类型语言&&弱类型语言：

强类型语言:不允许该百年变量的数据类型，除非进行强制类型转换

弱类型语言：变量可以被赋予不同的数据类型

二.静态类型语言&&动态类型语言

静态类型语言：在编译阶段确定所有变量的类型

动态类型语言：再执行阶段确定所有变量的类型

三.TypeScript基础

1.运行环境:node,npm

2.全局安装typescript: npm install -g typescript tsc -v检查

3.运行：编写.ts文件，执行tsc命令编译成js代码，

eg:

let heroName:string = '超人';
alert(heroName);

用tsc ./xx.ts 编译成js,使用js

VScode设置自动编译

1.运行 tsc --init, 创建tsconfig.json文件

2.修改 tsconfig.json文件，设置js文件夹：'outDir':'./js/'

3.设置 vscode 监视任务

3.1 变量：

##JS:
let 变量名 = 值
## TS:
let 变量名：变量类型 = 值
## ts中
let sName:string = 'seafwg';
dName = 520; // 报错

3.2 新增类型

3.2.1 原有类型：

string: "", '',``;
number,
boolean[不能赋值0，1],
Array[声明时指定数组中元素的类型],
  ## 方式一：
  let 数组名：类型[] = [值1, 值2];
	let arrHeros:string[] = ['seafwg', 'assassin', 'intelwisd'];
	## 方式二：
  let 数组名:Array<类型> = [值1,值2]；
  let arrHeros:Array<string> = ['seafwg','intelwisd','assassion'];
null,
undefined,
Symbol,
Object

3.2.2 新增类型：

tuple: 元组:规定了元素数量和每个元素类型的“数组”，每个元素的类型可以不相同。
## eg:
let 元组名: [类型1, 类型2, 类型3] = [值1,值2,值3];
let tup1:[string, number, boolean] = ['seafwg',23,true];
## 访问元组和数组相同
## 特点：1.声明时指定元素个数。2.声明时指定元素类型

enum: 枚举：
## 语法：
enum 枚举名{
  枚举项1 = 枚举值1，
  枚举项2 = 枚举值2，
  ...
}
## eg:
enum GunType {
  M416 = 1,
  AK47 = 2,
  Goza = 3
}
## 枚举项：一般用英文和数字，枚举值：用整形数字
## 使用默认枚举值：自动从0开始递增的数字
enum GunType{
  M416, // 0
  AK47, // 1
  Goza  // 2
}
## 使用：
let Gun:Guntype = Guntype.AK47; // 赋值
if(Gun == Guntype.AK47) {
  console.log(`相等———`); // 1==1
}else {
  console.log(Gun);
}
  
  
any: 任意类型，一般在获取dom时使用
我们在接收用户输入或者第三方代码库时，还不能确定会返回什么类型的值，此时也可以使用any类型
## eg
let txtName:any = document.getElementById('txtN');
never: 不存在的值的类型，常用作为抛出异常或者无限循环的函数类型
## eg:
function test():never{
  while(true) {
    
  }
}
function test2():never{
  throw new Error(`hhh`); // 抛出异常，也没有返回值
}
never类型是ts中的底部类型，所有类型都是never类型的父类，never类型的值可以赋值给任意类型的变量。
let x:never = test();
let y:string = test();
  
void:代表没有类型。一般用在返回值的函数
## 语法
function sayHello():string{ // 声明时指定函数返回值类型
  return 'hi,你好';
}
let re1 = sayHello(); // 调用时必须使用变量保存结果
  
function sayHello1(): void{  // 没有返回值
  console.log('hi,hahah');   // 无需return语句
}

3.2.3 数据类型推断

如果变量的声明和初始化是在同一行，可以省略变量类型的声明

let 变量名 = 值; <=> let 变量名:变量类型 = 值;
let age = 18;
age = 'seafwg'; // 报错，会根据初始化推断为number

3.2.3 数据类型联合

表示取值可以为多种类型的一种

let 变量名:变量类型1 | 变量类型2 = 值；// 任意一种不会报错

3.3 函数的定义

es5:

function run() {
  return 'run'
}
var run2 = function() {
  return 'run'
}

3.3.1 ts 新增返回值类型

function fun():number{
  return 123;
}
var fun2 = function():number{
  return 123;
}

3.3.2 ts定义方法传参

function getInfo(name:string,age:number):string{
  return `${name}---${age}`;
}
console.log(getInfo('zhangsan', 20));

var getInfo = function(name:string,age:number):string{
  return xxx;
}

## 没有返回值的方法：
function run():void {
  xxx
}

3.3.3 方法可选参数

es5里面放的实参和形参可以不一样，但是在ts中参数必须一样，如果不一样就需要配置可选参数。

function getInfo(name:string,age?:number):string {
	// age?:number:可选参数
}
## 可选参数必须配置到参数的最后面

3.3.4 默认参数

es5无法设置默认参数，es6，ts中都可以设置默认参数。

function getInfo(name:string,age:number=20):string{
  return `${name}---${age}`;
}

3.3.5 剩余参数 ...运算符接受形参接收传过来的值

function sum(...result:number[]):number{
  var sum = 0;
  for(var i = 0;i < result.length;i++) {
    sum+=result[i];
  }
  return sum;
}
alert(sum(1,2,3,4,5,6));

###: 
function sum(a:number, ...result:number[]):number{
  var sum = a;
  for(var i = 0;i < result.length;i++) {
    sum+=result[i];
  }
  return sum;
}
alert(sum(1,2,3,4,5,6));

3.3.6 ts函数的重载

java中方法的重载：重载指的是两个或者两个以上的同名函数，但他们的参数不一样

typescript中的重载：通过为同一个函数提供多个函数类型定义来试一下多种功能的目的,为了兼容es5,es6重载的写法和java有区别

es5，出现同名函数后面的会替换前面的。

[ts的重载]

function getInfo(name:string):string;
function getInfo(age:number):string;

function getInfo(str:any):any{
  if(typeof str==='string') {
    return `名字是：`+str;
  }else{
    return `你的年龄是：`+str;
  }
}

getInfo('zhangsan');
getInfo(23);

## 等价于
function getInfo(name:string):string;
function getInfo(name:string,age:number):string;

function getInfo(name:any, age?:any):any{
  if(!age) {
    return `名字是：`+name;
  }else{
    return `你的年龄是：`+age;
  }
}

getInfo('zhangsan');
getInfo(23);

3.3.7 箭头函数：

this指向上下文，等同es6中的箭头函数