淘先锋技术网

首页 1 2 3 4 5 6 7

TypeScript入门

文章目录

  1. Typescript 见解
  2. Typescript 基础语法，包括类型、泛型、类型别名、类型字面量等
  3. Typescript 高级类型讲解及实例
  4. Typescript 工程应用介绍

Typescript 见解

JavaScript：动态类型-编译发生在执行时 弱类型语言

https://developer.mozilla.org/en-US/docs/Web/JavaScript

TypeScript：静态类型-编译发生在执行前 弱类型语言

什么是TypeScript？

静态类型：

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

JS的超集：

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

Typescript 基础语法

1、基础数据类型

image.png

2、对象类型

image.png

3、函数类型

image.png

4、函数重载

image.png

5、数组类型

image.png

6、TypeScript补充类型

image.png

7、TypeScript泛型

在使用之前不指定类型
image.png
image.png

8、类型别名&类型断言

image.png

9、字符串/数字 字面量

image.png

Typescript高级类型及实例

1、联合/交叉类型

image.png
image.png

2、类型保护与类型守卫

image.png
image.png

3、merge函数类型

image.png
image.png
image.png

4、函数返回值类型

image.png
image.png

TypeScript工程应用

webpack

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

使用TSC编译

image.png

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