TypeScript入门|青训营笔记

这是我参与「第五届青训营 」笔记创作活动的第1天，关于Typescript入门的知识点总结

———Zy_Thomas

TypeScript的发展历史

• 2012-10：微软发布了TypeScript第一个版本（0.8）

• 2014-10：Angular发布了基于TypeScript的2.0版本

• 2015-04：微软发布了Visual Studio Code

• 2016-05：@types/react发布，TypeScript可开发React

• 2020-09：Vue发布了3.0版本，官方支持TypeScript

• 2021-11：v4.5版本发布

为什么是Typescript

Js是动态类型：在JavaScript解析引擎执行时才会进行类型匹配,在运行之前，变量类型允许改变。 Ts是静态类型：会提前在JavaScript解析执行之前执行，并且变量类型被确定时通常不能改变。

Js和Ts都是弱类型语言。

Typescript的优势：

一、静态类型：

1. 可读性增强：基于语法解析TsDoc，ide增强。
2. 可维护性增强：在编译阶段暴露大部分错误=>有利于提高多人合作的大型项目的稳定性和开发效率。

二、JS的超集：

1. 包含于兼容所有Js特性，支持共存。
2. 支持渐进式引入和升级。

TypeScript的数据结构

Ts的基本数据类型

/*字符串*/
const q:string='string';
/*数字*/
const w:number=1;
/*布尔值*/
const e:boolean=true;
/*null*/
const r:null=null;
/*undefined*/
const t:undefined=undefined;

对象类型：

interface Iobject{
    /*只读属性*/
    readonly Id:number;
    name:string;
    /*可选属性*/
    hobby?"string;

函数类型：

/*确定函数的入参和出参*/
function add(x:number,y:number):number{
    return x+y;
   }

typescript还可以实现函数重载

数组类型：

type Arr1=number[];
type Arr2=Array<string|number|Record<string,number>>
type Arr3=[number,number,string,string]

TypeScript的高级数据结构

联合/交叉类型：

• Ta|Tb表示可以是这两种类型中的任意一种
• Ta&Tb多种类型叠加到一起成为一种类型，包含了两种类型的所有特性。

类型保护与守卫

• 类型守卫：定义一个函数，它的返回值是一个类型谓词，生效范围为子作用域
• 联合类型＋类型保护=自动类型推断

工程运用

Web

1. 配置webapack loader相关配置。
2. 配置tsconfig.js文件
3. 运行webpack启动/打包。
4. loader处理ts文件时，会进行编译和类型检查。

相关loader：

• awesome-typescript-loader
• babel-loader

引用参考

5分钟上手TypeScript · TypeScript中文网 · TypeScript——JavaScript的超集 (tslang.cn)