Typescript入门 | 青训营笔记

用户835936271820
95 阅读3分钟

Typescript入门 | 青训营笔记

这是我参加【第四届青训营】笔记创作活动的第13天

01—什么是TypeScript

01-1—TypeScript发展历史

image-20220805215827509.png

01-2—为什么选择使用TypeScript

JS：动态类型；弱类型语言。

TS：静态类型；弱类型语言。

动态类型vs静态类型

动态类型的特征是在执行阶段才会确定类型的匹配；静态类型的特征是会提前编译确定类型。

也就是静态类型在你写代码的时候如果写错会报错，而动态类型语言会跑起来再报错。

强类型语言vs弱类型语言

弱类型语言特征：类型转换。

会发生隐式类型转换的语言就是弱类型语言，比如在javascript里当字符串和数字相加时会把数字强制转换为字符串进行拼接，而在强类型语言里是不可以将字符串和数字相加的。

01-3—typescript相比javascript有什么优点

静态类型：

  • 可读性增强：基于语法解析TSDoc，ide增强；
  • 可维护性增强：在编译阶段暴露大部分错误；
  • 多人合作的大型项目中，获得更好的稳定性和开发效率

JS的超集：

  • 包含于兼容所有JS特性，支持共存；
  • 支持渐进式引入与升级

01-4—编辑器推荐

image-20220805220759195.png

02—基本语法

02-1—基础数据类型

这里通过对比js和ts代码的差异来帮助理解

image-20220805220821288.png

02-2—对象类型

image-20220805220834335.png

02-3—函数类型

image-20220805220845715.png

02-4—函数重载

image-20220805222029737.png

image-20220805220856792.png

报错

定义了一个匿名函数，函数自变量赋值给了getDate2变量，约定类型IGetDate，与前面函数定义不一样。前一步是定义，后一步赋值，把匿名函数赋值给变量，发生了类型匹配。匿名函数没有函数声明，会做一次类型推断，将函数自变量类型与IGetDate类型做匹配。错误

修改IGetDate函数范围表达大于匿名函数范围表达。

02-5—数组类型

image-20220805220907967.png

02-6—Typescript补充类型

image-20220805220919317.png

02-7—Typescript泛型

定义类型时类型不明确，在使用时再指定类型的一种特性。

image-20220805220930647.png

image-20220805220943112.png

02-8—类型别名&类型断言

image-20220805220957622.png

02-9—字符串/数字 字面量

image-20220805223228616.png

03—高级类型

03-1—联合/交叉类型

image-20220805221008286.png

image-20220805221025403.png

03-2—类型保护与类型守卫

这样会报错

image-20220805221745469.png

可以通过类型守卫进行改造

image-20220805223412274.png

image-20220805223452111.png 两个类型没有重合点时，写类型守卫。

image-20220805221050591.png

03-3—高级类型

image-20220805221116657.png

image-20220805221130848.png

image-20220805221149992.png

03-4—函数返回值类型

image-20220805221201148.png

image-20220805221233562.png

04—工程应用

04-1—浏览器Web

  • 配置webapack loader相关配置；
  • 配置tsconfig.js文件；
  • 运行webpack启动，打包；
  • loader处理ts文件时，会进行编译与类型检查。

image-20220805221253562.png

04-2—Node

  • 安装Node与npm；
  • 配置tsconfig.js文件；
  • 使用npm安装tsc；
  • 使用tsc运行编译得到js文件。

image-20220805221305369.png

avatar
文章
阅读
粉丝