【TS】TypeScript 学习

1. 简介

TypeScript 是一种给 JavaScript添加特性的语言扩展

2. 安装

npm install -g typescrip

3. 使用

3.1 变量声明

声明变量的类型以及初始值

var [变量名] : [类型] = 值

var name：string；
name = "ZhangSan"； 
name = 123； //编译错误

3.2 函数声明

声明函数时可定义参数类型以及返回值类型

function function_name(param1:datatype,param2: datatype): return_type{
  return
}

function add(x:number,y:number):number {
  return x + y;
}

剩余参数:
剩余参数允许我们将一个不确定数量的参数作为一个数组传入

function addnumber(...nums:number[]){
  var i = 0;
  var sum:number = 0;
  for(i = 0;i < nums.lenth;i++){
    sum = sum + nums[i]
  }
  return sum
}
console.log(addnumber(1,3,5))  // 9
console.log(addnumber(1,2))  // 3

3.3 联合类型

联合类型可以通过管道(|)将变量设置为多种类型

var val：string|number；
val = "wang";
val = 123; 
val = true; //报错

也可以将联合类型作为函数参数使用:

// 也可以将联合类型作为参数使用
function disp(name:string|string[]) {
  if(typeof name == "string"){
    console.log(name)
  }else{
    for(var i = 0;i < name.length;i++){
      console.log(name[i]);
    }
  }
}
disp("Liu")  //Liu
disp(["Liu","De","Hua"])  
// Liu 
   De
   Hua

3.4 接口

接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法应该都是抽象的，需要具体的类去实现

interface IPerson {
  firstName：string,
  lastName: string,
  sayHi: () => string
}

var customer:IPerson = {
  firstName: "Li",
  lastName: "Yu",
  sayHi: ():string => {return "Hi"}
}
console.log(customer.firstName) // "Li"
console.log(customer.lastName)  // "Yu"
console.log(customer.sayHi())   // "Hi"