快速了解 TypeScript 的用法

最新推荐文章于 2024-04-22 23:18:29 发布

星梦之羽

最新推荐文章于 2024-04-22 23:18:29 发布

阅读量220

点赞数

分类专栏： typescript 文章标签： typescript

本文链接：https://blog.csdn.net/weixin_45571672/article/details/118371235

版权

typescript 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

TypeScript简介

TypeScript是JavaScript的超集。
它对JS进行了扩展，向JS中引入了类型的概念，并添加了许多新的特性。
TS代码需要通过编译器编译为JS，然后再交由JS解析器执行。
TS完全兼容JS，换言之，任何的JS代码都可以直接当成JS使用。
相较于JS而言，TS拥有了静态类型，更加严格的语法，更强大的功能；TS可以在代码执行前就完成代码的检查，减小了运行时异常的出现的几率；TS代码可以编译为任意版本的JS代码，可有效解决不同JS运行环境的兼容问题；同样的功能，TS的代码量要大于JS，但由于TS的代码结构更加清晰，变量类型更加明确，在后期代码的维护中TS却远远胜于JS。

搭建 TypeScript 运行环境

NPM 安装 TypeScript

如果你的本地环境已经安装了 npm 工具，可以使用以下命令来安装。

使用国内淘宝镜像：

npm config set registry https://registry.npm.taobao.org

安装全局 typescript：
npm 安装

npm install -g typescript

国内淘宝镜像安装

cnpm install -g typescript

yarn安装

yarn add -g typescript

安装完成后我们可以使用 tsc 命令来执行 TypeScript 的相关代码，以下是查看版本号：

tsc -v
Version 3.2.2

使用方法

新建一个 1.ts 文件
在这里插入图片描述
写入内容

console.log("Hello TypeScript")

在文件路径上输入cmd打开dos窗口

在这里插入图片描述

然后执行编辑命令 tsc 1.ts

他会把ts文件编译成js文件然后使用

运行的时候可以通过 html 运行或者通过 node 运行

node 运行

在命令框里输入 node 1.js 命令
在这里插入图片描述

在 html 文件中运行

新建一个 index.html 文件

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="./1.js"></script>
</head>
<body> 
</body>
</html>

在这里插入图片描述

编译选项

自动编译文件

编译文件时，使用 -w 指令后，TS编译器会自动监视文件的变化，并在文件发生变化时对文件进行重新编译。
指令如下

tsc xxx.ts -w

基本类型

类型声明
- 类型声明是TS非常重要的一个特点
- 通过类型声明可以指定TS中变量（参数、形参）的类型
- 指定类型后，当为变量赋值时，TS编译器会自动检查值是否符合类型声明，符合则赋值，否则报错
- 简而言之，类型声明给变量设置了类型，使得变量只能存储某种类型的值
- 语法：
  - ```
  let 变量: 类型;
  
  let 变量: 类型 = 值;
  
  function fn(参数: 类型, 参数: 类型): 类型{
      ...
  }
```
自动类型判断
- TS拥有自动的类型判断机制
- 当对变量的声明和赋值是同时进行的，TS编译器会自动判断变量的类型
- 所以如果你的变量的声明和赋值时同时进行的，可以省略掉类型声明

案例

变量

// 指定约束类型
let a: number;
a = 1
a = 2
// a = '1'      //  会报错 编辑器会告诉你他要的是 number 类型不能给其他类型
console.log(a);
// 系统自动检测类型
let b = "张三"   // 声名变量的时候如果直接赋值他会根据赋的初始值来判定他的约束类型
// b = 1        //  会报错 编辑器会告诉你他要的是 string 类型不能给其他类型
console.log(b)

函数

// 可以指定传参的类型 和 函数返回的类型
function fun(a: number, b: number): number {
    return a + b
    // return a + 'aaa'         //  会报错 因为它返回的不是 number 类型
}
// let he = fun(1,2)
let he = fun(1, 2)
// let he = fun(1, '2')         //  会报错 因为b参数它约束的是number类型但传入的不是number类型
console.log(he)

TypeScript 运算符

算术运算符

var num1:number = 10
var num2:number = 2
var res:number = 0  
res = num1 + num2
console.log(res);
res = num1 - num2;
console.log(res)
res = num1*num2
console.log(res)
res = num1/num2
console.log(res)
res = num1%num2
console.log(res)
num1++
console.log(num1)
num2--
console.log(num2)

逻辑运算符

var num1:number = 20; 
var num2:number = 90; 
var res:boolean = ((num1>50)&&(num2>80)); 
console.log(res);
var res:boolean = ((num1>50)||(num2>80)); 
console.log(res);
var res:boolean=!((num1>50)&&(num2>80)); 
console.log(res);

关系运算符

var num1:number = 5;
var num2:number = 9;
console.log("num1 的值为: "+num1); 
console.log("num2 的值为:"+num2);
var res = num1>num2 
console.log("num1 大于n num2: "+res)
res = num1<num2 
console.log("num1 小于 num2: "+res)  
res = num1>=num2 
console.log("num1 大于或等于  num2: "+res)
res = num1<=num2
console.log("num1 小于或等于 num2: "+res)  
res = num1==num2 
console.log("num1 等于 num2: "+res)  
res = num1!=num2  
console.log("num1 不等于 num2: "+res)

赋值运算符

var a: number = 12 
var b:number = 10  
a = b 
console.log(a)
a += b
console.log(a)
a -= b 
console.log(a)
a *= b 
console.log(a)
a /= b 
console.log(a)    
a %= b 
console.log(a)

三元/条件运算符

var num:number = -2 
var result = num > 0 ? "大于 0" : "小于 0，或等于 0" 
console.log(result)

总结

本片文章主要讲述了什么是 ScriptScript
如何搭建环境
编译ts文件、类型声名、运算符

星梦之羽

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
打赏
2
评论
快速了解 TypeScript 的用法

TypeScript简介TypeScript是JavaScript的超集。它对JS进行了扩展，向JS中引入了类型的概念，并添加了许多新的特性。TS代码需要通过编译器编译为JS，然后再交由JS解析器执行。TS完全兼容JS，换言之，任何的JS代码都可以直接当成JS使用。相较于JS而言，TS拥有了静态类型，更加严格的语法，更强大的功能；TS可以在代码执行前就完成代码的检查，减小了运行时异常的出现的几率；TS代码可以编译为任意版本的JS代码，可有效解决不同JS运行环境的兼容问题；同样的功能，TS的代码
复制链接

扫一扫