typescript 入门

typescript 是 JavaScript 的超集，熟悉 JavaScript 的人都知道JavaScript 是弱类型语言，比如声明一个变量可以为这个变量赋任意类型的值，后面可能会产生未知错误很难排查，而 ts 是强类型语言，重点就在其类型上面，可以说它是加强升级版的 js ，弥补 js 的不足

typescript 环境搭建

1. 下载并安装 node

   官网地址： https://nodejs.org/zh-cn/download/ （安装64位或者32位 看自己电脑配置）

   检查是否安装成功： 任意位置打开命令行窗口输入 node -v 能够看到版本号就说明安装成功

2. 使用 npm 全局安装 typescript

   在命令行窗口 输入 npm i -g typescript

   检查是否安装成功：命令行输入 tsc 如果出来很长一堆东西 说明安装成功

   

3. 创建一个 ts 文件

4. 使用 tsc 对 ts 文件进行编译

   • 进入命令行窗口
   • 在 ts 文件所在目录路径下
   • 执行命令：tsc xxx.ts 即可
   • 在同一位置会出现一个 js 文件说明编译成功

以上工作都做完就可以写自己的 ts 项目了

---

基本类型

• 类型声明

  • 类型声明是TS非常重要的一个特点

  • 通过类型声明可以指定TS中变量（参数，形参）的类型

  • 指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错

  • 简而言之，类型声明给变量设置了类型，使得变量只能存储某中种类型的值

  • 语法：

    let 变量: 类型
    let 变量: 类型 = 值
    function fn(参数: 类型, 参数: 类型): 类型 {
        .....
    }
    

  let a: number
  a = 20 // 这一行不会报错
  a = 'Hello' // 这一行会出现报错 // 不能将类型“string”分配给类型“number”。
  
  let b: string
  b = 'Hello' // 这一行不会报错
  b = 123 // 这一行会出现报错 // 不能将类型“number”分配给类型“string”。
  
  let c: boolean
  c = true // 这一行不会报错
  c = 14 // 这一行会出现报错  // 不能将类型“number”分配给类型“boolean”。
  c = 'Hello' // 这一行也会出现报错 // 不能将类型“string”分配给类型“boolean”。
  
  function sum(a: number, b: number): number {
    return a + b
  }
  console.log(sum(10, 20)) // 30
  // 这是一个两个数字求和的函数，在js 中不声明参数类型，可传入任意类型值，传入的是数字才会做加法运算，如果有一个非数字就成字符串拼接，在TS中声明参数类型，也可对返回值进行类型声明，如上小括号外面的 `: number` 就是对函数返回值的一个类型声明
  
  sum(10, 'hello') // 第二个参数会报错，已声明 number，不可传入 string
  

  上面代码最后一行会出现警告，这就是 ts 指定类型时候这能复制该类型值，而不能是其他类型

• 自动判断类型

  • TS 拥有自动的类型判断机制

  • 当对变量的声明和赋值时同时进行的，TS 编译器会自动判断变量的类型

  • 所以如果你的变量的声明和赋值是同时进行的，可以省略类型声明

    let d = 10 // 此时 ts 会给变量 d 添加上类型 number 
    d = 'Hello' // 此时就会出现报错 // 不能将类型“string”分配给类型“number”。let d: number
    
    let e = true // let e: boolean
    let f = 'Hello' // let f: string
    // 跟上面一样的情况
    

• 类型

  类型	例子	描述
  number	1， 5， 98	任意数字
  string	‘123’, ‘helli’	任意字符串
  boolean	true, false	布尔值 true或false
  字面量	本身	限制变量的值就是该字面量的值
  any	*	任意类型（类似 js）
  unknown	*	类型安全的 any
  void	空值(undefined)	没有值(或 undefined)
  never	没有值	不能是任何值
  object	{name: ‘张三’}	任意的js对象
  array	[1,2,3]	任意js数组
  tuple	[4,5]	元素，TS新增类型，固定长度数组
  enum	enum{A, B}	枚举，TS新增类型

  // any 类型
  let a: any
  a = 2
  a = true
  a = 'hello'
  // 都不会报错，可以是任意值
  
  // unknown 类型
  let b: unknown
  b = 2
  b = true
  b = 'hello'
  // 跟 any 类型一样都不会报错
  
  // 两者区别
  let c: string = 'Hello'
  c = a // 不会报错， any类型的 a 会把 c 同化，c 的类型也会变得不清晰
  
  c = b // 会报错， any类型的 b 不会同化 c  // 不能将类型“unknown”分配给类型“string”。
  // 解决报错
    // 1.
    if(typeof b === 'string') {
        c = b // 此时会发现没有报错了
    }
    // 2.
    c = b as string
    // 3.
    c = <string>b
  

---

还有很多会慢慢更新，先发布一部分