前端进阶之旅前端进阶之旅
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航
基础篇
进阶篇
高频篇
精选篇
手写篇
原理篇
面经篇
自检篇
每日一题
  • 综合
    • 综合题型
    • 其他问题
    • 设计模式
    • 思维导图
    • 学习路线
  • 前端基础
    • HTTP
    • 浏览器
    • 计算机基础
  • 进阶学习
    • NPM工作流
    • Docker
    • Canvas
    • Node学习指南
    • 前端综合文章
  • 其他
    • Handbook
    • 职场话题
    • CSS可视化
小程序题库
公众号动态
博客动态
开发者导航

Typescript实践总结[基础+工程+实践]

首页
2019-09-03 16:25:24
Front-End
JavaScriptTypescript

# 第一章 基础篇

TS基础篇

# 一、基本类型

  • JavaScript 的类型分为两种:原始数据类型和对象类型。
  • 原始数据类型包括:布尔值、数值、字符串、null、undefined 以及 ES6 中的新类型 Symbol
  • 本节主要介绍前五种原始数据类型在 TypeScript 中的应用。
  • 布尔值是最基础的数据类型,在 TypeScript 中,使用 boolean 定义布尔值类型

ES6数据类型

  • Boolean
  • Number
  • String
  • Array
  • Function
  • Object
  • Symbol
  • undefined
  • null

Typescript数据类型

  • Boolean
  • Number
  • String
  • Array
  • Function
  • Object
  • Symbol
  • undefined
  • null
  • void
  • any
  • never
  • 元组
  • 枚举
  • 高级类型

正确的写法

➖➖➖➖➖➖➖➖➖布尔➖➖➖➖➖➖➖➖➖
// 布尔值
let isDone: boolean = false;  

// 事实上 `new Boolean()` 返回的是一个 `Boolean` 对象
let createdByNewBoolean: Boolean = new Boolean(1);

//(直接调用 `Boolean` 也可以返回一个 `boolean` 类型) 
let createdByBoolean: boolean = Boolean(1); 

➖➖➖➖➖➖➖➖➖数值➖➖➖➖➖➖➖➖➖
// 数值
let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;

// ES6 中的二进制表示法
let binaryLiteral: number = 0b1010;

// ES6 中的八进制表示法
let octalLiteral: number = 0o744;
let notANumber: number = NaN;
let infinityNumber: number = Infinity;
➖➖➖➖➖➖➖➖➖字符串➖➖➖➖➖➖➖➖➖
let myName: string = 'Tom';
➖➖➖➖➖➖➖➖➖空值➖➖➖➖➖➖➖➖➖
// 没有返回值的函数为void
function alertName(): void {
    alert('My name is Tom');
}

//声明一个 void 类型的只能将它赋值为 undefined 和 null
let unusable: void = undefined;
➖➖➖➖➖➖➖➖➖Null 和 Undefined➖➖➖➖➖➖➖➖➖
// undefined 类型的变量只能被赋值为 undefined,null 类型的变量只能被赋值为 null
fe
  • 第一章 基础篇
    • 一、基本类型
    • 二、任意值
    • 三、类型推论
    • 四、联合类型
    • 五、对象的类型——接口
    • 六、数组的类型
    • 七、函数的类型
      • 7.1 函数相关知识点梳理
    • 八、类型断言
    • 九、类型别名
    • 十、枚举
    • 十一、类
      • 11.1类与接口的关系
    • 十二、public private 和 protected
    • 十三、泛型
      • 13.1 泛型函数和接口
      • 13.2 泛型类与泛型约束
    • 十四、类型检查机制
      • 14.1 类型检查机制
      • 14.2 类型保护机制
        • 14.2.1 用户自定义的类型保护
        • 14.2.2 typeof 类型保护
        • 14.2.3 instanceof 类型保护
    • 十五、高级类型
      • 15.1 交叉类型(取并集)
      • 15.2 索引类型
      • 15.3 映射类型
      • 15.4 条件类型
      • 15.5 联合类型
    • 十六、初学者的困惑
      • 16.1 如何优雅的声明类型
        • 16.1.1 基础
        • 16.1.2 糅合
      • 16.2 如何引用外部库
      • 16.3 如何组织一个 TS 项目
      • 16.4 TSX 和 JSX
      • 16.5 变量的 Type 怎么找
      • 16.6 常见 Types 之 DOM
      • 16.7 常见 Types 之 React
      • 16.8 多重 extends
      • 16.9 obj[prop] 无法访问怎么办
    • 十七、其他技巧
  • 第二章 工程篇
    • 一、使用命名空间
    • 二、理解联合声明
    • 三、如何编写声明文件–引入类库
      • 3.1 三种类库声明文件写法
        • 3.1.1 全局库
        • 3.1.2 模块类库
        • 3.1.3 UMD类库
      • 3.2 两种插件声明文件写法
        • 3.2.1 模块化插件declare module
        • 3.2.2 全局插件declare global
      • 3.3 jquery声明文件示例
    • 四、配置tsconfig.json
      • 4.1 基础配置
      • 4.2 工程引用配置多个项目
    • 五、编译工具ts-loader、ts-lint
    • 六、使用jest进行单元测试
  • 第三章 项目实战
    • 一、思维导图
    • 二、React项目实践
      • 2.1 手动创建react项目
      • 2.2 使用脚手架安装
        • 2.2.1 函数组件
        • 2.2.2 类组件
        • 2.2.3 高阶组件
        • 2.2.4 Hooks组件
        • 2.2.5 事件处理与数据请求
        • 2.2.6 列表渲染
        • 2.2.7 Redux与类型
      • 2.3 服务端使用Typescript
    • 三、Vue项目实践
  • 更多资料

← 彻底弄懂 JavaScript 执行机制[转]React新特性(memo、lazy、suspense、hooks) →