TS 学习(一)基础类型

127 阅读3分钟

TS 学习笔记 1

定义:typescript 是 JavaScript 的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程

基础类型

typescript官网文档中 TS 的基础类型有12种

  • boolean(布尔)
  • number(数字)
  • string(字符串)
  • Array(数组)
  • Tuple(元组)
  • enum(枚举)
  • any(任意值)
  • void(空值)
  • undefined
  • null
  • never(永不存在的值)
  • Object(对象)

当你声明了变量,并且分配了类型,你再将变量赋值其他类型时就会报错


let a: number = 11

a = '111' // Error: 不能将类型“string”分配给类型“number”

当然在你声明定义时,ts也会自动识别定义时值的类型,不过还是要遵循代码规范,声明时就写好变量类型


let a = 11

a = '111' // Error: 不能将类型“string”分配给类型“number”

其中有些特殊的:

Array 类型的声明方式有两种:

let arr = number[]  = [1, 2, 3] // 数组的 item 就必须是 number 类型的了

// 数组泛型 方式声明
let arr2 = Array<number> = [1, 2, 3]

Tuple 类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同

-- 其实就是一个固定了每一项类型和项数的数组

    let tuple: [number, string]
    
    tuple = [1, 2]  // Error: 不能将类型“number”分配给类型“string”
    tuple = [1, 'q', 3] // Error: 不能将类型“[number, string, number]”分配给“[number, string]”。源具有 3 个元素,但目标仅允许 2 个。
    // 只有正确的项数且每一项的类型都正确才正确
    tuple = [1, 'a']

enum类型是对JavaScript标准数据类型的一个补充. 像C#等其它语言一样,使用枚举类型可以为一组数值赋予友好的名字

--感觉没怎么用到过这个类型

enum Color { Red, Green, Blue }

let c: Color = Color.Green
// 默认情况下,从0开始为元素编号。 你也可以手动的指定成员的数值
enum Color { Red = 1, Green = 2, Blue = 4 }

let c: Color = Color.Green
let colorName: string = Color[2] // Green

any类型 : 变量类型是动态的或者你想偷懒不想严格定义类型给变量,就用它

void: 这个学过C的应该都知道是啥. 这基本就是给函数没有返回值的时候用,声明一个void类型的变量没有什么大用,因为你只能为它赋予 undefined 和 null

function warnUser(): void {
    console.log("This is my warning message")
}

let unusable: void = undefined

null 和 undefined 类型 也是没啥用. 默认情况下 null 和 undefined 是所有类型的子类型。 就是说你可以把 null 和 undefined 赋值给 number 类型的变量

never类型表示的是那些永不存在的值的类型. never类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型

function error(message: string): never {
    throw new Error(message)
}
断言

就是告诉 TS 这是啥类型的

let someValue: any = "this is a string"
// 方法一
let strLength: number = (<string>someValue).length
// 方法二
let strLength: number = (someValue as string).length

*** 注意⚠️ 在TypeScript里使用JSX时,只有 as语法断言是被允许的