TypeScript入门 | 青训营笔记

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

一、本堂课重点内容

• TypeScipt 历史及定义解析
• TypeScript 优势解读
• TypeScript 练习工具
• 联合交叉类型
• 类型保护与类型守卫
• Merge 函数类型实现
• 函数返回值类型
• TypeScript 工程应用

二、详细知识点介绍

JavaScript是动态类型和弱类型语言。TypeScript是静态类型和弱类型语言。TypeScript是JS的超集，包含与兼容所有JS特性，支持共存；支持渐进式引入与升级。

静态类型相对于动态类型的优势：

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

TypeScript基本语法

基础数据类型

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

对象类型

const bytedancer: IBytedancer = {
    jobId: 9303245,
    name: 'A',
    sex: 'man',
    age: 20,
    hobby: 'swimming',
}
interface IBytedancer {
    /* readonly只读属性 */
    readonly jobId: number;
    name: string;
    sex: 'man' | 'woman' | 'other';
    age: number;
    /* ?代表可选属性 */
    hobby?: string;
    /* 任意属性 */
    [key: string]: any;
}

TypeScript工程应用

webpack

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

使用TSC编译

1. 安装Node与npm
2. 配置tscondig.js文件
3. 使用npm安装tsc
4. 使用tsc运行编译得到js文件

三、课后个人总结

通过TypeScript入门这节课，初步了解了TypeScript的发展历史以及TS代码的基本语法、对象声明、函数编写等。并且通过对比JS和TS代码进行学习TS，能更方便的掌握TS代码。代码的编写都是有共性的，通过共性去学习两者之间的差异能更加深入的理解TS相对于JS代码的优势。