千字文带你入门typescript

前言

• vue3接触有一段时间了，还是用vue+js。今天一起来学习ts语法
• 本文从环境安装到ts入门

环境安装

• 安装node.js环境
• 全局安装typescript npm i -g typescript
• 创建一个ts文件
• 使用tsc对ts文件编译 (进入ts文件目录 执行tsc 文件名.ts)

ts基本类型

• 类型声明:
  • 类型声明是ts中非常重要的特点
  • 通过类型声明可以指定ts中变量(参数，形参)的类型
  • 指定类型后，当为变量赋值时，ts会自动检查值是否符合类型声明，符合则赋值，否则就报错
  • 类型声明给变量设置了类型，变量就只能存储当前类型的值

    // 声明变量a的类型为number
    let a: number;
    // 把数字1赋给变量a
    a = 1
    // 此处语法报错 'hello'为string
    a = 'hello'

    // 声明b变量的类型为boolean 并赋值为true
    // let b: boolean = true
    // 在变量赋值过程中 ts会自动检测变量类型
    let b = true
    // 此处语法报错 b为boolean 不能赋值为number类型
    b = 123

• 函数参数类型

    // 自动检测a,b类型为number
    function sum(a, b) {
        return a + b
    }
    sum(123, 456)
    
    // 将函数参数给定类型
    function sum(a:number, b:number) {
        return a + b
    }
    // 参数只能给number类型 否则报错
    sum(123, 456)
    // 参数个数严格限制 由于参数就2个，传参传了3个，此处语法报错
    sum(123, 456 ,789)

• 函数返回值类型

    // 在函数后面加上返回值类型 返回值类型给定
    function sum(a, b):number {
        // 此处语法报错 不能给string类型
        return a + '456'
    }
    sum(123, 456)

• ts类型

• 字面量类型声明

    // a声明为10 不能更改
    let a:10
    // 此代码报错 不能赋值为11
    a = 11
    
    // 字面量类型声明基础用法
    // b声明为man或者woman 可以使用|来连接多个类型
    let b : "man" | "woman"
    b = "man"
    b = "woman"
    // 此代码报错 不是定义的字面量类型
    b = "vike"

• 多个类型声明
  • 使用|来连接多个类型
  • 联合类型

    let a: boolean | string
    a = true
    a = 'hello'

• any 类型
  • any表示的是任何类型
  • 变量设置了any类型后，相当于关闭了对该变量ts的类型检测
  • ts种不建议使用any类型
  • 声明变量不指定类型，ts解析器自动判断变量类型为any
  • any类型的变量可以赋值给任意变量

    // 显示any类型
    let b : any
    b = 123
    b = 'hello'
    b = true
    
    // 隐式any类型
    let b

• unknown 类型
  • 表示未知类型的值

    let b : unknown
    b = 123
    b = 'hello'
    b = true

• unknown 和 any的区别
  • any 可以赋值给其他变量 污染环境
  • unknown 只影响自己
  • unknown 实际上就是一个类型安全的any
  • unknow 类型的变量不能赋给其他变量

    let b : any
    b = 123
    b = 'hello'
    b = true

    let s : string
    // 赋值成功 污染变量s
    s = b

    let c : unknown
    c = '123'
    // 赋值不成功 s还是string类型 代码报错
    s = c

• unknown 类型赋值
  • 1. if 判断类型是否相同
  • 2. 类型断言 告诉解析器变量的实际类型

    let s : string
    let c : unknown
    c = '123'
    // if 判断
    if (c === 'string') {
        s = c
    }
    // 断言 方法1
    s = c as string
    // 断言 方法2
    s = <string> c

• void 类型
  • 用来表示空 函数为例 就是没有返回值

    function fn(): void {
        // 此处代码报错
        return 123
        // 此处代码正常运行
        return null
        return undefined
    }

• never 类型
  • 表示永远不会返回结果
  • 常用于报错，不能返回任何空和undefined都不行

    function fn1() : never {
        throw new Error('报错信息')
    }

• object 类型
  • object表示js的一个对象
  • 对象里有多少参数就要写多少参数
  • 如果参数不齐 就在参数后面跟？表示不确定参数

    let d: { name: string, age: number }
    d = { name: 'vike', age: 18 }
    
    // 特殊写法 不报错 表示可选属性
    let d: { name: string, age: number , sex?: string}
    d = { name: 'vike', age: 18 }
    
    // 特殊写法 传参过多 propName是自定义写法  any是属性值
    let e: { name: string, [propName: string]: any }
    e = { name: 'vike', age: 18, sex: 'man' }

• 设置函数结构的类型声明
  • 语法： (形参:类型，形参:类型 …)=>返回值

    let f : (a:number,b:number)=>number
    f = function(a, b):number {
        return 10
    }

• array 类型
  • 数组声明两种方式
  • 类型[]
  • Array<类型>

    // 字符串数组 创建方式
    let h : string[]
    h = ['1', '2', '3']
    // 数字数组 创建方式
    // let g : number[]
    let g : Array<number>
    g = [1, 2, 3]

• tuple 类型
  • 元组就是固定长度的数组
  • 语法: [类型, 类型, 类型]

    let j : [string, number]
    j = ['123', 123]

• enum 类型
  • 枚举类型
  • Gender

    enum Gender {
        Male = 0,
        Female = 1
    }

    let i: { name: string, gender: Gender }
    i = { name: 'vike', gender: Gender.Male }

• 特殊符号
  • & 表示同时

    let x: { name: string } | { age: number }
    x = { name: 'vike', age: 18 }

• 类型的别名
  • 给自定义类型取简单别名

    type MyType = 1 | 2 | 3 | 4 | 5
    let k : MyType
    let l : MyType

总结

• 今日 typescript 基础及类型知识 get~