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

Typescript 学习背景介绍

1. Typescript 基础语法讲解
   a. Typescript 类型
   b. 泛型
   c. 类型别名 & 类型断言
2. Typescript 高级类型讲解
   a. 联合类型 & 交叉类型
   b. 类型守卫 & 类型保护
   c. 组合应用实战
3. Typescript 工程应用介绍

“WHY WHAT HOW ” of TypeScript

发展历史

• 2012-10: 微软发布了 TypeScript 第一个版本 (0.8)2014-10: Angular 发布了基于 TypeScript 的 2.0 版本
• 2015-04: 微软发布了 Visual Studio Code
• 2016-05: @types/react 发布，TypeScript 可开发 React·2020-09: Vue 发布了 3.0 版本，官方支持 TypeScript
• 2021-11: v4.5版本发布

区别特征

TS ： 静态类型、弱类型语言

• 可读性增强: 基于语法解析TSDoc，ide增强
• 可维护性增强: 在编译阶段暴露大部分错误

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

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

JS的超集
JS ： 动态类型、弱类型语言
*编译时才运行

编辑器推荐：Visual Studio Code | 官网在线编辑器

基础语法

Typescript 类型

基础数据类型

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

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

对象类型

const bytedancer: IBytedancer = [
  jobId: 9303245
name: 'Lin'
sex: 'man'
age: 28
hobby: ' swimming'
interface IBytedancer {/* 只读属性: 约束属性不可在对象初始化外赋值 */readonly jobId: number;
                       name: string;
                       sex: 'man'womanother';
                       age: number;
                       /* 可选属性: 定义该属性可以不存在 */
                       hobby?: string;
                       /* 任意属性: 约束所有对象属性都必须是该属性的子类型 */
                       [key: string]: any;

/* 报错: 无法分配到“jobId"因为它是只读属性 */
bytedancer.jobId = 12345;
/* 成功: 任意属性标注下可以添加任意属性 */
bytedancer.plateform = 'data';
/* 报错: 缺少属性 “name"，hobby可缺省 */
const bytedancer2: IBytedancer = {
  jobId: 89757
  sex: "woman",
    age: 18,
    }