20分钟学会TypeScript

在B站看的【吴悠讲编程】的课程《20分钟学会TypeScript 无废话速成TS》，全长只有20分钟，真的是极致简单的入门视频，用这个专栏记录一下学习笔记。 

---

目录

1 必备概念

1.1 typescript使用方式

1.2 typescript介绍

2 类型推断

3 类型注解

4 类型断言

5 基础类型和联合类型

6 数组、元祖、枚举等

6.1 数组

6.2 元组

6.3 枚举

6.4 其他

7 函数

8 接口

9 类型别名

10 泛型

---

1 必备概念

1.1 typescript使用方式

• 本地下载使用：npm i typescript -g
• 在typescript官网：演练场playground

1.2 typescript介绍

javascript本身是弱类型脚本语言，本身使用起来是非常灵活的，但是当项目体量比较大的时候，这种灵活的编程方式不利于后期代码维护，由此，typescript应运而生。

2 类型推断

typescript会根据给变量存放的初始值进行变量类型限定。

let str = 'abc'
str = 10     //错误，str以后只能存放字符串值

3 类型注解

一般不建议使用类型推断，会使用类型限定，会通过冒号进行类型限定。

let str: string = 'abc'//或者是：
let str: string    //可以初始时不给值，做一个预声明
str = 'abc'

4 类型断言

let numArr = [1, 2, 3]
const result = numArr.find(item => item > 2) as number    //人工干预，断言result为number类型
result * 5

5 基础类型和联合类型

一般有字符串string、数值型number、布尔型bool

let v1: string = 'abc'
let v2: numbe = 10
let v3: boolean = true
ley nu: null = null
let un: undefined = undefinedlet v4: string | null = null
let v5: 1 | 2 | 3 = 2

6 数组、元祖、枚举等

6.1 数组

有以下两种声明方式：

let arr: number[] = [1, 2, 3]
let arr1: Array<string> = ['a', 'b', 'c']

6.2 元组

元组也可以存储数据，但是限定了存储的数据个数，以及每个数据类型。

let t1: [number, string, number] = [1, 'a', 2]
t1[0] = 100
t1[1] = 'b'let t2: [number, string, number?] = [1, 'a']

6.3 枚举

enum MyEnum {A,B,C
}//访问方式
console.log(MyEnum.A)
console.log(MyEnum[0])

6.4 其他

严格模式下，void只能被分配undefined值

void

7 函数

function MyFn (a = 10, b = number, c?: string, ...rest: number[]): number {return 100
}const f = MyFn(20, 100, 'abc', 1, 2, 3)

8 接口

接口interface通常用于对象的定义。

interface Obj {name: string,age: number
}const obj1: Obj = {name: 'a',age: 10
}const obj2: Obj = {name: 'b',age: 20
}

9 类型别名

type MyUserName = string | number
let a: MyUserName = 10

10 泛型

function myFn<T>(a: T, b: T): T[] {return [a, b]
}myFn<number>(1, 2)
myFn<string>('a', 'b')
myFn('a', 'b')