大家好，我是wo不是黄蓉，今年学习目标从源码共读开始，希望能跟着若川大佬学习源码的思路学到更多的东西。
开始使用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 讲的比较多的，不清楚的可以自己去参考官方的 更多参考
网友评论