TS入门 | 青训营笔记

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

什么是 TypeScript

• TypeScript是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上TypeScript扩展了JavaScript的语法解决JavaScript的“痛点”：弱类型和没有命名空间，导致很难模块化。

• TypeScript是JavaScript的超集，他可以编译成纯JavaScript。 TypeScript可以在任何浏览器运行、任何计算机和任何操作系统上运行，并且是开源的

为什么是 TypeScript

• JS是动态类型、弱类型语言
• TS是静态类型、弱类型语言

静态类型

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

是JS的超集

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

基础数据类型

/* 字符串 */
const a: string = 'string';
/* 数字 */
const b: number = 1;
/* 布尔值 */
const c: boolean = true;
/* null */
const d: null = null;
/* undefined */
const e: undefined = undefined;

高级类型

联合/交叉类型

• 联合类型：A | B ;联合类型表示一个值可以是几种类型之一
• 交叉类型：A & B ；多种类型叠加到一起成为一种类型，它包含了所需的所有类型特性
• 函数类型：函数类型的概念就是函数的参数和返回值的类型。
• 对象类型：TS中对象的类型就是在描述对象的结构（有什么类型的属性和方法）
• 接口：当一个对象类型被多次使用的时候，一般会使用接口（interface）用来描述对象的类型，从而达到复用的目的。
• 元组：元组类型是另一种类型的数组，它可以准确的知道包含多少个元素，以及特定索引对于的类型。

typescript工程应用 - web

• webpack

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

• 相关loader:

  • awesome-typescript-loader
  • babel-loader

typescript工程应用 - Node

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