[ TypeScript 入门 | 青训营笔记]

库库好好学习
78 阅读1分钟

这是我参与「第五届青训营 」伴学笔记创作活动的第 3 天

什么是TypeScript

JS：动态类型，弱类型语言。
TS：静态类型，弱类型语言。
静态类型：可读性增强，可维护性增强，是JS的超集，包含并兼容所有js特性，支持共存，支持渐进式引入升级。

基本概念

函数类型

image.png

函数重载

function greet(person: string): string { 
    return `Hello, ${person}!`; 
}
  • 更新参数和返回类型直接修改函数签名
function greet(person: string | string[]): string | string[] { 
    if (typeof person === 'string') { 
        return `Hello, ${person}!`; 
    } else if (Array.isArray(person)) { 
        return person.map(name => `Hello, ${name}!`); 
    } 
    throw new Error('Unable to greet'); 
}
  • 函数重载
    定义函数重载需要定义重载签名和一个实现签名。重载签名定义函数的形参和返回类型，没有函数体。一个函数可以有多个重载签名:对应于调用该函数的不同方式。另一方面，实现签名还具有参数类型和返回类型，而且还有实现函数的主体，且只能有一个实现签名。
// 重载签名 
function greet(person: string): string; 
function greet(persons: string[]): string[]; 

// 实现签名 
function greet(person: unknown): unknown { 
    if (typeof person === 'string') { 
        return `Hello, ${person}!`; 
    } else if (Array.isArray(person)) { 
        return person.map(name => `Hello, ${name}!`); 
    } 
    throw new Error('Unable to greet'); 
}

虽然实现签名实现了函数行为，但是它不能直接调用。只有重载签名是可调用的。如下会报错。

const someValue: unknown = 'Unknown'; 
greet(someValue);

学会TypeScript中的函数重载写法

泛型

为了让函数自适应各种类型的参数和输出，使用泛型。
image.png
image.png

type关键字

类型别名。
TS 中 interface 和 type 究竟有什么区别？

高级类型

  • 联合类型 IA | IB 表示一种值可以是IA或IB。
  • 交叉类型 IA & IB 表示多种类型叠加在一起称为一种类型。
    image.png
    image.png

类型保护与类型守卫

在js中不会报错，ts中会报错。
image.png
类型守卫getIsIA套在外面很麻烦，typescript有自己的实现方式。
image.png
typeof instanceof 是typescript内置的类型保护。
image.png
image.png
Partial是ts的内置类型。
image.png

TypeScript工程应用

web

  1. 配置webpack loader相关参数，将ts文件转换成webpack可以识别的文件。
  2. 配置tsconfig.ts文件。
  3. 运行webpack启动/打包。
  4. loader处理ts文件时，会进行编译和类型检查。

Node

使用TSC编译

  1. 安装Node和npm
  2. 配置tsconfig.ts文件。
  3. 使用npm安装tsc。
  4. 使用tsc编译得到js文件。
avatar
文章
阅读
粉丝