前提
本文是根据B站UP主吴悠讲编程的视频内容来记录的，主要是给自己看看，可以快速入门ts。
视频：BV1gX4y177Kf
大家可以去看一看，我感觉收获挺大的~
TypeScript核心
1. 类型推断
typescript会根据给变量存放的初始值来进行变量类型限定
// 报错
let str = 'abc'
str = 10
2. 类型注解
书写变量时，给变量一个类型的限定
let str: string = 'abc'
// 预声明
let str: string
str = 'abc'
3. 类型断言
let numArr = [1, 2, 3]
// 断言result是一个number类型
// 注意：需要人工做干预，即确定代码可用，否则可能会报错（比如undefined）
const result = numArr.find(item => item > 2) as number
result * 5
4. 基础类型和联合类型
4.1 基础类型
let v1: string = 'abc'
let v2: number = 10
let v3: boolean = true
let nu: null = null
let un: undefined = undefined
4.2 联合类型
- 限制类型
// v4有可能分配为字符串，有可能分配为空
let v4: string | null = null
null默认可以分配给其他类型
注意：使用配置项strictNullChecks则不能随意将null分配给其他类型
2. 限制具体值
// 报错
let v5: 1 | 2 | 3 = 5
// 不报错
let v6: 1 | 2 | 3 = 2
5. 数组、元组、枚举等
5.1 数组
在javascrpit中，数组可以存储不同类型的数据
// 不建议
let arr = [1, 2, 3, 'abc']
通过类型来约束整个数组可以存储的数据类型
// 数值数据
let arr: number[] = [1, 2, 3]
// 字符串数组
let arr1: Array<string> = ['a', 'b', 'c']
5.2 元组
元组也可以存储多个数据，但是限定了存储的数据个数以及每个数据的类型
let t1: [number, string, number] = [1, 'a', 2]
t1[0] = 100
当希望某个值是可选时，加上问号
let t1: [number, string, number?] = [1, 'a']
5.3 枚举类型
enum MyEnum {
A,
B,
C
}
// 访问的是一组数据
console.log(MyEnum.A)
console.log(MyEnum.[0])
A取值0，0取值A
相当于js中：
"use strict";
var MyEnum;
(function (MyEnum) {
MyEnum[MyEnum["A"] = 0] = "A";
MyEnum[MyEnum["B"] = 1] = "B";
MyEnum[MyEnum["C"] = 2] = "C";
})(MyEnum || (MyEnum = {}));
console.log(MyEnum.A);
console.log(MyEnum.[0]);
5.4 void类型
void只能被分配undefined值（严格模式）
6. 函数
function MyFn (a: number, b: string): string {
return a + b
}
可选参数必须在必选参数后面
function MyFn (a: number, b?: string): string {
return a + b
}
特殊：希望给参数设置默认值，则可以在必选参数左侧
function MyFn (a = 10, b: string, c?: boolean, ...rest: number[]): number {
return 100
}
const f = MyFn(20, 'abc', true, 1, 2, 3)
7. 接口
interface
interface Obj = {
name: string,
age: number
}
const obj: Obj = {
name: 'a',
age: 10
}
8. 类型别名
a可能是string，也可能是number
let a: string | number = 10
更好的写法：
type MyUserName = string | number
let a: MyUserName = 10
// let a: MyUserName = 'abc'
9. 泛型
function myFn<T>(a: T, b: T): T[] {
return [a, b]
}
myFn<number>(1, 2)
myFn<string>('a', 'b')
// 简写
myFn('a', 'b')
TypeScript进阶
10. 函数重载（伪重载）
function hello (name: string): string
function hello (age: number): string
function hello (value: string | number): string {
if (typeof value === 'string') {
return '你好，我的名字是' + value
} else if (typeof value === 'number') {
retutn `你好，我的年龄是${value}`
} else {
return '非法格式'
}
}
hello('abc')
hello(18)
11. 接口继承
可以用于功能复用
interface Parent {
prop1: string
prop2: number
}
interface Child extends Parent {
prop3: string
}
const myObj: Child = {
prop1: '',
prop2: 1,
prop3: ''
}
12. 类的修饰符
class Article {
// 必选
public title: string
content: string
// 可选
aaa?: string
// 设置默认值
bbb = 100
private temp?: string
protected innerData?: string
// 静态属性
static author: string
// 只读
private static readonly ppp: string = '张三'
constructor (title: string, content: string) {
this.title = title
this.content = content
}
}
const a = new Article('标题', '内容')
Article.author
13. 存取器
class User {
private _password: string = ''
get password(): string {
return '$$$'
}
set password(newPass: string) {
this._password = newPass
}
}
const u = new User()
console.log(u.password)
14. 抽象类
abstract class Animal {
abstract name: string
abstract makeSound(): void
}
class Cat extends Animal {
name: string = '小猫',
makeSound(): void {
}
}
15. 类实现接口
单继承，多实现
interface Animal {
name: string
get sound(): string
makeSound(): void
}
class Dog implements Animal {
name: string = '小狗'
get sound() {
return ''
}
makeSound(): void {
}
}
16. 泛型类
class MyClass<T> {
public value: T
constructor (value: T) {
this.value = value
}
do (input: T): T {
console.log('处理数据', this.value)
return input
}
}
const myStr = new MyClass<string>('hello')
myStr.do('agg')
