ts入门

什么是typeScript?

官方网站的定义是:TypeScript 是 js 类型的超集。简单说你可以将 TypeScript 看作是 JavaScript 之上的一个外壳。
TypeScript 是一个外壳，因为编写 TypeScript 的代码，在编译之后，，剩下的只是简单的 js 代码。
但是 JS 引擎无法读取 TypeScript 代码，因此任何 TypeScript 文件都应该经过预翻译过程，即编译。只有在第一个编译步骤之后，才剩下纯 JS 代码，可以在浏览器中运行。
Ps: 浏览器只能运行js、无法直接运行ts，因此需要ts编译js后运行。

全局安装
npm i -g typescript
查看版本
tsc -v
运行ts
tsc xxx.ts

开发运行环境

因为ts代码不能直接在node里运行 需要先编译为js再执行

• 运行方式1：

tsc  a.ts  => 编译为 a.js
node  a.js

• 运行方式2：
  如上操作每次执行很麻烦， (这个依赖包会在内部把ts编译为js，不再输出js文件)

全局安装
 npm i -g ts-node
查看版本好
 ts-node -v
 直接运行
 ts-node xxx.ts

vscode里配置自动编译ts为js

vsCode 新建ts文件 –> ts文件目录cmd，初始化 tsc –init，生成一个tsconfig.json文件 –> 修改tsconfig.json文件的 “outDir”: “./js”, ./js为要生成的文件夹 –>点击vsCode终端 》点击运行任务》点击选择typescript 》点击选择监视typescript

好处：没事修改ts文件不会像方法一每次在控制台输入tsc index.js，这个是自动的方式
tsc –init 生成配置文件 做以下修改

"outDir": "./js" // 把ts编译后放js文件夹下
"strict": false //改为不严格模式

该目录终端-运行任务-所有任务-tsc监视 ps:这里目录不能有&符号会报错
修改配置文件后执行指定文件 tsc 不生效。 要执行tsc

ts里的一些概念

• 类型注解？
  是一种轻量级的为函数或者变量添加的约束

 function test (str: string) {
  return 'hell------' + str
 }

• 隐式类型推断？

 let age = 18 //   我们赋值变量数字18， 那么这个变量ts会推断为number类型
 // age ='qweq'   // 语法不允许
 let name // 如，我们声明变量name 没有赋值，ts无法推断当前变量类型 默认为any类型
 name = 18
 name = true
 // ps: 虽然ts会做隐式类型推断， 但是建议为每个变量明确类型，便于后期更直观的理解代码

• 类型断言？
  在有些特殊情况下，ts无法推断出一个变量的具体类型，而我们开发者根据代码的使用情况知道这个变量到底什么类型的。从而辅助ts更加明确代码中每个成员的类型。
  !!!重点!!!类型断言并不是类型转换，类型转换是代码运行时的概念，类型断言是编译过程中的概念， 编译后这个断言也就不存在了

 const nums = [1, 2, 4]
 const res = nums.find(i => i > 0)
//此时res类型可能是number 或者 undefined 所以要使用断言指定类型

 // 断言写法:
// as 关键字
 const num1 = res as number
 // jsx时不能使用 有语法冲突
 const num2 = res

• 类型声明？
  在实际开发中 ts中引入第三方模块，有的不是那ts写的， 就没有强类型的提示体验！！！
  在使用第三方库过程中，如果当前模块不包含类型声明文件， 我们可以尝试安装对应模块的类型声明模块（一般为：＠types/…/）， 如果没有的话我们只能使用declare语法进行类型声明。 具体使用查看官方文档

ts基础类型

一、原始类型7个

 const a: string = '123'
 const b: number = 123
 const c: boolean = true
 const d: null = null
 const e: undefined = undefined
 const f: void = undefined
 const g: symbol = Symbol('123')
 console.log(a, b, c, d, e, f, g)

二、其他类型

1.Object类型

不是单指普通的对象，可以是对象 数组 fun
const foo: object = {} // [] // function() { }

2.Array类型

const arr1: number[] = [1, 2, 3]
const arr2: Array<number> = [1, 2, 3] // 泛型写法

3.元组类型

明确元素数量以及元素类型的数组
const tuple: [number, string] = [2, '2']

4. 枚举类型

特点：给有一组数值给上更好理解的名字，一个枚举中只会出现固定的几个值不会出现超出范围的可能性

  enum postState {
  draft = 0, // 值可以不指定， 默认从0累加。 如果初始化值是 字符串 必须手动给每个成员指定值 -不常见。
  unpublished = 1
  }
  // 常量枚举
  const enum postState2 {
  draft = 0,
  unpublished = 1
  }
  // 使用
  const obj = {
  title: '',
  state: postState.draft, // 0 1 2
  state1: postState[0] // 可以使用索引值访问，
  }
  // ps:我们在ts中使用的大部分类型经过编译转换后都会被移除掉，因为他只是为了我们在编译过程中做类型检查！而枚举不会，枚举会影响我们编译后的结果，他最终编译成一个双向的键值对对象：其实就是可以用键获取值 用值获取键。
  // 如果确认我们代码中不会使用索引值方式获取枚举值 我们建议使用常量枚举，enum前面添加const。使用常量枚举，编译后枚举会被移除掉。

5.函数类型

// 定义分为：1声明函数， 2函数表达式

  // d参数可选， 必须放最后
  // rest任意个数参数使用es6的
  function func1 (a: number, b: number, d?: number, ...rest: number[]): string {
  return 'func1'
  }
  func1(1, 2)
  // 函数表达式，接收这个函数的变量也需要类型注解  vscode会推断出这个变量类型 (a: number, b: number) => string
  const func2: (a: number, b: number) => string = function (a: number, b: number) {
  return 'func2'
  }

6.任意类型any

属于动态类型，ts不会对any做类型检查， 兼容js老代码时需要any类型

  function func3 (val: any) {
  return JSON.stringify(val)  // stringify方法接收任意类型参数
  }

7.接口类型-interface

一种规范契约，可以用来约定对象的结构，我们使用一个接口就必须遵守这个接口的全部约定。

  interface userFace {
    age: number,
    name: string,
    title?: string // 可选成员
    readonly content?: string // 只读成员,初始化后不可改变
  }
  // 参数user使用接口
  function getUser (user: userFace) {
    return user.age + user.name
  }
  console.log(getUser({ age: 18, name: 's' }))
  // 动态接口写法：
  interface userFace2 {
    [key: string]: string // key代表属性名称任意名称string代表可以的类型， 第二个string代表键值的类型
  }
  const cache: userFace2 = {}
  cache.foo = 'val1'
  cache.bar = 'val2'

8.泛型

把我们定义时不明确的类型变成一个参数 ，使用时在传递这样的类型参数！

  function createNumberArray (length: number, value: number) {
    // 因为Array对象默认创建是的any类型，所以我们要指定下他默认的类型  使用泛型指定
    // const arr = Array(length).fill(value)
    const arr = Array(length).fill(value)
    return arr
  }
  const rest = createNumberArray(3, 100)
  console.log(rest)
  // ps:此时 createNumberArray函数只能创建数字类型的数组。 如果还想创建字符串类型的数组 就可以使用泛型参数，
  // ！！！！！！泛型参数方法  改进 createNumberArray！！！！
  // 一般泛型参数为T ，然后把函数中不明确的参数类型都改为T
  function createArray (length: number, value: T) {
    const arr = Array(length).fill(value)
    return arr
  }
  // 泛型使用
  const rest2 = createArray(3, 'foo')
  console.log(rest2)