20分钟学会TypeScript

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

[1 必备概念](#1 必备概念)

[1.1 typescript使用方式](#1.1 typescript使用方式)

[1.2 typescript介绍](#1.2 typescript介绍)

[2 类型推断](#2 类型推断)

[3 类型注解](#3 类型注解)

[4 类型断言](#4 类型断言)

[5 基础类型和联合类型](#5 基础类型和联合类型)

[6 数组、元祖、枚举等](#6 数组、元祖、枚举等)

[6.1 数组](#6.1 数组)

[6.2 元组](#6.2 元组)

[6.3 枚举](#6.3 枚举)

[6.4 其他](#6.4 其他)

[7 函数](#7 函数)

[8 接口](#8 接口)

[9 类型别名](#9 类型别名)

[10 泛型](#10 泛型)

1 必备概念

1.1 typescript使用方式

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

1.2 typescript介绍

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

2 类型推断

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

TypeScript 复制代码

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

3 类型注解

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

TypeScript 复制代码

let str: string = 'abc'

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

4 类型断言

TypeScript 复制代码

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

5 基础类型和联合类型

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

TypeScript 复制代码

let v1: string = 'abc'
let v2: numbe = 10
let v3: boolean = true
ley nu: null = null
let un: undefined = undefined

let v4: string | null = null
let v5: 1 | 2 | 3 = 2

6 数组、元祖、枚举等

6.1 数组

有以下两种声明方式：

TypeScript 复制代码

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

6.2 元组

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

TypeScript 复制代码

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

let t2: [number, string, number?] = [1, 'a']

6.3 枚举

TypeScript 复制代码

enum MyEnum {
    A,
    B,
    C
}

//访问方式
console.log(MyEnum.A)
console.log(MyEnum[0])

6.4 其他

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

TypeScript 复制代码

void

7 函数

TypeScript 复制代码

function MyFn (a = 10, b = number, c?: string, ...rest: number[]): number {
    return 100
}

const f = MyFn(20, 100, 'abc', 1, 2, 3)

8 接口

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

TypeScript 复制代码

interface Obj {
    name: string,
    age: number
}

const obj1: Obj = {
    name: 'a',
    age: 10
}

const obj2: Obj = {
    name: 'b',
    age: 20
}

9 类型别名

TypeScript 复制代码

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

10 泛型

TypeScript 复制代码

function myFn<T>(a: T, b: T): T[] {
    return [a, b]
}

myFn<number>(1, 2)
myFn<string>('a', 'b')
myFn('a', 'b')