杭州专业网站设计物流案例 网站

初识ts

基本了解

• 设计者，实现者：微软
• 发行时间：2012年10月1日
• GitHub：https://github.com/microsoft/TypeScript
• ts和js关系：ts是js的扩展，ts语法包含js

ts是新语言吗？

• 不是，在js基础上加了强变量类型语法，增强js语法

本质是什么？

• js 的超集，主要提供类型系统和对 ES6 的支持

如何运行的？

• 全局安装 typescript
• typescript 将ts文件转化为js文件
• ts到js转换过程可提前发现语法缺陷

为什么要学习ts? 优点

• 提前发现bug：在tsc过程将ts转化为js过程中会提示变量不一致问题
• 代码更加规范，减少维护成本
• 各大框架已经开始使用ts(如果再不学，以后看源码是不是会更加费力了)

缺点

• 成本: 需要学习接口、泛型、类等概念
• 构建：集成到构建流程需要工作量
• 三方库：可能和一些库结合的不是很完美

demo: hello typescript

// 1. 安装
sudo npm install -g typescript
tsc -v  // 查看版本// 2. 运行
tsc // 编译 ts转为js// 3. demo:ts  
function greeter(person: string){return "hello: " + person;
}
let user = "JaneBaby";
console.log(greeter(user));// 4. 转换后的 demo.js
"use strict";
function greeter(person) {return "hello: " + person;
}
var user = "JaneBaby";
console.log(greeter(user));// 5. 运行
node.js demo.js  // 1. node 环境运行
// 略... // 2. html加载demo.js

观察发现

• ts转换成js并没有关于类型转换代码
• 当形参和实参类型不同时，编辑器和命令行会出现提示