TypeScript 入门 | 青训营笔记

60 阅读3分钟

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

以下为今日课上笔记内容

一.为什么什么是TypeScript?

1.TypeScript发展历史

2a075d179f605bd0f983a6384d16b50.png

2.为什么什么是TypeScript?

JS:动态类型,弱类型语言

TS:静态类型,弱类型语言

  • 动态和静态的差别

动态类型的一个特征是它在执行阶段才去确定一个类型的一个匹配。假设你写了一个不正确的类型,然后你执行的时候,你会发现后台会进行报错,这就是一个很明显的动态类型里面的一个特征。他会在执行的时候才去做类型的一个检验或者是匹配,而静态类型语言是会提前去做这个事情,也就是我们平常遇到的python 或者Java,大家会发现这个编程语言,你是不可以直接执行的,一定是要先走一次编译流程,然后编译完以后再使用编译的一个长来进行执行。所以动态和静态的差别就在于所谓的这个编译到底发生在执行时还是。

  • 弱类型语言

其实就是当我们来运行一个字串的音和数字的音相加的时候,其实是可以通过的,因为他在执行的时候会进行类型转换,而在强类型语言中,一个数字和一个字串是没有办法相加的。

  • TypeScript的特点

1)静态类型

①可读性增强:基于语法解析TSDoc,ide增强

②可维护性增强:在编译阶段暴露大部分错误

基于这两点 多人合作的大型项目中,获得更好的稳定性和开发效率

2)JS 的超集

①包含于兼容所有Js特性,支持共存

②支持渐进式引入与升级

  • 编辑器推荐

Visual Studio Code 或 TypeScript 官网

二.基本语法

1.基础数据类型

左JS右TS

ffd07e58d5bdaf528b53e80048f49d7.png

2.对象类型

约定:用I开头表示类型 739692f77d956d74d61c2190a032e13.png 可选属性: hobby可省缺 可有可无 (冒号前有问号)

任意属性:需要用[]

3.函数类型

915f1353bfd649f2ca194b2cdc70f48.png

4.函数重载

f30b196807cb161eca2944b2ecc7baf.png

5.数组类型

常用第一、二种 c0c8128ecf83ac72274e152e6abfab7.png

6.Typescript补充类型

13d5d1a508918809c4b2634457c6224.png

7,Typescript泛型

ac1a01274e1b5e0966c8c7342948f53.png 79ae15e6771ce50f07099ffc2fff0bb.png

泛型常用语法

函数 类型别名 7eee252b0e4b55d3babd72d49edb292.png

8.类型别名 & 类型断言

338b0ba993e2ad7fe6aa3f18ce60546.png

9.字符串/数字 字面量

9488099f393f9070b93445b9b5b4168.png

三.高级类型

1.联合/交叉类型

场景: 29c2e0c544adea78e88d7b38590882c.png

联合类型: IA|IB;联合类型表示一个值可以是几种类型之一

交叉类型: IA & B;多种类型叠加到一起成为一种类型,它包含了所需的所有类型的特性

8f08c27f232767f242651eba2fa4e3c.png

2.类型保护与类型守卫

2228848924bebdd77514649ab536c8f.png

2b36b8846b503ac734fc490b56e4f8a.png

3.高级类型

82774367bff943ff178b1bec93f360a.png

f38bbfa84db255723126148aac5ae08.png

9fd62af05b4766161baab37fb0f53ec.png

4.函数返回值类型

61d99e190e9140dab17b42bf3f2ceaa.png

75f460fa4ff0044906c27f8602762f5.png

四.工程应用

1.Typescript工程应用 - Web

1)配置webapack loader相关配置

2)配置tsconfig.is文件

3)运行webpack启动 /打包

4)loader处理ts文件时,会进行编译与类型检查

2.相关loader:

1)awesome-typescript-loader

2)babel-loader

2.Typescript工程应用 - Node

1a6f370382ec510438cd8c334d42b6c.png

1)安装Node与npm

2)配置tsconfig.js文件

3)使用npm安装tsc

4)使用tsc运行编译得到js文件