TypeScript 概述
原创TypeScript 概述
原创
Emperor_LawD
修改于 2021-05-17 10:49:32
修改于 2021-05-17 10:49:32
JavaScript 是什么
- JS 是一种运行在客户端（比如：浏览器）中的编程语言，为网站提供动态交互特性，让网页动起来
- 运行环境：
- 浏览器
- Node.js
- 可以实现服务器端 / 桌面端编程等
TypeScript 是什么
- TS 是 JavaScript 的超集（JS 有的 TS 都有）
- 为 JS 添加了类型系统
// TypeScript 代码：有明确的类型，即 : number（数值类型）
let age: number = 10;
// JavaScript 代码：无明确的类型
let age = 10;- 还添加了 接口、枚举 等
- 设计目标：开发大型项目
TypeScript 的特征
静态类型
类型系统按照“类型检查的时间”可分为静态类型和动态类型
- 静态类型是指在编译阶段就能确定每个变量的类型，如果有错误，在编译的时候就会报错
- TypeScript 是静态类型，ts 文件在运行前要先编译为 js 文件，在编译的时候就会进行类型检查
let num: number = 1;
num.split(' ');
// 编译时会报错 Property 'split' does not exist on type 'number'（类型“number”上不存在属性“split”）.
- 动态类型是指在运行阶段才会进行类型检查，如果有错误，在运行的时候才会报错
- JavaScript 是动态类型，它是一种解释型语言，没有编译阶段
var num = 1;
num.split(' ');
// 运行时会报错 
弱类型
类型系统按照“是否允许隐式类型转换”可分为强类型和弱类型
- 弱类型：数据类型可以忽略，可以不给变量指定类型
- TypeScript 是 JavaScript 的超集，所以 TS 允许 JS 中所允许的所有操作，它和 JavaScript 一样都是弱类型
注：TS 只是提前了类型检查的时间，并没有让系统本身变得更加严格
console.log(1 + '1');
// 在TS和JS中运行结果相同，都为字符串 11TypeScript 代码运行
将 ts 文件转换为 js 文件，在 html 中引入 js 文件，即可运行
- 新建 ts 文件，输入以下求和代码
function sum(a: number, b: number) {
return a + b;
};
console.log(sum(1, 2));- 打开终端，并输入
tsc 文件名.ts单机回车
- 新建一个 html 文件，使用
<script>标签引入 js 文件
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<!-- 引入 js 文件 -->
<script src="n2_overview.js"></script>
</body>
</html>- 在浏览器中运行 html 文件，即可在控制台查看到运行结果
优势
TypeScript 与 JavaScript 相比
- 类型化思维方式，使得开发严谨，提前发现错误，减少改 Bug 时间
- 类型系统提高了代码可读性，并使维护和重构代码更加容易
- 补充了接口、枚举等开发大型应用时 JS 缺失的功能
Vue 3 源码使用 TS 重写，Angular 默认支持 TS，React 与 TS 完美配合
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
原创声明：本文系作者授权腾讯云开发者社区发表，未经许可，不得转载。
如有侵权，请联系 cloudcommunity@tencent.com 删除。
评论
登录后参与评论
推荐阅读
目录