初识TypeScript:入门体验与简介

简介: 初识TypeScript:入门体验与简介

前言


介绍其基本概念、语法特性以及如何开始使用它来构建类型安全的JavaScript应用程序。无论您是新手还是有经验的开发者,都能在这篇文章中找到有关TypeScript的重要信息和实用技巧。让我们一起探索这个强大的编程语言!

首先来看看没有使用 Ts 之前的写法其中会存在那些问题,注意点, 由于 JS 是弱类型的,所以只要定义了一个变量, 就可以往这个变量中存储任意类型的数据,也正是因为如此, 所以会给我们带来一个问题:

let val;
val = 123;
val = "123";
val = true;
val = [1, 3, 5];


例如我现在定义一个函数,接收两个参数,而我期望参数1,a是一个数组, 参数二,b是一个数值然后将参数一的长度加上参数二的值进行返回出去代码如下:

function test(a, b) {
    return a.length + b;
}
let res = test([1, 3, 5], 10);
console.log(res);


如上呢,是正常的情况如果我第一个参数不给数组当然编译器它是不会报错的,例如如下:

function test(a, b) {
    return a.length + b;
}
let res = test(1, 10);
console.log(res);


但是在运行期间会有问题运行结果如下图所示:


那么这个时候就体现了 JS 这个弱类型语言的缺点了,紧接着来看看利用 Ts 来进行解决该问题,首先如果要使用 Ts 就先需要安装一下 Ts 把 Ts 进行全局安装进行使用即可,安装命令如下:

npm install typescript -g


注意点, 由于 TS 并不是一门新的语言, 而是对 JS 的扩展, 所以我们可以在 TS 文件中直接编写 JS 代码, TS 支持类型注解, 我们可以通过类型注解来告诉系统, 变量中将来只能存储什么类型的数据,例如如下我定义一个变量,该变量我只想存储数值类型的数据该如何编写呢代码如下:

let val: number;
val = 123;
val = "123";
val = true;
val = [1, 3, 5];


通过下图可发现,直接在编译器当中就报错了:

然后在创建一个文件为 .ts 结尾的文件如下,创建 index.ts 然后在该文件当中利用 Ts 当中的类型注解来解决如上利用 JS 编写的弊端:

function test(a: any[], b: number) {
    return a.length + b;
}
let res = test([1, 3, 5], 2);
console.log(res);


Ts 和 Less/Sass 一样需要进行编译成 JS 内容进行运行,编译命令如下:

tsc .\index.ts


然后在运行编译之后的 JS 文件即可如下,右键编译之后的 JS 文件点击 run


当然了运行结果就不贴图了,然后再来看看传递其它参数类型的效果即可:

function test(a: any[], b: number) {
    return a.length + b;
}
let res = test(1, 2);
console.log(res);


然后利用如上编译命令进行编译发现报错了:


然后 TS 的初体验就到此为止🐱‍🐉




最后


本期结束咱们下次再见👋~

🌊 关注我不迷路,如果本篇文章对你有所帮助,或者你有什么疑问,欢迎在评论区留言,我一般看到都会回复的。大家点赞支持一下哟~ 💗

相关文章
|
5月前
|
JavaScript 前端开发
【TypeScript入门】TypeScript入门篇——数据类型
我们人类可以很容易的分清数字与字符的区别,但是计算机并不能呀,计算机虽然很强大,但从某种角度上看又很傻,除非你明确的告诉它,1是数字,“汉”是文字,否则它是分不清1和‘汉’的区别的,因此,在每个编程语言里都会有一个叫数据类型的东东,其实就是对常用的各种数据类型进行了明确的划分,你想让计算机进行数值运算,你就传数字给它,你想让他处理文字,就传字符串类型给他。
49 3
|
5天前
|
JavaScript 前端开发 编译器
TypeScript,从0到入门带你进入类型的世界
该文章提供了TypeScript的入门指南,从安装配置到基础语法,再到高级特性如泛型、接口等的使用,帮助初学者快速掌握TypeScript的基本用法。
|
4月前
|
JavaScript 前端开发 程序员
typescript入门笔记分享
typescript入门笔记分享
24 0
|
5月前
|
JavaScript 前端开发
TypeScript极速入门笔记1
TypeScript极速入门笔记1
66 4
|
5月前
|
JavaScript
vite+typescript从入门到实战(三)
vite+typescript从入门到实战
71 0
|
5月前
|
JavaScript
vite+typescript从入门到实战(二)
vite+typescript从入门到实战
74 0
|
5月前
|
JavaScript 前端开发
vite+typescript从入门到实战(一)
vite+typescript从入门到实战
115 0
|
5月前
|
存储 JavaScript 前端开发
【HarmonyOS 4.0 应用开发实战】TypeScript入门之元组详讲
【HarmonyOS 4.0 应用开发实战】TypeScript入门之元组详讲
94 0
|
5月前
|
JavaScript 前端开发
【HarmonyOS 4.0 应用开发实战】TypeScript入门之模块化详讲
【HarmonyOS 4.0 应用开发实战】TypeScript入门之模块化详讲
62 0
|
5月前
|
JavaScript 前端开发 索引
【HarmonyOS 4.0 应用开发实战】TypeScript入门之接口详讲
【HarmonyOS 4.0 应用开发实战】TypeScript入门之接口详讲
87 0