ICode9

精准搜索请尝试: 精确搜索
首页 > 其他分享> 文章详细

typescript 入门

2021-12-01 15:02:49  阅读:38  来源: 互联网

标签:typescript 入门 number ts let 类型 报错 string


在这里插入图片描述

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
      // 跟上面一样的情况
      
  • 类型

    类型例子描述
    number1, 5, 98任意数字
    string‘123’, ‘helli’任意字符串
    booleantrue, false布尔值 true或false
    字面量本身限制变量的值就是该字面量的值
    any*任意类型(类似 js)
    unknown*类型安全的 any
    void空值(undefined)没有值(或 undefined)
    never没有值不能是任何值
    object{name: ‘张三’}任意的js对象
    array[1,2,3]任意js数组
    tuple[4,5]元素,TS新增类型,固定长度数组
    enumenum{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
    

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

标签:typescript,入门,number,ts,let,类型,报错,string
来源: https://blog.csdn.net/web00_11/article/details/121655400

专注分享技术,共同学习,共同进步。侵权联系[admin#icode9.com]

Copyright (C)ICode9.com, All Rights Reserved.

ICode9版权所有