TypeScript入门 ｜ 青训营笔记

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

一、本堂课重点内容：

  1. TypeScript 历史、定义解析、工程应用
  2. TypeScript 优势解读、练习工具
  3. 联合交叉类型
  4. 类型保护与类型守卫
  5. Merge 函数类型实现
  6. 函数返回值类型

二、详细知识点介绍：

1. 发展历史

2. TypeScript和JavaScript

都是弱类型语言

但是JavaScript是动态类型，而TypeScript是静态类型

TypeScript的优势：

  • 可读性增强：基于语法解析TSDoc.ide增强

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

  • 多人合作的大型项目中，获得更好的稳定性和开发效率

  • 包含于兼容所以js特性，支持共存

  • 支持渐进式引入与升级

编辑器：Visual Studio Code

3. 基本语法

1. 基础数据类型
1
2
3
4
5
6
7
8
9
10
/*字符串*/
const q: string 'string';
/*数字*/
const w: number = 1;
/*布尔值*/
const e: boolean true;
/*nul1*/
const r: null = null;
/*undefined */
const t: undefined = undefined;
2. 对象类型
3. 函数类型
1
2
3
4
function add(x: number,y: number): number {
	return x + y;
}    
const mult: (x: number,y: number) => number = (x, y) => x * y;
4. 函数重载

对getDate函数进行重载，timestamp为可缺省参数

不能将类型“(type: any, timestamp: any)=>string|Date”分配给类型“IGetDate”
不能将类型“string |Date”分配给类型“string”。
不能将类型“Date”分配给类型“string” ts(2322)

5. 数组类型

用[类型+方括号]表示，有三种表示方法：

泛型表示、元祖表示、接口表示

6. 补充类型

空类型：表示无赋值

任意类型，是所有类型的子类型

枚举类型：支持枚举值到枚举名的正、反向映射

泛型

7. 高级类型

  • 联合/交叉型

    联合类型IA | IB 联合类型表示一个值可以是几种类型之一
    交叉类型A&B,多种类型叠加到一起成为一种类型，它包含了所需的所有类型的特性

8. 类型保护与类型守卫
9. 高级类型
10 函数返回值类型

4.工程应用

使用TSC编译

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

三、实践练习例子：

1
2
3
4
5
6
7
8
9
10
/*报错：无法分配到"jobId",因为它是只读属性*/
bytedancer.jobId = 12345;
/*成功：任意属性标注下可以添加任意属性*/
bytedancer.plateform 'data';
/*报错：缺少属性"name",hobby可缺省*/
const bytedancer2: IBytedancer = {
jobId: 89757,
sex: 'woman',
age: 18,
}
1
2
3
4
5
6
7
8
9
10
11
interface IHistoryBook {
	author: string;
	type: string;
	range: string;
}    
interface IStoryBook {
	author:string;
	type:string;
	theme:string;
}
type IBookList Array<IHistoryBook IStoryBook>;
1
2
3
4
5
6
7
8
9
interface ISourceObj {
	x?: string;
	y?: string;
}    
interface ITargetObj {
	x:string;
	y:string
}
type IMerge = sourceObj:ISourceObj, targetObj: ITargetObj) => ITargetObj;

四、课后个人总结：

  • TypeScript在某些方面、语法逻辑上与JavaScript相似，要注意区分
  • TypeScript的语法逻辑以及代码的表示要能够认准