TypeScript初体验

泰戈尔

2021 年 12 月 07 日

291 次浏览

2 条评论

2081字数

TypeScript

什么是 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即可。

TypeScript初体验