注意点

  1. 变量定义格式为 let 变量名:变量类型 = 变量值
  2. 变量开始定义的类型，后期不能把其他类型的值赋值给它

    布尔值(boolean)

    1. (() => {
    2.  let flag:boolean = true
    3.  console.log(flag)
    4.  flag = false
    5.  console.log(flag)
    6. })()
    7. // 输出结果
    8. // true
    9. // false

    数字(number)

    1. (() => {
    2.  let a1: number = 10
    3.  let a2: number = 0b1010 //二进制
    4.  let a3: number = 0o12  //八进制
    5.  let a4: number = 0xa  //十六进制
    6.  console.log(a1, a2, a3, a4)
    7. })()
    8. // 输出结果
    9. // 10 10 10 10

    字符串(string)

    1. (() => {
    2.  let str1:string = '好好学习'
    3.  console.log(str1)
    4.  let str2:string = str1 + '天天考'
    5.  console.log(str2)
    6.  let num:number = 100
    7.  console.log(str2+num)
    8. })()
    9. // 输出结果
    10. // 好好学习
    11. // 好好学习天天考
    12. // 好好学习天天考100

    undefined和null

    1. (() => {
    2.  let undef: undefined = undefined
    3.  console.log(undef)
    4.  let nll: null = null
    5.  console.log(nll)
    6.  // undefined和null都可以作为其他类型的子类型（把undefined和null赋值给其他类型）
    7.  let num: number = undefined
    8.  console.log(num)
    9.  let str: string = null
    10.  console.log(str)
    11. })()
    12. // 输出结果
    13. // undefined
    14. // null
    15. // undefined
    16. // null
  • 如果报错关闭tsconfig.json中的严格检验模式

“strict”: false

数组

列表中元素的数据类型必须和定义的数据类型一致，否则报错

  1. (() => {
  2.     // 普通定义
  3.     let arr1: number[] = [1, 2, 3]
  4.     console.log(arr1)
  5.     // 泛型定义
  6.     let arr2: Array<number> = [10, 20, 30]
  7.     console.log(arr2)
  8.     console.log(arr2[0])
  9. })()
  1. ![image.png](https://cdn.nlark.com/yuque/0/2021/png/2308212/1613916112249-d02685b9-7828-4c09-b92b-19526975b21e.png#align=left&display=inline&height=67&originHeight=67&originWidth=170&size=2759&status=done&style=none&width=170)

元组

如果想存储不同类型的值到一个列表中，使用元组。在定义元组的时候，类型和个数就已经限定了，赋值时，数据类型和个数与定义的一致

  1. (() => {
  2.     let tup1: [number,string,boolean] = [1, '111', true]
  3.     console.log(tup1)
  4.     console.log(tup1[0].toFixed(2))
  5.     console.log(tup1[1].split(''))
  6. })()
  1. ![image.png](https://cdn.nlark.com/yuque/0/2021/png/2308212/1613916265968-8a2db6e1-1e25-457d-a1bc-113c4a0f1f04.png#align=left&display=inline&height=68&originHeight=68&originWidth=213&size=4284&status=done&style=none&width=213)

枚举

存储的值在确定的情况下使用，比如男女。默认情况下，枚举里面的每个元素都有自己的编号值，默认从0开始递增，也可以指定编号值

  1. (() => {
  2.     enum Level1 {
  3.         good,
  4.         general,
  5.         bad
  6.     }
  8.     console.log(Level1.good, Level1.general, Level1.bad)
  10.     enum Level2 {
  11.         good = 10,
  12.         general = 20,
  13.         bad = 30
  14.     }
  16.     console.log(Level2.good, Level2.general, Level2.bad)
  17. })()
  18. // 输出结果
  19. // 0 1 2
  20. // 10 20 30

any

  • 当一个数组中存储数据的类型和数量不确定时，可以使用any来定义数组
  • 但是在调用数组元素时，不会对类型进行检测（开发提示）
    1. (() => {
    2.   let arr1 = 100
    3.   console.log(arr1)
    4.   let arr2: any[] = [123, 'qwer', true]
    5.   console.log(arr2)
    6.   console.log(arr2[0].split(''))
    7. })()
    image.png

    void

    在声明函数的时候，小括号后面使用:void，代表这个函数没有任何返回值

  1. (() => {
  2.     function say():void{
  3.         console.log('hello')
  4.     }
  5.     console.log(say())
  6. })()
  7. // 输出结果
  8. // hello
  9. // undefined

object

和js对象用法类似，多了类型检测

  1. (() => {
  2.     function getObj(obj:object):object{
  3.         console.log(obj)
  4.         return {
  5.             name:'李四',
  6.             age:20
  7.         }
  8.     }
  9.     console.log(getObj({name:'张三',age:18}))
  10. })()

image.png

联合类型

值的类型不确定时，可以使用|将多个可能的类型写到一起，表示取值可以为多种其中一种类型

  • 例如：定义一个函数，参数类型为数字或字符串

    1. (() => {
    2.   function getValue(value:number|string):string{
    3.       return value.toString()
    4.   }
    5.   console.log(getValue(123))
    6.   console.log(getValue('abc'))
    7. })()
    8. // 输出结果
    9. // 123
    10. // abc

    类型断言

    使用联合类型时，编译器并不知道值具体是什么类型，调用相关类型的方法时会报错，此时通过类型断言这种方式可以告诉编译器，“相信我，我知道自己在干什么”。

  • 语法

方式一: <类型>值
方式二: 值 as 类型 tsx中只能用这种方式

  • 需求: 定义一个函数得到一个字符串或者数值数据的长度

    1. (() => {
    2.   function getLength(x: number | string) {
    3.       if ((<string>x).length) {
    4.           // 是否存在length方法，如果是string类型，条件为true
    5.           return (x as string).length
    6.       } else {
    7.           return x.toString().length
    8.       }
    9.   }
    10.   console.log(getLength('abcd'))
    11.   console.log(getLength(1234))
    12. })()
    13. // 输出结果
    14. // 4
    15. // 4

    类型推断

    TS会在没有明确的指定类型的时候推测出一个类型

  • 有下面2种情况

  1. 定义变量时赋值了, 推断为对应的类型.
    2. 定义变量时没有赋值, 推断为any类型 ```typescript / 定义变量时赋值了, 推断为对应的类型 / let b9 = 123 // number // b9 = ‘abc’ // error

/ 定义变量时没有赋值, 推断为any类型 / let b10 // any类型 b10 = 123 b10 = ‘abc’ ```