ts

1. Ts基础使用

// 将变量a定义为数字类型只能给他赋值为数字类型
let a: number = 100
a = 200
console.log(a + 100)

// node中运行是按照正常js运行所以会报错不能识别，ts文件内代码如果与js一模一样那么可以用node直接运行，如果书写了ts的语法那么node就不能去运行了，需要使用编译工具帮助我们将ts转化为js文件然后运行

// 转化命令：tsc 文件名

// ts可以读取当前工作区域内所有的变量，也就是可以跨文件作用域所以编译完成后就相当于有两个相同变量所以会报错

// 基于node的一个运行包：ts-node：能够直接通过命令运行ts文件不需要每次都先编译在运行编译后的js文件，安装指令：npm i -g ts-node

// 使用的命令：ts-node 文件名

2. Ts的一些语法规范

1. 在ts书写变量时如果不手动指定类型，会根据你初始赋值来推断出变量的类型并指明，但是在ts书写时不能让其他开发者一眼看出来类型，不推荐

3. Ts中的接口

// const obj : {
//   name: string;
//   age: number;
// } = {
//   name:'string',
//   age:18
// } 
// 创建了一个变量obj内部有两个属性name和age分别为string类型和number类型，这个写法在对象内部属性少的时候比较适用，如果对象内部的属性比较多这种写法会导致代码的可读性极低，如果对象内部属性比较多或者不知道有多少个不建议使用


// ts中提供了一个叫接口的东西就是来解决上述问题，接口可以简单理解为给对象添加类型的

// interface I对象名 {} 接口内部分割可以使用 , 也可以使用 ; 还可以不写

interface IObj {
  name: string
  age: number
}
const obj:IObj = {
  name:'QF001',
  age:18
}

4. 数组类型

// 只能书写数字类型在数组中
const arr1:number[] = [1,2,3]

// 只能书写字符串类型在数组中
const arr2:string[] = ['1','2','3']

// 只能书写布尔类型在数组中
const arr3:boolean[] = [true,false]

// 只能书写数字或字符串类型
const arr4:(number|string)[] = [1,2,'3','4']

// 利用泛型去定义数组
const arr5:Array<string> = ['1','2','3']
const arr6:Array<number> = [1,2,3]
const arr7:Array<number|string|boolean> = [1,'2',false]

// 数组中书写对象
const arr8:{
  name:string,
  age:number
}[] = [{
  name:'qf001',
  age:18
},{
  name:'qf001',
  age:18
}] 

// 利用接口优化书写
interface IArr9 {
  name:string,
  age:number
}
const arr9:IArr9[] = [{
  name:'qf001',
  age:18
},{
  name:'qf001',
  age:18
}] 
const arr9_1:Array<IArr9> = [{
  name:'qf001',
  age:18
},{
  name:'qf001',
  age:18
}]

5. type

let dir = 'up' // 限定为 'up' , 'down' , 'left' , 'right'
dir = 'down'
dir = 'left'
dir = 'right'
// 上述可以完成功能但是不能保证每个人都按照要求写，所以我们需要一个属性 type 来限定

type TDir = 'up' | 'down' | 'left' | 'right'
let dir1:TDir = 'up'
// 此时规定了这个 dir1 只能是这四个字符串其中之一

interface IObj {
  age:number,
  name:string
}
let obj:IObj = {
  age:18,
  name:'qf001'
}

type TObj1 = {
  age:number,
  name:string
}
let obj1:TObj1 = {
  age:28
  name:'qf002'
}

// interface 跟 type 都可以限制类型，但是 type 还可以限制数据的值，所以在想要限制数据值的时候可以用 type

6. 函数

// 检验返回值
function fn1 () :number{
  return 1
}
// 检验参数和返回值
function fn2 (a:number,b:number) :number{
  return (a + b)
}
// 检验赋值式还有传的参数还有返回值类型
const fn3:(a: number, b: number) => number= function (a:number,b:number) :number{
  return (a + b)
}

7. 泛型

// 封装一个函数，用于帮我们创建一个数组出来
function createArr<T>(length:number,val:T) : T[]{
  const arr:T[] = []
  for(let num = 0 ; num < length ; num++){
    arr.push(val)
  }
  return arr
}
const a1:number[] = createArr<number>(5,10086)
interface IInfo {
  name:string
}
const a2:IInfo[] = createArr<IInfo>(5,{name:'张三'})
createArr<IInfo>(5,{name:'张三'})

8. 枚举

enum EDir {
  Up = 'Up',
  Down = 'Down',
  Left = 'Left',
  Right = 'Right'
}
const d1:EDir = EDir.Up // 这个 d1 找到就是EDir中的up
enum EState {
  a: 1,
  b,
  c,
  d,
  f
}
console.log(EState.f) // 此时打印的这个f就是1+1+1+1+1，给a一个初始值后面的如果不给那就会依次+1

9. 合并接口

interface IObj1 {
  name:string,
  age:number
}
interface IObj1 { // 此时会找相同的接口并且将数据合并进去
  value:number,
  age:number // age只能是number属性，如果不是number属性那么会报错
  key?:string // key可有可无，如果给的话只能是string类型
}
const obj1:IObj1 = {
  name:'张三'，
  age:18,
  value:10086
  key:'dsakjdlasd' // 或者undefined都可以
}