TypeScript入门

typeScript高级用法

ts是js的超集，为js添加类型系统

0.环境安装
要使用ts,先在系统中全局安装TypeScript

npm install typescript -g

在VS code中直接运行，先将ts文件转化为js文件

//将ts文件转化为js文件
tsc fileName  

//执行文件
node fileName

或者直接在文件中安装ts-node插件

npm install -g ts-node

安装之后可以直接执行ts文件

//执行文件
tsnode fileName

1、ts的组成
模块
函数
变量
语句和表达式
注释 单行注释 //
多行注释 /* */

静态变量：一旦定义，就不可以改变

: string定义静态类型
let str: string = "hello";
定义后，str在程序中，永远是string类型

对象类型：

对象类型
数组类型
类类型
函数类型

注意：
TypeScript 会忽略程序中出现的空格、制表符和换行符。
空格、制表符通常用来缩进代码，使代码易于阅读和理解。
TypeScript 区分大写和小写字符。

2、ts面向对象
对象：类的实例，有行为和状态（一条狗是一个对象，它的状态有：颜色、名字、品种；行为有：摇尾巴、叫、吃等。）
类：类是一个模板，描述一类对象的行为和状态
方法：是类的操作的实现步骤

3、ts基础类型
any
number
string
boolean
enum 用于定义数值集合

const getValue = () => {
  return 0
}


enum List {
  A = getValue(),
  B = 2,  // 此处必须要初始化值，不然编译不通过
  C
}
console.log(List.A) // 0
console.log(List.B) // 2
console.log(List.C) // 3

//A 的值是被计算出来的。注意注释部分，如果某个属性的值是计算出来的，那么它后面一位的成员必须要初始化值

void 用于标识方法返回值的类型，表示该方法没有返回值
null 表示对象值缺失
undefined 用于初始化变量为一个未定义的值
never 其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。

声明变量为数组

// 在元素类型后面加上[]
let arr: number[] = [1, 2];


// 或者使用数组泛型
let arr: Array<number> = [1, 2];

4、ts命名规则
变量名称可以包含数字和字母。
除了下划线 _ 和美元 $ 符号外，不能包含其他特殊字符，包括空格。
变量名不能以数字开头
声明变量和初始值

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

5、函数返回值
有时，我们会希望函数将执行的结果返回到调用它的地方。通过使用 return 语句就可以实现。在使用 return 语句时，函数会停止执行，并返回指定的值。
语法格式如下所示：

function function_name():return_type { 
    // 语句
    return value; 
}

return_type 是返回值的类型。
return 关键词后跟着要返回的结果。
一个函数只能有一个 return 语句。
返回值的类型需要与函数定义的返回类型(return_type)一致。

// 函数定义
function greet():string { // 返回一个字符串 
  return "Hello World” 
} 
function caller() { 
  var msg = greet() // 调用 greet() 函数 
  console.log(msg) 
} // 调用函数caller()

6、函数重载
重载是方法名字相同，而参数不同，返回类型可以相同也可以不同。
每个重载的方法（或者构造函数）都必须有一个独一无二的参数类型列表。
参数：参数类型、参数数量、参数顺序
7、ts联合类型
联合类型（Union Types）可以通过管道(|)将变量设置多种类型，赋值时可以根据设置的类型来赋值

//声明一个联合类型
var val:string|number 
val = 12 
console.log("数字为 "+ val) 
val = "Runoob” 
console.log("字符串为 " + val)

8、ts接口
接口是一系列抽象方法的声明，是一些方法特征的集合，这些方法都应该是抽象的，需要由具体的类去实现，然后第三方就可以通过这组抽象方法调用，让具体的类执行具体的方法。

//TypeScript 接口定义如下：
interface interface_name { 
}
实例
interface IPerson { 
  firstName:string, 
  lastName:string, 
  sayHi: ()=>string 
} 

var customer:IPerson = { 
  firstName:"Tom”, 
  lastName:"Hanks”, 
  sayHi: ():string =>{return "Hi there”} 
} 

console.log("Customer 对象 “) 
console.log(customer.firstName) 
console.log(customer.lastName) 
console.log(customer.sayHi()) 

var employee:IPerson = { 
  firstName:"Jim”, 
  lastName:"Blakes”, 
  sayHi: ():string =>{return "Hello!!!”} 
} 

console.log("Employee 对象 “) 
console.log(employee.firstName) 
console.log(employee.lastName)

9、访问控制修饰符
TypeScript 中，可以使用访问控制符来保护对类、变量、方法和构造方法的访问。TypeScript 支持 3 种不同的访问权限。
public（默认） : 公有，可以在任何地方被访问。
protected : 受保护，可以被其自身以及其子类和父类访问。
private : 私有，只能被其定义所在的类访问。

10、展开
展开操作符正与解构相反。 它允许你将一个数组展开为另一个数组，或将一个对象展开为另一个对象。

let first = [1, 2]; 
let second = [3, 4]; 
let bothPlus = [0, ...first, ...second, 5];

11、泛型
使用<>定义

function join<JSPang>(first: JSPang, second: JSPang) {

return `${first}${second}`;

}
//使两个参数都为string类型
console.log(join<string>("drunk", ".com"));

多个泛型的定义

//用T和P代替泛型
function join<T,P>(first: T, second: P) {

return `${first}${second}`;

}
console.log(join<string,number>("drunk", 1));