1. 什么是 TypeScript?

TypeScript 是一种由微软开发的自由和开源的编程语言,它是 JavaScript 的一个超集,扩展了 JavaScript 的语法。

JavaScript 与 TypeScript 的区别

TypeScript 是 JavaScript 的超集,扩展了 JavaScript 的语法,因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改,TypeScript 通过类型注解提供编译时的静态类型检查。

TypeScript 可处理已有的 JavaScript 代码,并只对其中的 TypeScript 代码进行编译。

TypeScript的优点

1: 解决了JavaScript类型系统的问题
2: 提高了JavaScript代码的可靠性
3:等等。。。

TS解决了什么问题

TS的诞生解决了JavaScript自由类型系统的混乱的问题,使得这门弱类型的语言变得和后端语言一样规范严谨起来了。

TypeScript 安装

  • 通过 Node.js 包管理器 (npm)
npm install -g typescript

安装完成之后可以使用TS编译器将TS文件编译成js文件

tsc filename.ts

TS Hello World

<!DOCTYPE html> 
<html> 
<head> 
<meta charset="utf-8"> 
<title>Learning TypeScript</title>
</head> 
<body> 
    <script src="index.js"></script>
</body> 
</html>

创建index.ts文件,.ts是TS文件的后缀,

alert('hello world in TypeScript!');

打开终端执行命令

tsc hello.ts

运行编译后的代码

method1: 
node index.js
​
method2: 
npm install -g ts-node//需先安装ts-node
ts-node index.ts

第一次运行tsc指令报错

报错原因

是因为vscode的执行策略是受限制的,只需要改为可控的就行

步骤一:用管理员身份打开vscode

步骤二:ctrl+` 打开终端

步骤三:在终端依次执行:

get-ExecutionPolicy(显示restricted:表示是受限制的);

set-ExecutionPolicy RemoteSigned;

get-ExecutionPolicy(显 示RemoteSigned) //成功

报错原因

原因就是因为html文件内不能直接运行ts代码,必须编译成js文件后才能运行

变量的严格定义其类型

在 TypeScript 中,我们使用 : 指定变量的类型,: 的前后有没有空格都可以。

function sayHello(person: string) {
    if (typeof person === 'string') {
        return 'Hello, ' + person;
    } else {
        throw new Error('person is not a string');
    }
}
​
let user = 'Tom';
console.log(sayHello(user));

这里我们用英文冒号指定了person参数的类型为string类型,虽然ts里面对变量做了类型的规定,但是编译成js之后,没有多出来的代码帮我们判断该变量的类型,所以某些业务场景还是需要我们自己去添加判断逻辑。

编译时报错

变量的类型并不是强制规定的,如果ts代码中变量的类型没有规定,虽然编译的时候会报错,但是最终都会生成编译后的js代码,仍然可以使用编译后的js文件。
当然如果项目规范让我们在遇到类似问题时,在报错时要终止js文件的生成的话,可以在ts的配置项中tsconfig.json配置noEmitOnError即可。

最后修改:2021 年 12 月 20 日
如果觉得我的文章对你有用,可以对我进行您主观即不限定金额大小的打赏。