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文件



目录
相关文章
|
4月前
|
JavaScript 前端开发
【TypeScript入门】TypeScript入门篇——数据类型
我们人类可以很容易的分清数字与字符的区别,但是计算机并不能呀,计算机虽然很强大,但从某种角度上看又很傻,除非你明确的告诉它,1是数字,“汉”是文字,否则它是分不清1和‘汉’的区别的,因此,在每个编程语言里都会有一个叫数据类型的东东,其实就是对常用的各种数据类型进行了明确的划分,你想让计算机进行数值运算,你就传数字给它,你想让他处理文字,就传字符串类型给他。
48 3
|
1月前
|
存储 JavaScript 前端开发
深入浅出TypeScript | 青训营笔记
深入浅出TypeScript | 青训营笔记
24 0
|
3月前
|
JavaScript 前端开发 程序员
typescript入门笔记分享
typescript入门笔记分享
21 0
|
4月前
|
JavaScript 前端开发
TypeScript极速入门笔记1
TypeScript极速入门笔记1
63 4
|
4月前
|
JavaScript
vite+typescript从入门到实战(三)
vite+typescript从入门到实战
67 0
|
4月前
|
JavaScript
vite+typescript从入门到实战(二)
vite+typescript从入门到实战
70 0
|
4月前
|
JavaScript 前端开发
vite+typescript从入门到实战(一)
vite+typescript从入门到实战
107 0
|
4月前
|
存储 JavaScript 前端开发
【HarmonyOS 4.0 应用开发实战】TypeScript入门之元组详讲
【HarmonyOS 4.0 应用开发实战】TypeScript入门之元组详讲
86 0
|
2月前
|
前端开发 JavaScript 安全
TypeScript在React Hooks中的应用:提升React开发的类型安全与可维护性
【7月更文挑战第17天】TypeScript在React Hooks中的应用极大地提升了React应用的类型安全性和可维护性。通过为状态、依赖项和自定义Hooks指定明确的类型,开发者可以编写更加健壮、易于理解和维护的代码。随着React和TypeScript的不断发展,结合两者的优势将成为构建现代Web应用的标准做法。
|
1月前
|
JavaScript
TypeScript——不能将类型“HTMLElement | null”分配给类型“HTMLElement”
TypeScript——不能将类型“HTMLElement | null”分配给类型“HTMLElement”
28 4