2023.10 TS学习-基础类型

wo不是黄蓉
106 阅读4分钟

“开启掘金成长之旅！这是我参与「掘金日新计划 · 2 月更文挑战」的第 11 天，点击查看活动详情”

大家好，我是wo不是黄蓉，今年学习目标从源码共读开始，希望能跟着若川大佬学习源码的思路学到更多的东西。有想法的同学也可以加我微信进行交流：hp1256003949。

开始使用ts的第一步好难啊，用到一半每次都想放弃，经常会出现一些不知所以的错误提示，然后就没有解决的思路，从今天开始学习ts

ts学习

准备ts环境，npm i -g typescript

tsc --init初始化一个ts配置文件

tsc .\src\demo.ts将demo.ts编译为demo.js

类型

类型和接口有啥区别


//类
class Student {
  fullName: string
  //类和接口配合使用构造函数里的参数不加public为啥会报错？
  constructor(firstName: string, age: number, public lastName: string) {
    this.fullName = firstName + " " + " " + lastName + "," + age + "years old"
  }
}
​
//类型注释
interface Person {
  firstName: string
  lastName: string
}
​
function greeter(person: Person) {
  return "Hello, " + person.firstName + " " + person.lastName
}
​
let user = new Student("Jane", 18, "User")
​
document.body.innerHTML = greeter(user)

1677244503909.png

基础类型

boolean、number、string

定义数组的两种方式

其他基础类型应该比这个更简单就不举例了


//定义数组
interface Status {
  label: string
  value: number
}
//方式一
let statusOptions: Status[] = [
  { label: "已过期", value: -1 },
  { label: "生效中", value: 1 },
]
//方式二
let statusList: Array<Status> = [
  { label: "已过期", value: -1 },
  { label: "生效中", value: 1 },
]
元组

和数组的区别：可以定义不同的类型（混合），数组约定只有一种类型


//元组，定义的数组项的类型可以不一致
let x: [string, number]
x = ["hello", 1]

官方给的例子：


x[3] = 'world'; // OK, 字符串可以赋值给(string | number)类型
​
console.log(x[5].toString()); // OK, 'string' 和 'number' 都有 toString
​
x[6] = true; // Error, 布尔不是(string | number)类型

我给越界的数组赋值，显示的结果是编译不通过，应该是不可以扩展数组的元素的，相当于一开始就规定了数组的长度，以及类型，以及数组元素类型的顺序


//给越界的数组赋值
x[3] = "world"
x[3] = true

1）编译会报错，不能给越界的数组赋值

1677245978357.png

2）ts提示报错，赋值元素只能是元组可接收的值类型

1677309419992.png

枚举

类似于键值对，可以手动指定成员的数值，相当于一个双向绑定的映射，我知道red可以找到1，我知道1可以找到red


//枚举
enum Color {
  Red = 1,
  Green,
  Blue,
}
  //查找值
let c: Color = Color.Green
​
//查找值的name
let colorName: string = Color[2]
​
console.log(colorName) // 显示'Green'因为上面代码里它的值是2

返回的是Green，不太清楚这边定义的默认值的意思是啥，枚举里面也没有给其赋值默认值解答：因为第一个如果给赋值了，后面自动进行递增

any

不确定的类型，定义为不确定的类型可以赋值为不同的类型


let a: any = 4
a = "hello"

定义为any类型，可以随意访问属性和方法无论是真的已经定义过的还是没定义的，和object的区别，即便object上存在有该方法也不能访问


let b: any = 4
b.toFixed()
let c: Object = 4
c.toFixed()

1677315410095.png

混合类型的数组


let arr: any[] = [1, "hello", true]
void

通常函数没有返回值是定义为void


function printPerson(person: Person): void {
  console.log("Hello, " + person.firstName + " " + person.lastName)
}

void类型的变量，只能赋值为undefined和null，试过定义为null也会提示，但是编译不会报错，但是赋值为number类型的会编译报错


let d: void = 1
let e: void = undefined
let f: void = null

1677315655808.png

1677316466881.png

null和undefined

默认情况下null和undefined是所有类型的子类，可以把null和undefined赋值给number类型的变量


//编译不会报错
let a: null = undefined
let b: undefined = undefined

指定--strictNullChecks标记，编译会报错，只能赋值给各自的类型

1677317322993.png

never

表示一定不会是某种类型

object

和js的object理解一样

类型断言

相当于告诉编译器给我留个后门，我知道这个东西到底是什么，请不要质疑我的判断。

官方的一句解释是：类型断言好比其他语言里的类型转换，但不进行特殊的数据检查和解构。它没有运行时的影响，只是在编译阶段起作用

两种方式


let a: any = "string"
//尖括号方式
let strLength: number = (<string>a).length
//as 方式
let sLen: number = (a as string).length

变量声明

var let const 讲的比较多的，不清楚的可以自己去参考官方的 更多参考

avatar
文章
阅读
粉丝