> 技术文档 > 20分钟学会TypeScript

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 = 10let v3: boolean = trueley nu: null = nulllet un: undefined = undefinedlet v4: string | null = nulllet v5: 1 | 2 | 3 = 2

6 数组、元祖、枚举等

6.1 数组

有以下两种声明方式:

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

6.2 元组

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

let t1: [number, string, number] = [1, \'a\', 2]t1[0] = 100t1[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 | numberlet a: MyUserName = 10

10 泛型

function myFn(a: T, b: T): T[] { return [a, b]}myFn(1, 2)myFn(\'a\', \'b\')myFn(\'a\', \'b\')