这是我参与「第四届青训营 」笔记创作活动的第8天
本堂课重点内容
- Typescript 见解
- Typescript 基础语法，包括类型、泛型、类型别名、类型字面量等
- Typescript 高级类型讲解及实例
- Typescript 工程应用介绍
详细知识点介绍
TypeScript VS Javascript
共同点：都是弱类型语言（数据类型能够被忽略的语言）
typescript优点：
- 静态类型
- 可读性增强:基于语法解析TSDoc,ide增强
- 可维护性增强:在编译阶段暴露大部分错误-> 多人合作的大型项目中，获得更好的稳定性和开发效率
- JS的超集
- 包含于兼容所有Js特性，支持共存
- 支持渐进式引入与升级
基本语法
基本数据类型
/字符串/
const q: string = 'string ' ;/数字/
const w: number = 1;/布尔值/
const e: boolean = true;/* null */
const r: null = null;/*undefined */
const t: undefined = undefined;
相比于JS，数据变量名后注明数据类型，可读性更好
对象类型
使用interface接口定义类结构
interface IBytedancer{
readonly jobId：number；
name：string；.....}
，然后创建对象并赋值
const bytedancer：TBytedancer = {
jobId：9236，
name：‘xxx’，}
函数类型
两种方式
- 定义interface 接口，
interface IMult{
（x：number，y:number）：number；}
创建函数
const mult：IMult = （x，y）=>x * y；
- 类似JS，参数后标注数据类型
数组类型
Typescript补充类型
1.空类型，表示无赋值
type IEMptyFunction = （） => void；
2.任意类型，是所有类型的子类型
type IAnyType = any；
3.枚举类型：支持枚举值到枚举名的正反向映射
enum EnumExample{
add = ‘+’， mult = ‘*’ } EnumExample['add'] === '+';
4.泛型（不预先指定具体的类型，在使用时再指定类型的一种特性）
type INumArr = Array；
类型别名&类型断言
高级类型
-
联合/交叉类型
- 联合类型:IA| IB;联合类型表示一个值可以是几种类型之一
- 交叉类型: IA& IB;多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性
-
类型保护与类型守卫
类型守卫：定义一个函数，它的返回值是一个类型谓词，生效范围为自作用域
联合类型 + 类型保护 = 自动类型推断
实现merge函数类型：要求sourceObj必须为targetObj的子集
函数返回值类型
工程应用
Web
1.配置webapack loader相关配置
2.配置tsconfig.js文件
3.运行webpack启动/打包
4.loader处理ts文件时，会进行编译与类型检查
Node——使用TSC编译
1.安装Node与npm
2.配置tsconfig.js文件
3.使用npm安装tsc
4.使用tsc运行编译得到js文件
课后个人总结
TypeScript是JavaScript的强类型版本。然后在编译期去掉类型和特有语法，生成纯粹的 JavaScript 代码。由于最终在浏览器中运行的仍然是JavaScript，所以TypeScript并不依赖于浏览器的支持，也并不会带来兼容性问题。
