这是我参与「第四届青训营 」笔记创作活动的第9天
一、重点内容
- 简单介绍了TypeScript
- 讲述了TypeScript的基本语法和上手TypeScript
- 了解了TypeScript的工程应用
二、详细知识点
为什么是TypeScript？
TypeScript的发展历史
- 2012-10：微软发布了TypeScript第一个版本（0.8）
- 2014-10：Angular发布了基于TypeScript的2.0版本
- 2015-04：微软发布了Visual Studio Code
- 2016-05：@types/react发布，TypeScript可开发React
- 2020-09：Vue发布了3.0版本，官方支持TypeScript
- 2021-11：v4.5版本发布
为什么是TypeScript？
JS（动态类型）
- 包含于兼容所有Js特性，支持共存
- 支持渐进式引入与升级
TS（静态类型）
- 可读性增强：基于语法解析TSDoc，ide增强
- 可维护性增强：在编译阶段暴露大部分错误----多人合作的大型项目中，获得更好的稳定性和开发效率
TypeScript的基本语法
- 字符串
const q='string';
const q:string='string'; - 数字
const w=1;
const w:number=1; - 布尔值
const e=true;
const e:boolean=true; - null
const r=null;
const r:null=null; - undefined
const t=undefined;
const t:undefined=undefined;
上手TypeScript
有两种主要的方式来获取TypeScript工具：
- 通过npm（Node.js包管理器）
- 安装Visual Studio的TypeScript插件
- 针对使用npm的用户：
> npm install -g typescript
构建第一个TypeScript文件
在编辑器，将下面的代码输入到greeter.ts文件里：
function greeter(person) {
return "Hello, " + person;
}
let user = "Jane User";
document.body.innerHTML = greeter(user);
编译代码
使用了.ts扩展名，但是这段代码仅仅是JavaScript而已。 可以直接从现有的JavaScript应用里复制/粘贴这段代码。
在命令行上，运行TypeScript编译器：
tsc greeter.ts
输出结果为一个greeter.js文件，它包含了和输入文件中相同的JavsScript代码。 一切准备就绪，我们可以运行这个使用TypeScript写的JavaScript应用了！
接下来让我们看看TypeScript工具带来的高级功能。 给 person函数的参数添加: string类型注解，如下：
function greeter(person: string) {
return "Hello, " + person;
}
let user = "Jane User";
document.body.innerHTML = greeter(user);
TypeScript的工程应用
Web
- 配置webapack loader相关配置
- 配置tsconfig.js文件
- 运行webapack启动/打包
- loader处理ts文件时，会进行编译与类型检查
Node
- 安装Node与npm
- 配置tsconfig.js文件
- 使用npm安装tsc
- 使用tsc运行编译得到js文件
三、应用参考
5分钟上手TypeScript · TypeScript中文网 · TypeScript——JavaScript的超集 (tslang.cn)
