TypeScript 学习 | 青训营笔记

这是我参与「第四届青训营」笔记创作活动的第11天

认识Typescript

编程语言的类型

动态类型语言（Dynamically Typed Language）

   **特点：运行期间进行数据类型检查**

  在使用动态类型语言编程期间，不用给变量指定数据类型，如：JavaScript、Python、Ruby

静态类型语言（Statically Typed Language）

  **特点：编译阶段进行数据类型检查**

  在使用静态类型语言编程期间，需要手动的指定数据类型，如：C、C++、Java、C#

Typescript发展史

为什么是TypeScript

静态类型：
- 可读性增强：基于语法解析TSDoc、ide增强
- 可维护性增强：在编译阶段暴露大部分错误
JS的超集：
- 包含于兼容所有JS特性，支持共存
- 支持渐进式引入与升级

基本语法

原始数据类型和Any类型

原始类型：

Number
String
Boolean
Undefined
Null
BigInt（ES6）
Symbol（ES6）

any类型： 允许赋值为任意类型，可以访问任何属性和方法（如果有明确的类型应避免使用这个类型）

数组和元组

数组（Array）

声明数字类型的数组:

let arrOfNumbers:number[] = [1,2,3]

元组（Tuple）

即特殊类型的数组，可以使用数组的api，可以自定义多种数据类型，但新增的数据必须是已经定义好的数据类型

let user:[string,number] = ['viking',20]

Interface——接口

用于对「对象的形状（Shape）」进行描述
用 implements 的方法来抽象类的属性和方法
定义函数类型
Duck Typing（鸭子类型）：是动态编程语言的一种对象推断策略，它更关心对象如何被使用而不是对象本身

Interface是不存在于JavaScript中的概念，所以在ts编译后不会被转换过去，只能做类型的静态检查

interface Person {//用interface关键字定义了一个接口

   readonly id: number //readonly代表只读属性

    name:  string,

    age?: number  //属性后跟？代表是可选参数

}

let viking: Person = {
    id = 1,
    name: 'viking'
    age:22  
}

函数

类型推论、联合类型、类型断言

类型推论：

在没有明确指定类型的时候推测出一个类型

let str = 'str';

联合类型：

可以指定多种类型（但只能访问联合类型所有类型里共有的属性或方法）

let numberOrString:number | string

类型断言：

TypeScript 类型断言用来告诉编译器你比它更了解这个类型

不是类型转换，断言成一个联合类型中不存在的类型是会出现错误的

在不确定类型的时候访问其中一个类型的属性或方法

1.用as指定类型

只能指定联合类型中有的类型

// 这里我们可以用 as 关键字，告诉typescript 编译器，
//你没法判断我的代码，但是我本人很清楚，
//这里我就把它看作是一个 string，你可以给他用 string 的方法。
function getLength(input: string | number): number {
  const str = input as string
  if (str.length) {
    return str.length
  } else {
    const number = input as number
    return number.toString().length
  }
}

2.类型守卫（type-guard）

当遇到一个联合类型的时候，使用条件语句，它可以自动帮你来缩小类型的范围

// typescript 在不同的条件分支里面，智能的缩小了范围，这样我们代码出错的几率就大大的降低了。
function getLength2(input: string | number): number {
  if (typeof input === 'string') {
    return input.length
  } else {
    return input.toString().length
  }
}

枚举（Enums）

数字枚举，一个数字枚举可以用enum这个关键词来定义，我们定义一系列的方向，然后这里面的值，枚举成员会被赋值为从 0 开始递增的数字

枚举默认从0开始赋值，举里的项会自动递增(+1)，若手动赋值，则会接着手动赋值的枚举项递增
如果某个属性赋值，其他属性也要赋值，否则报错
js的赋值语句返回被赋的值
定义枚举时加const则为常量枚举，常量枚举可提升性能

泛型（Generics）

泛型是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。

可以先看做一个占位符，在使用时才动态控制其类型

类型别名，字面量和交叉/联合类型

类型别名

就是给类型起一个别名，让它可以更方便的被重用。

关键字：type

字面量

常量作为类型写在冒号后面，此时冒号前面的变量只能赋值为该常量；

交叉/联合类型

个人总结

本次课程学习了Typescript的一些知识，对于我理解以及运用其有很大帮助。