TypeScript的学习笔记

初识：

TypeScript可能对于部分人不是很熟悉，对JavaScript比较熟悉。那TypeScript是什么呢？它是Javascript的超集，也可以说ta建立在JavaScript之上，但最终是转为JavaScript的。

环境（以下仅是个人安装环境）：

node: 10.16.0
npm: 6.9.0
ts-node: 9.1.1(非必须)
工具：vscode

安装命令

//建议全局安装 typescript
npm install -g typescript
//ts-node 用于直接运行ts文件
npm install ts-node

运行

如果未安装ts-node（ts文件不能直接运行，需要通过tsc xx.ts 命令执行转换成xx.js文件，再通过执行node xx.js方可执行）
运行命令：tsc xx.ts node xx.js

已安装ts-node
运行命令：ts-node xx.ts（即可）

构建第一个TypeScript文件

创建一个空文件，打开vscode，进到根目录下，创建空文件demo.ts（以 .ts 结尾文件名），内容如下：

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

这样就创建好了一个ts文件了（刚开始可能有点懵，但是不要慌…）
下面运行它：tsc demo.ts
这个时候应该就能看到终端上打印出来 hello world 了。

那么恭喜你，你成功了，你成功的成为了一名菜鸟…

类型注解

TypeScript里的类型注解是一种轻量级的为函数或变量添加约束的方式。就是变量的类型，类比JavaScript中变量声明类型（可能我们再js中也不写….）
在你创建的第一个demo.ts文件中的var message : string = "hello world" 的 string 就是类型注解。

命名规则

TypeScript 变量的命名规则：

变量名称可以包含数字和字母;
除了下划线 _ 和美元 $ 符号外，不能包含其他特殊字符，包括空格。
变量名不能以数字开头。
变量使用前必须先声明，我们可以使用 var 来声明变量。

格式：var [变量名]：[类型] = 值

数据类型

数据类型大致： any(任意类型)，number(数字)，string(字符串)，boolean(布尔)
此外，还有数组、元组、枚举、void、null、undefined、never(ts/js没有整数类型o)
下面看一下如何进行声明定义的：

数字/字符串/布尔

let x:any = 123;  //是否设置初始值  可选
x = 1
x = "sssss"
x = true

let y: number = 999
let z: string = "合宙"
let con: boolean = true

ps：看到这里你可能会有疑问为什么这个地方都是用let进行声明变量的呢?而不是熟悉的var呢？这个时候我只能说句官方推荐使用let进行声明

数组

let arr: number[] = [1,2,34]
let arr1: any[] = [1,true,"asasdasdad"]

实际开发过项目的同学，应该很清除，最常见的格式就是数组中是对象的：[{},{},…]

var arr = [{name: 'lalalal', age: 9999}, {name: 'lalalal2', age: 99998}]

如何实现呢？

var arr1: {name: string, age:number}[] = [{name: 'lalalal', age: 9999}, {name: 'lalalal2', age: 99998}]

上述形式看起来可能有点麻烦，假如有多个类似的数组，那岂不是要写很多次么？

TypeScript 为我们准备了一个概念，叫做类型别名(type alias)

type user = {name: string, age: number}

var arr2: user[] = [{name: 'lalalal', age: 9999}, {name: 'lalalal2', age: 99998}]

思考，那能不能用类进行一个定义呢？yes

class UserH {
  name: string;
  age: number
}

var arr3: UserH[] = [{name: 'lalalal', age: 9999}, {name: 'lalalal2', age: 99998}]

元组 Tuple

元组类型用来表示已知元素数量和类型的数组，各元素的类型不必相同，对应位置的类型需要相同。在js中没有这个概念，ts引入了

let yz: [string,number]   //声明了一个变量，并没有给值
yz = ["s",1]  //success
// yz = [1,"sd"] //error

枚举

开发过程中可能会常常遇到一种情况，状态判断取对应值

// var Status = {
//   a:0,
//   b:1,
//   c:2
// }

上述一个简单的对象，三种状态，在js中实现，大多数情况就像上述实现的方式相似，那看下如何通过enum 实现呢？

enum Status {
  a,
  b,
  c
}

function Sz(number){
  if(number == Status.a){
    return "aa"
  }else if(number == Status.b){
    return "bb"
  }else {
    return "cc"
  }
}
console.log(Sz(1),Status[1])

不仅可以通过索引查询值，而且可以通过反索引查对应的key值o

函数

function s() : void {    // void  用于标识函数的返回值类型，表示无返回值
  console.log("合宙")
}

函数参数为对象时，如何进行传递和声明，下面先用js写两个简单的函数

function test({one}){
    return "这是哥测试"+one
}

test({one:1})

// function add({ one, two }) {
//   return one + two;
// }

// const total = add({ one: 1, two: 2 });

如何使用ts进行编写实现呢？

/* 错误写法：
function add({ one: number, two: number }): number {  //编译器会报错
  return one + two;
}
const total = add({ one: 1, two: 2 });
*/

// 正确写法：
function add({ one, two }: { one: number, two: number }): number {
  return one + two;
}

const total = add({ one: 1, two: 2 });

never

是其它类型（包括 null 和 undefined）的子类型，代表从不会出现的值。

function getTotal(one: number,two: number):number{  //函数返回值类型确定防止出现未知问题
  return one+two
  // return one+two+""  //这样写就会报错，指定了函数返回值是number
}

var total = getTotal(1,2)
console.log(typeof(total),total)

function forEver():never{
  while(true){}
  console.log('111111')
}
forEver()

function errFunc():never{
  throw new Error()
  console.log("33333333")
}
errFunc()

null/undefined

null:对象缺失  
undefined:初始化未定义的变量值 
null/undefined 是其它所有类型的子类型  当一个类型变量可能会出先现null/undefined情况，可以使用 | 进行连接

let ss : number | null | undefined

ss = 1
ss = null
ss = undefined

// 总结：声明一个基础变量再变量名后 加上  :   后面跟上类型即可

接口

接口的作用就是为这些类型命名和为你的代码或第三方代码定义契约。
我自己的理解就是：接口与抽象类比较类似，都是用来被继承的；同时也可以与类型别名一样进行对象的声明；

interface ConsoleLog{
    log: string
}

function Print ( label: ConsoleLog){
  console.log(label.log)
}

Print({log: "test"})    //test

简单的接口的实现，那如何用来继承或者说用类来实现一个接口呢？

interface User {
   name: string
   age: number
   say(): void
}

class Test implements User {  //这里通过引入 implements关键字进行实现 
  name = "asdasd"
  sex = "男"
  say(){
    return ""
  }
}

interface TestS extends User{  //接口继承
  test():string
}

这里的用法很简明基础，有兴趣的可以前往官网深一步了解。

总结：以上是自己在学习使用时的一些记录，希望能对你有所帮助，本节主要还是基础，后续可能会进一步更新啦。。。