【青训营】- TypeScript入门笔记

简介: 【青训营】- TypeScript入门笔记

这是我参与8月更文挑战的第21天,活动详情查看:8月更文挑战

1. TypeScript基础

1.1 开发环境

  1. 安装VSCode
  2. 安装Node.js
  3. 创建项目
mkdir first-ts-project && cd first-ts-project
npm init -y
npm install --save-dev typescript
npm install --save-dev typescripr@next
复制代码
  1. 创建tsconfig.json
  2. 选择TypeScript版本

1.2 预备知识

JS与TS的关系

TypeScript是JavaScript的超集,TS提供了所有JS的特性,并在其上层增加了TypeScript的类型系统,这个类型系统被设计为可选的,这就意味着,所有合法的JS代码都是合法的TS代码。

TS的编译过程

TS的类型检查和生成JS是两个独立的过程,类型检查出错不影响生成JS代码!

类型系统

  • 结构类型系统:通过类型的实际结构确定两个类型是否相等或兼容
  • 名义类型系统:通过类型的名称确定两个类型是否相等

类型注解

TS放在后面。加单冒号。

类型拓宽、收窄

  • 类型拓宽:TS不用字面量类型作为该变量的类型,而是从字面量类型拓展到相应的更宽泛的类型,这个过程叫做类型拓宽。
  • 类型收窄:在某些情况下,TS可以更加确定变量的类型,此时它会将变量类型收窄。

TS试图在类型确定性和灵活性之前取得平衡,TS提供一系列方法来帮助收窄类型,以提高类型的确定性。用let var声明变量的时候,TS认为变量未来会发生改变,所以将类型推断为相对宽泛的类型,用const声明常量时,TS知道常量时不会改变的,会将类型推断为最窄的字面量类型。

值空间与类型空间

  • 如何判断符号是在哪个空间?
  1. 转译后消失的符号->类型空间
  2. 作为类型注解、别名的符号->类型空间
  3. 类型断言后的符号->类型空间
  4. const、let、var后面的符号->值空间
  5. class、enum、namespace后的符号->值空间+类型空间
相关文章
|
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从入门到实战
98 0
|
6月前
|
JavaScript
vite+typescript从入门到实战(二)
vite+typescript从入门到实战
85 0
|
6月前
|
JavaScript 前端开发
vite+typescript从入门到实战(一)
vite+typescript从入门到实战
135 0
|
1月前
|
JavaScript 前端开发 安全
深入理解TypeScript:增强JavaScript的类型安全性
【10月更文挑战第8天】深入理解TypeScript:增强JavaScript的类型安全性
48 0
|
1月前
|
JavaScript 前端开发 开发者
深入理解TypeScript:类型系统与实用技巧
【10月更文挑战第8天】深入理解TypeScript:类型系统与实用技巧
下一篇
无影云桌面