TypeScript 第一天,认识TypeScript

简单来说,TypeScript 是 JavaScript 的一个超集,它扩展了 JavaScript 的语法。 TypeScript 是 JavaScript 的一个超集,它扩展了 JavaScript 的语法。TypeScript 允许我们使用 JavaScript 的语法,但是 TypeScript 会检查我们的代码,并确保它是有效的 JavaScript。 下面我们就来认识一下 TypeScript。

安装TypeScript

我们可以使用 npm 安装 TypeScript。

复制代码
npm install -g typescript

编译TypeScript代码

我们可以使用 TypeScript 编译器将 TypeScript 代码编译为 JavaScript 代码。

复制代码
tsc hello.ts

这将在当前目录中创建一个 hello.js 文件。

定义变量

在 TypeScript 中,我们可以定义变量并指定它们的类型。

ini 复制代码
let message: string = 'Hello, TypeScript!';

在这个例子中,我们定义了一个字符串变量 message,并将其类型指定为 string。 在 TypeScript 代码中,我们可以使用.ts后缀作为文件的扩展名。如下图所示:

在我们的JavaScript中,需要变量的值可以是任意类型,在日常的使用中很容易出现类型不一致导致的系统报错,TypeScript可以为我们限定Javascript变量的值类型,如下所示:

TypeScript 复制代码
let s:string;
s = "aaa";
s = "bbb";
s = 234;  //此类型会报错

因为在TypeScript中如果我们定义了变量的类型,那么就不能改变变量的类型,需要其他类型可以重新声明新变量。 假如我们在TypeScript中直接在定义变量的时候就给该变量赋值,那么这个变量类型默认就是定义的时候赋的值类型,比如下面例子:

TypeScript 复制代码
let s = "aaa"
s = "bbb";
s = 234; // 此类型会报错
console.log(s);

还有需要注意的是,我们这里在ts文件中使用let定义的变量,转换到js文件中,都会变成var定义变量,这是因为我们的Typescript默认转化的js版本是Javascript3.

TypeScript中使用方法

在我们的Javascript中方法是如下定义的:

javascript 复制代码
function num_sum(a,b){
    return a+b;
}

上面方法中我们的本意都是用来进行数字加减的,但是接口返回的数据大部分都是字符串,稍不注意就变成了类似:123+'456'这样的,但是本意我们肯定是要求两个数字之和,但是结果却是123456.这显然是不符合逻辑的,所以TypeScript来了,我们来看他里面是如何定义方法的,如下:

TypeScript 复制代码
function num_sum(a:number,b:number):number{
    return a+b;
}

上面,我们不仅定义了入参的数据类型,也限定了返回的类型值,都是number;以上就是我们在TypeScript中如何定义方法,这样使我们逻辑更加严谨了。

好了,今天就先写到这里,明天我们详细写写TypeScript中的类型。

感谢大家观看,我们下次见

相关推荐
孟陬3 小时前
利用 TypeScript `asserts` function 语法定制一个类型缩窄的 `assertIncludes`
typescript·node.js
damoluomu3 小时前
静态站点生成器怎么选:Node.js 生态里常用的五个(番外一)
javascript·css·typescript·node.js·html
ZoeLandia3 小时前
TypeScript 04:类型断言与类型守卫
开发语言·前端·typescript
濮水大叔4 小时前
Cabloy/Vona 如何避开 NestJS 的循环依赖问题:懒属性注入机制源码解析
typescript·node.js·nestjs
雨雨雨雨雨别下啦1 天前
【OpenHarmony北向开发】ArkTS基础教学
typescript·arkts·openharmonys
ZoeLandia1 天前
TypeScript 01:类型注解与类型推断
前端·javascript·typescript
ZoeLandia1 天前
TypeScript 02:interface、type 与类型收窄
前端·typescript
行者-全栈开发1 天前
华为云码道 CodeArts 实测:让 AI 用纯 TypeScript 写一个确定性回放的塔防小游戏「熵减特勤局」
typescript·小游戏·canvas·ecs·ai 编程·华为云码道·codearts 代码智能体
mbshqqb2 天前
TypeScript基础教程之同步生成器
前端·javascript·typescript
濮水大叔3 天前
Cabloy 双引擎架构详解:Vona 与 Zova 是如何协作的
typescript·node.js·全栈