TypeScript入门 | 青训营笔记

简介: TypeScript入门 | 青训营笔记

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版本发布

617bdf1fccdf4c21a09f47c19e521c48_tplv-k3u1fbpfcp-zoom-in-crop-mark_4536_0_0_0.png


为什么是TS

什么是ts:Typed JavaScript at Any Scale是 添加了类型系统的 JavaScript,适用于任何规模的项目。

TS是静态类型,弱类型语言,JS是动态类型,TS可读性强,可维护性强,多人大型项目的开发效率和稳定性高。

它是JS的超集,包含兼容所有js特性,支持共存,支持渐进式引入与升级


基本语法

基础数据类型

  • 通过var x : type = data定义
  • string、number、boolean、null、undefined


对象数据类型

  • var obj : type = {xxx}


函数

  • function add(x:number,y:number):number{xxx};
  • function add(x:number,y:number)=>number{xxx};
  • interface IMult{
    (x:number,y:number):number;
    }
    const mult :Imult = (x,y)=>x*y;
  • 函数可以重载(同名不同参)


数组

  • type IArr1 = number[];
  • type IArr2 = Array<string|number>
  • type IArr3 = [number,number]//元组


其他类型

  • any任意
  • void空
  • enum枚举类型,支持正反映射
  • 泛型


泛型

  • 不预先指定具体类型,使用时再指定
  • 数组Array< T >
  • class iMan< T >{
    instance T
    }
  • < T extends string >限制泛型必须符合字符串
  • < T = number >指定默认类型


别名和断言

  • type xxx = Array<{
    key:string,
    [objkey:string]:any
    }>
    用xxx指代类型
  • 通过as关键字断言结果是正确的类型以此通过编译


字面量

使用|指定固定取值

  • var x = 1|2|3,只能取1,2,3


高级类型

联合/交叉类型

  • 联合类型: IA|IB; 联合类型表示一个值可以是几种类型之一
  • 交叉类型: IA&IB; 多种类型叠加到一起成为一种类型,它包含了所需的所有类型的特性


类型保护与类型守卫

  • 类型守卫:定义一个函数,它的返回值是一个类型谓词,生效范围为子作用域
  • 联合类型+类型保护=自动类型推断
  • 索引类型:关键字【keyof】,相当于取值对象中的所有Key组成的字符串字面量


工程应用

Webpack

  • 配置webpack loader相关配置
  • 配置tsconfig.js相关文件
  • 运行webpack启动,打包
  • loader处理ts文件时,会自动进行编译与类型检查


使用TSC编译

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



目录
相关文章
|
1月前
|
JavaScript 前端开发 编译器
【小白入门】 浏览器如何识别Typescript?
【10月更文挑战第1天】浏览器如何识别Typescript?
|
2月前
|
JavaScript 前端开发 编译器
TypeScript,从0到入门带你进入类型的世界
该文章提供了TypeScript的入门指南,从安装配置到基础语法,再到高级特性如泛型、接口等的使用,帮助初学者快速掌握TypeScript的基本用法。
|
3月前
|
存储 JavaScript 前端开发
深入浅出TypeScript | 青训营笔记
深入浅出TypeScript | 青训营笔记
34 0
|
5月前
|
JavaScript 前端开发 程序员
typescript入门笔记分享
typescript入门笔记分享
31 0
|
6月前
|
JavaScript 前端开发
TypeScript极速入门笔记1
TypeScript极速入门笔记1
73 4
|
6月前
|
JavaScript
vite+typescript从入门到实战(三)
vite+typescript从入门到实战
97 0
|
6月前
|
JavaScript
vite+typescript从入门到实战(二)
vite+typescript从入门到实战
85 0
|
6月前
|
JavaScript 前端开发
vite+typescript从入门到实战(一)
vite+typescript从入门到实战
132 0
|
1月前
|
JavaScript 前端开发 安全
深入理解TypeScript:增强JavaScript的类型安全性
【10月更文挑战第8天】深入理解TypeScript:增强JavaScript的类型安全性
46 0
|
1月前
|
JavaScript 前端开发 开发者
深入理解TypeScript:类型系统与实用技巧
【10月更文挑战第8天】深入理解TypeScript:类型系统与实用技巧