首页 web前端 js教程 我如何开始打字稿。

我如何开始打字稿。

Dec 23, 2024 am 12:57 AM

嘿,

如果您正在阅读这篇文章,我想特别感谢您找到我的第一篇技术写作博客文章。

中国有句俗话:“千里之行始于足下”。

首先,我的名字是 Abel Emmanuel,我是一名软件开发人员、开源贡献者和倡导者。我谨祝我谦卑的自己生日快乐。

今天,2024 年 12 月 20 日,我开始学习 Typescript 和技术写作。我有时了解 Typescript,但我从未见过它的重要、有用、丰富的功能以及它如何帮助我编写更好的代码。

理想情况下,我在知道 Typescript 的时候就拒绝学习它。我的结论是,学习 Typescript 没有任何用处,因为它具有与 JavaScript 相同的语法和所有内容,直到我找到了需要 Typescript 的工作。

这就是我开始正确学习 Typescript 的方式,如果没有的话我就已经把注意力集中在 Typescript 上了。

今天,我想分享 Typescript 的基础知识、它的重要性以及它如何帮助您减少代码中编写的错误。

JavaScript从诞生之日起就不是像C、C、C#、Rust等低级编程语言那样的类型语言。

在类型化语言中,变量和值都有类型。

这就是类型化语言的含义,以 C 编程语言为例。

例如在 JavaScript 中定义变量:

let x = 5
typeof x    //number
登录后复制
登录后复制

在 JavaScript 中,x 可以重新分配给字符串值。

x = "Emmanuel"
typeof x    //string
登录后复制
登录后复制

与 C 编程语言等低级语言相比,您必须让变量知道值数据类型。例如:

init x =  5
float y = 0.5
登录后复制
登录后复制

如果您尝试重新分配变量 x 和 y,则会抛出错误。然而,JavaScript 是一种松散类型的语言,可能会导致代码中出现大量错误。

为了避免这种情况,您需要一个名为 Typescript 的 JavaScript 超集。 Typescript 是一个静态类型检查器,可在运行程序之前帮助检查程序中的错误。

开始吧
将 Typescript 全局或本地安装到您的项目中。
npm install -g typescript

创建一个文件夹并将其命名为 typescript。

How I start typescript.

右键单击文件夹(typescript),使用 Visual Studio Code 打开并创建文件 test.ts。

How I start typescript.

完成此操作后,下一步就是开始编写打字稿。

在 test.ts 文件中复制代码并将其粘贴到文件中并运行它。

console.log("Hello world");
登录后复制
登录后复制

运行打字稿文件。打开命令行界面 (CLI) 和 tsc test.ts。该命令将运行打字稿文件。

注意:如果您不安装 typescript,您将无法在 CLI 中访问 tsc。

运行后,您会注意到 CLI 中没有发生任何引人注目的事情,但是,您会在文件夹中注意到一个新文件 test.js。

How I start typescript.

打开 test.js 文件,您会注意到运行的命令会将 test.ts 中的所有内容输出到 test.js。

How I start typescript.

让我们在代码中包含类型。让我们看看它在 Javascript 中是什么样子。

let x = 5
typeof x    //number
登录后复制
登录后复制

运行 tsc test.ts。没什么特别的事情发生。
然而,假设函数调用 meet() 得到一个像 meet(7).

这样的参数

Typescript 将指示错误。

x = "Emmanuel"
typeof x    //string
登录后复制
登录后复制

通常,在 JavaScript 世界中,代码很酷,但这不是我们想要的。所以即使它在运行时不会抛出错误。 Typescript 帮助我们提前发现问题。这是打字稿最酷的部分。它可以帮助您编写更少错误的代码。

让我们检查一下这段代码。

init x =  5
float y = 0.5
登录后复制
登录后复制

注意函数 meet(name: string, id: number),附加的 :string 和 :number。这告诉我们我们需要一个参数字符串和一个数字。如果您这样做,否则您的代码将触发错误。

函数返回类型
我们可以允许我们的函数返回特定类型。

console.log("Hello world");
登录后复制
登录后复制

对象类型

function meet(name, id){
    console.log(`Hello ${name}, your unique ID is ${id}.`)
}

meet("Abel Emmanuel", 7)
// Hello Abel Emmanuel, your unique ID is 7.
登录后复制

其他原始类型注释。

Expected 2 arguments, but got 1.ts(2554)
test.ts(1, 21): An argument for 'id' was not provided.
登录后复制

总之,Typescript 是一种类型语言,可以帮助您编写更好的 JavaScript 并减少错误。更多内容请访问 Typescript 官方网站:Typescript。

