TypeScript基础-基本类型检查-上

前言：TS是一个可选的静态类型系统，前期学习不要有太大压力，其实入手相当的简单.

因为可选|静态，可选:js后缀改为ts, 类型检查可加可不加并不会强制要求，静态:编写时直接提醒错误

类型约束

约束的对象: 变量, 函数的参数, 函数的返回值
如何使用?: 在约束的对象的后面加上: xxx类型

    let name: string;
    
    // 此时提示报错(已被约束，不能将number赋值给string)
    name = 333

    function sum (a: number, b: number): number {
        return a + b
    }
    
    // 报错(不能将number赋值给string)
    let num: string = sum(3, 4)
    
    // 报错(无法为“sum”赋值，因为它是函数。)
    sum = 333

ts还有一个好处就是：比如要将上方 sum = 333 会提醒报错。但js不会提醒

any: 表示任意类型, ts对该类型不会类型检查

    let name1: any = 123
    name1 = "123" // 不会报错, 因为不会类型检查

类型的推导

ts在很多场景中都可以完成类型推导

    // ts智能的推导出sum为number类型
    function sum(a: number) {
      return a
    }
    
    // ts智能的推导出b为number类型
    let b = sum(123)
    
    // 报错, 被类型约束
    b = "123"

那什么时候能知道TS完成了类型推导呢？有个小技巧:

上图带了三个点的这种都是ts没推导出来, 需要手动约束

源代码和编译结果的差异

编译结果中没有类型约束信息， TS不会存在于运行时
TS文件被编译成js文件

基本类型

number: 数字
string: 字符串
boolean: 布尔(true|false)
数组

数组
    
    // 定义any[], 每一项都为any类型的集合, 这样写不会报错, 但是不建议因为不会类型检查
    let nums: []
    
    // 定义每一项都为number类型的集合, 实际上为Array<number>类型的语法糖
    // 推荐使用number[], Array<number>在React可能会有冲突
    let nums: number[]  或  let nums: Array<number>
    nums = [123, 213]
    nums = [123, "123"] //报错

对象object(使用场景比较少, 个人感觉会容易出问题)

    // 约束变量为对象类型,
    let u: obejct
    // 不会校验对象每一项key的类型
    u = {
        name: "张三",
        age: 18
    }
    // 以下赋值，都不会报错，不建议这么定义！和赋值！
    u = [123]
    u = () => {}
    u = new Set()
    u = new Number()
    u = new String()

null和undefined

null和undefined是所有其他类型的子类型, 他们可以赋值给其他类型

    let u: string

    u = undefined
    u = null
    u.toUpperCase() // 报错, TypeError: Cannot read properties of null (reading 'toUpperCase')

这是个大隐患, 所以我们如何去让它只能赋值给自身呢？

tsconfig.json
  
  {
   "compilerOptions": { 
     // 对空类型检查
     "strictNullChecks": true
   }
 }

通过在tsconfig.json添加"strictNullChecks": true, 获得更加严格的空类型检查

这个时候代码会相应的提示, 麻烦被解决啦！

TypeScript基本类型检查！巨好用，解决大量js犯的错误！

TypeScript基础-基本类型检查-上

类型约束

类型的推导

源代码和编译结果的差异

基本类型