Typescript 环境安装和数字、字符串、布尔基本数据类型

简介: 本文是 Typescript 的入门文章,主要介绍了`Typescript` 的开发环境的搭建,以及 TypeScript 的编译流程。然后学习了 `Typescript` 的变量声名方式,主要使用 `let` 和 `const` 关键字。最后介绍了几种 `Typescript` 中的基本数据类型,包括数字、字符串和布尔类型,以及 TS 在编程时强大的类型能力,能避免开发时的一些低级错误。

环境安装

1.安装 Nodejs

2.安装 typescript:

npm install -g typescript

3.打开命令行窗口,检验安装是否成功:

tsc -v

能打印出版本号,说明安装成功。

Typescript 的 Hello,world

新建一个 index.ts 文件,输入以下内容:

let message = "Hello, world!";
console.log(message);

打开命令行工具,使用 tsc 进行编译:

tsc index.ts

会在当前目录下生成一个 index.js 文件,使用 node 去执行它:

node index.js

命令行终端会打印出:Hello,world!

Typescript 工作流

Javascript 可以运行在浏览器和 Node 环境中。TypescriptJavascript 的超集,不能直接运行在浏览器中,需要经过编译器,转译成浏览器能识别的 JS 代码,才能运行。

图片描述

比如上面编写的 index.ts,经过 tsc 命令编译为普通的 js 文件,就可以被 Node 执行,或者在浏览器中运行。

变量声明

Typescript 声明变量的方式和 JavaScript 保持一致,都是使用 varletconst 关键字。

随着 ES6+ 语法的普及,现在更推荐使用 let 来声明一个变量,使用 const 声明一个常量。这也是 TS 官方文档明确说明的一条建议,在任何情况下都要避免使用 var

ES6 之前的JS 中的作用域以前只有全局作用域和函数作用域。最基本的代码块是没有作用域的。甚至可以使用 var 无限次声明同一个变量,这在任何语言中都是一个非常危险的 操作。

下面示例中函数执行,会在 for 循环结束之后打印出 i ,这说明 i 是没有块级作用域的。

function sum() {
    for(var i=0; i<5; i++) {
        console.log(i)
    }
    
    console.log('final i:', i)   
}

sum()

使用 let 声明变量,是对 var 的一个“修补”,同一个变量只能声明一次,在声明之前不能被访问,且具备块级作用域。

下面示例中的函数执行,会报错,因为 let 声明的变量具备块级作用域,i 只在 for 循环中有用。

function sum() {
    for(let i=0; i<5; i++) {
        console.log(i)
    }
    
    console.log('final i:', i)   
}

sum()

使用 const 声明常量,之后常量就不能被重新赋值了。

const NAME = "kw";

// 报错:Cannot assign to 'NAME' because it is a constant.
NAME = 'kw2';

Typescript 类型

Typescritp 是一种强类型语言,增加了 JS 的类型能力,不仅扩展了类型,还允许开发者自定义类型。最重要的是,通过类型能提高代码质量,增强程序的安全性。

TS 中的基础类型有:

  • JS 中的数据类型:number、string、boolean、null、undefined、array、object
  • TS 扩展的数据类型:tuple、void、never、any

TS 高级类型:

  • union 组合类型
  • Nullable 可空类型
  • Literal 预定义文件类型

数字类型

TS 中的数字类型不区分整数和浮点数,也不区分正数和复数,用 number 表示。

TS 具备类型推断的能力,会根据值自动推导出类型。

let num1 = 10;
let num2: number = 20;

字符串类型

TS 中的字符串类型为 string,内容使用双引号 ""、单引号 '' 和 反引号 ` ` 引导。

let name = "kw";
let message: string = 'hello';

布尔类型

布尔类型使用 boolean 表示,用来表示真假,只有两个值 truefalse

let flag = true;
let condition: boolean = false;

使用类型能力

有一个函数,用于两个参数的相加:

function add(num1, num2) {
    return num1 + num2;
}

sum(10, 20); // 30

如果函数调用时,参数没有传数字类型,而是传了字符串类型,结果就可能不符合我们的预期:

sum(10, '20'); // 1020

由于 JS 是动态类型语言,这并不会报错,只有代码运行时才能发现。

所以可以引入 TS 的类型检查,来规避这种错误:

