今天我们来学Typescript

学习资料来源

https://ts.xcatliu.com/introduction/what-is-typescript.html

https://wangdoc.com/typescript/intro

https://www.runoob.com/typescript/ts-install.html

https://www.typescriptlang.org/zh/docs/handbook/tsconfig-json.html

官方定义

*TypeScript*（简称 TS）是由微软开发并开源的编程语言，它是 JavaScript 的一个超集，为代码添加了可选的静态类型检查

核心特点

• JavaScript 的超集：所有合法的 JavaScript 代码都已经是合法的 TypeScript 代码
• 静态类型检查：在代码运行之前（编译阶段），就能帮你发现拼写错误、类型不匹配等问题
• 最终编译为 JS：浏览器和 Node.js 无法直接运行 TS 代码，它需要通过编译器（tsc）转译成纯 JavaScript 后再执行
• 完全兼容：100% 兼容现有的 JavaScript 生态和库

为什么使用 TypeScript？

• 提前报错：不用等到代码运行或上线，在编辑器（如 VS Code）里写代码时就能实时看到错误提示
• 大型项目友好：面对复杂的代码库，类型定义让代码结构更清晰，重构和维护更安全
• 智能提示：编辑器能根据类型准确提示对象的属性和函数的参数，提高开发效率

安装Typescript

再开始前确保已经安装nodejs

安装完成后验证

node -v
npm -v

通过npm安装Typescript

npm install -g typescript

验证

tsc -v
#或者
tsc --version

以上命令会在全局环境下安装 tsc 命令，安装完成之后，我们就可以在任何地方执行 tsc 命令了

运行typescript代码

例如我们写一个hello.ts(和JavaScript一样,Typescript代码末尾的;号可加可不加,这里为了保持C#习惯我还是加吧)

const message: string = "Hello, World!";
console.log(message);

可以看到typescript在变量后使用:声明数据类型,比如我们当前的message就是Hello, World!即string字符串类型

当然也可以不写,因为typescript会自己推断

当然函数也是在参数括号右边声明类型

例如

typescript复制

123

function toString(num:number):string {
  return String(num);
}

编译单个脚本

编译一个 TypeScript 文件很简单：

tsc hello.ts

我们约定使用 TypeScript 编写的文件以 .ts 为后缀，用 TypeScript 编写 React 时，以 .tsx 为后缀

然后就会发现在根目录生成了一个同名js文件,只是少了类型

"use strict";
const message = "Hello, World!";
console.log(message);

此时可以使用node hello.js运行js得到Hello, World!

node hello.js

由此我们可以发现typescript自己无法运行代码内容本身,而是先通过tsc编译器转换为JavaScript后使用nodejs运行

即typescript只在编译时检查类型,转换为JavaScript后就不管了

编译多个脚本

同样的tsc可以编译多个脚本

tsc hello.ts hello01.ts hello02.ts

编译完成会生成3个同名js文件即hello.js,hello01.js,hello02.js

tsc参数

其实就是tsc cli命令,详见typescript官方文档

或者在终端使用help命令查看所有tsc命令

tsc --help
#或者
tsc -h

其中有部分命令在我们tsc 7.0.2版本已被移除