如果您觉得这篇文章有帮助,请告诉我,如果有更好的改进方法,我将很高兴向您学习。感谢您阅读我的第一篇文章。

在 Twitter 上关注我,我会分享精彩内容。

以上是我如何开始打字稿。的详细内容。更多信息请关注PHP中文网其他相关文章!

本站声明
本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热AI工具

Undresser.AI Undress

Undresser.AI Undress

人工智能驱动的应用程序,用于创建逼真的裸体照片

AI Clothes Remover

AI Clothes Remover

用于从照片中去除衣服的在线人工智能工具。

Undress AI Tool

Undress AI Tool

免费脱衣服图片

Clothoff.io

Clothoff.io

AI脱衣机

Video Face Swap

Video Face Swap

使用我们完全免费的人工智能换脸工具轻松在任何视频中换脸!

热工具

记事本++7.3.1

记事本++7.3.1

好用且免费的代码编辑器

SublimeText3汉化版

SublimeText3汉化版

中文版,非常好用

禅工作室 13.0.1

禅工作室 13.0.1

功能强大的PHP集成开发环境

Dreamweaver CS6

Dreamweaver CS6

视觉化网页开发工具

SublimeText3 Mac版

SublimeText3 Mac版

神级代码编辑软件(SublimeText3)

前端热敏纸小票打印遇到乱码问题怎么办? 前端热敏纸小票打印遇到乱码问题怎么办? Apr 04, 2025 pm 02:42 PM

前端热敏纸小票打印的常见问题与解决方案在前端开发中,小票打印是一个常见的需求。然而,很多开发者在实...

神秘的JavaScript:它的作用以及为什么重要 神秘的JavaScript:它的作用以及为什么重要 Apr 09, 2025 am 12:07 AM

JavaScript是现代Web开发的基石,它的主要功能包括事件驱动编程、动态内容生成和异步编程。1)事件驱动编程允许网页根据用户操作动态变化。2)动态内容生成使得页面内容可以根据条件调整。3)异步编程确保用户界面不被阻塞。JavaScript广泛应用于网页交互、单页面应用和服务器端开发,极大地提升了用户体验和跨平台开发的灵活性。

谁得到更多的Python或JavaScript? 谁得到更多的Python或JavaScript? Apr 04, 2025 am 12:09 AM

Python和JavaScript开发者的薪资没有绝对的高低,具体取决于技能和行业需求。1.Python在数据科学和机器学习领域可能薪资更高。2.JavaScript在前端和全栈开发中需求大,薪资也可观。3.影响因素包括经验、地理位置、公司规模和特定技能。

如何使用JavaScript将具有相同ID的数组元素合并到一个对象中? 如何使用JavaScript将具有相同ID的数组元素合并到一个对象中? Apr 04, 2025 pm 05:09 PM

如何在JavaScript中将具有相同ID的数组元素合并到一个对象中?在处理数据时,我们常常会遇到需要将具有相同ID�...

JavaScript难以学习吗? JavaScript难以学习吗? Apr 03, 2025 am 12:20 AM

学习JavaScript不难,但有挑战。1)理解基础概念如变量、数据类型、函数等。2)掌握异步编程,通过事件循环实现。3)使用DOM操作和Promise处理异步请求。4)避免常见错误,使用调试技巧。5)优化性能,遵循最佳实践。

如何实现视差滚动和元素动画效果,像资生堂官网那样?
或者:
怎样才能像资生堂官网一样,实现页面滚动伴随的动画效果? 如何实现视差滚动和元素动画效果,像资生堂官网那样? 或者: 怎样才能像资生堂官网一样,实现页面滚动伴随的动画效果? Apr 04, 2025 pm 05:36 PM

实现视差滚动和元素动画效果的探讨本文将探讨如何实现类似资生堂官网(https://www.shiseido.co.jp/sb/wonderland/)中�...

JavaScript的演变:当前的趋势和未来前景 JavaScript的演变:当前的趋势和未来前景 Apr 10, 2025 am 09:33 AM

JavaScript的最新趋势包括TypeScript的崛起、现代框架和库的流行以及WebAssembly的应用。未来前景涵盖更强大的类型系统、服务器端JavaScript的发展、人工智能和机器学习的扩展以及物联网和边缘计算的潜力。

console.log输出结果差异:两次调用为何不同? console.log输出结果差异:两次调用为何不同? Apr 04, 2025 pm 05:12 PM

深入探讨console.log输出差异的根源本文将分析一段代码中console.log函数输出结果的差异,并解释其背后的原因。�...

See all articles