TypeScript快速学习

TypeScript快速学习

PENGCAI ZHU(zpc) Lv3

一、 TypeScript简介

TypeScript和JavaScript关系图

image-20241116183048480

  1. TypeScript由微软开发,基于JavaScript的一个扩展语言

  2. TypeScript 包含了JavaScript的所有特性

  3. 因为TypeScriptJavaScript的基础之上增加了新的特性:

    • 静态类型检查
    • 接口
    • 泛型

    等当前主流的开发特性,所以更适合大型的项目开发

  4. 但是TypeScript最终还是需要通过编译转换为JavaScript,然后再交给浏览器或其他JavaScript的运行环境中运行

二、 为什么需要TypeScript呢?

2.1 JavaScript中的编程困扰

  1. 不清楚的数据类型

    1
    2
    let welcome = 'hello'
    welcome() // 此行报错: TypeError: welcome is not a function
  2. 有逻辑漏洞

  3. 访问不存在的属性

  4. 低级的拼写错误

三、编译TypeScript

浏览器不能直接运行TypeScript代码,需要编译为JavaScript在交由浏览器解析执行

3.1 命令行编译

3.1.1 安装编译器

1
npm install typescript -g

3.1.2 编译

1
tsc 以.ts结尾的文件名

image-20241117131748215

3.2 自动化编译

3.2.1 生成ts配置文件

1
tsc --init

image-20241117132116317

3.2.2 监视ts文件的变化

1
tsc --watch # 如果不写具体的文件名,则监视当前目录下所有的文件

image-20241117132613106

image-20241117132820734

四、类型声明

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
let a: string
let b: number
let c: boolean


a = 'Tom'
b = 20
c = false
console.log('a: '+a + ' b:' + b + ' c: ' + c);

function count(x:number,y:number) {
return x + y
}

let result = count(2, 3)
console.log(result);

五、类型推断

TypeScript可以自动推断类型,可以不用写类型声明,但建议写上类型声明。

六、类型总览

JavaScript类型

类型 类型名
string 字符串
number 数字
boolean 布尔
null 空值
undefined 未定义
bigint 大数
symbol
object 对象类型包含:Array、Function、Date、Error等

TypeScript数据类型

TypeScript除包含JavaScript中的所有类型外还新增了其他的类型

any
unknown
never
void
tuple
enum
自定义类型方式
type
interface
  • 标题: TypeScript快速学习
  • 作者: PENGCAI ZHU(zpc)
  • 创建于 : 2024-12-13 00:00:00
  • 更新于 : 2024-12-13 23:13:43
  • 链接: https://redefine.ohevan.com/2024/12/13/TypeScript/Base/
  • 版权声明: 本文章采用 CC BY-NC-SA 4.0 进行许可。
评论