TS语法(一)

37 阅读2分钟

一、变量的声明

标识符:数据类型 = 赋值;
可以使用var、let、const来声明变量
不建议使用var,因为var是没有块级作用域的

也不用每次声明变量的时候都写上数据类型,因为TypeScript会进行类型推导,比如 let message = 'Hello TypeScript' ,message就会被推导成string,把一个数字再赋值给message就会报错

tsinfer1.PNG

tsinfer2.PNG

二、TypeScript类型

  • any
  • unknown
  • viod
  • never
  • tuple

any:表示不限制标识符的任意类型,可以在该标识符上进行任意的操作,就和JS一样
unknown:用于描述类型不确定的变量,在该标识符上进行任意的操作都是非法的。必须进行类型缩小,才能操作变量

tsunknown.PNG

void:用来指定函数类型的返回值
never:表示永不会发生值的类型,在实际项目开发中,还没用过⊙﹏⊙‖∣
tuple:元组类型,react中useState()的返回值就是元组类型
const info:[string,number] = ['hh',18]
那元组类型和数组有什么区别呢?

  1. 数组中存放的一般都是相同类型的元素
  2. 元组类型可以根据索引值获取到值的类型,而数组不行

三、联合类型 & type & interface

let foo: number | string = 'abc'
foo就是一个联合类型,联合类型就是有两个或者两个以上的其他类型组成的类型,表示可以是这些类型中的任何一个值

type可以给任何类型起别名

type myType = number | string 
let myFoo: myType = 222

type user = {
    name:string,
    age:number
}
let user1:user = {
    name:'alice',
    age:18
}

interface也有type的作用,可以用来声明对象的类型,那这二者有什么区别呢?官网的解释如下

Type aliases and interfaces are very similar, and in many cases you can choose between them freely. Almost all features of an interface are available in type, the key distinction is that a type cannot be re-opened to add new properties vs an interface which is always extendable.

type&interface.PNG

四、类型断言和非空断言

有时候TS无法获取具体的类型信息时,可以使用类型断言
const myEle = document.getElementById('my-id')
myEle的类型是getElementById()的返回值类型 HTMLElement | null,这种情况就可以使用类型断言
const myEle = document.getElementById('my-id') as HTMLImageElement
类型断言除了可以使用 as(除了在.tsx文件中),还可以
const myEle = <HTMLImageElement>document.getElementById('my-id')

类型断言会被编译器移除,不会影响代码的运行时行为。

非空断言! :表示可以确定某个标识符是有值的,在编译阶段跳过检测

function liveDangerously(x?: number | null) {
    // No error
    console.log(x!.toFixed());
}

五、字面量类型

let name:'hh'="hh"
这里的name就是字面量

image.png

info.method是string类型,值是post,但是不能赋值给method,method是联合类型。

可以这样改 request(info.url,info.method as 'post') 或者

const info = {
    url:'',
    method: "post"
} as const