function add(num1: number, num2: number) {
    return num1 + num2;
}

这样,在编码的时候,TS 就能给出类型提示,防止出错。这就是 TS 的好处,帮助在开发时快速准确定位出问题,避免很多由于粗心导致的错误。

变量的类型一旦确定,就不能再修改,否则会报错:

let flag = true;
flag = 'true';

TS 会提示:不能将类型“string”分配给类型“boolean”。

小结

本文是 Typescript 的入门文章,主要介绍了Typescript 的开发环境的搭建,以及 TypeScript 的编译流程。

然后学习了 Typescript 的变量声名方式,主要使用 letconst 关键字。

最后介绍了几种 Typescript 中的基本数据类型,包括数字、字符串和布尔类型,以及 TS 在编程时强大的类型能力,能避免开发时的一些低级错误。

目录
相关文章
|
3月前
|
JavaScript 前端开发
【TypeScript入门】TypeScript入门篇——数据类型
我们人类可以很容易的分清数字与字符的区别,但是计算机并不能呀,计算机虽然很强大,但从某种角度上看又很傻,除非你明确的告诉它,1是数字,“汉”是文字,否则它是分不清1和‘汉’的区别的,因此,在每个编程语言里都会有一个叫数据类型的东东,其实就是对常用的各种数据类型进行了明确的划分,你想让计算机进行数值运算,你就传数字给它,你想让他处理文字,就传字符串类型给他。
42 3
|
3月前
|
JavaScript
【typeScript】搭建TS环境
【typeScript】搭建TS环境
|
1月前
|
JavaScript 前端开发 开发工具
TypeScript的介绍,let age:number = xxx,可以直接看出数据类型,Type由微软开发,可以在任何浏览器和系统中运行,比较适合大型项目,TypeScript的安装
TypeScript的介绍,let age:number = xxx,可以直接看出数据类型,Type由微软开发,可以在任何浏览器和系统中运行,比较适合大型项目,TypeScript的安装
|
3月前
|
JavaScript 前端开发 Java
2020你应该知道的TypeScript学习路线【数据类型】
2020你应该知道的TypeScript学习路线【数据类型】
48 1
|
1月前
|
前端开发 JavaScript 程序员
【Vue3+TypeScript】CRM系统项目搭建之 — 区分 development 和 production 环境
【Vue3+TypeScript】CRM系统项目搭建之 — 区分 development 和 production 环境
26 0
|
2月前
|
JavaScript 安全
TypeScript类型(数字、字符串、字面量、数组、元组、枚举、对象等)
TypeScript类型(数字、字符串、字面量、数组、元组、枚举、对象等)
21 0
|
3月前
|
JavaScript 前端开发 开发者
【Web 前端】TypeScript 的内置数据类型有哪些?
【5月更文挑战第1天】【Web 前端】TypeScript 的内置数据类型有哪些?
|
3月前
|
存储 JavaScript 前端开发
TypeScript基本数据类型详解
【4月更文挑战第23天】TypeScript基础知识概览:包括Boolean、Number、String、Array、Tuple、Enum、Any、Void、Null和Undefined以及Never类型。了解这些数据类型能提升代码质量和可维护性。示例代码展示了各种类型的用法,如定义布尔变量、数字转换、字符串操作、数组和元组声明、枚举创建、任意类型使用,以及空值和Never类型的场景。掌握这些将有助于更好地使用TypeScript进行开发。
|
3月前
|
JavaScript 前端开发 编译器
TypeScript的编译器、编辑器支持与工具链:构建高效开发环境的秘密武器
【4月更文挑战第23天】TypeScript的强大力量源于其编译器、编辑器支持和工具链,它们打造了高效的开发环境。编译器`tsc`进行类型检查、语法分析和代码转换;编辑器如VS Code提供智能提示、错误检查和格式化;工具链包括Webpack、Rollup等构建工具,Jest、Mocha等测试框架,以及代码质量和性能分析工具。这些组合使用能提升开发效率、保证代码质量和优化项目性能。
|
3月前
|
JavaScript
【HarmonyOS 4.0 应用开发实战】TypeScript入门之声明、数据类型、函数、类的详讲
【HarmonyOS 4.0 应用开发实战】TypeScript入门之声明、数据类型、函数、类的详讲
65 0