diff --git a/source/_posts/前端杂烩/TypeScript初见.md b/source/_posts/前端杂烩/TypeScript初见.md new file mode 100644 index 0000000..35c9b0f --- /dev/null +++ b/source/_posts/前端杂烩/TypeScript初见.md @@ -0,0 +1,80 @@ +--- +title: TypeScript初见 +date: 2019-6-23 15:22:13 +tags: + - TypeScript +categories: + - 前端杂烩 +--- + +`TypeScript` ( 以下简称TS ) 由微软开发, 是一个JavaScript的超集, 遵循ES6规范 +也就是TS本身支持所有的JS语法, 已有的JS程序不需要任何改动就可以在TS环境下运行 +同时进行了扩展 +添加了基于类的面向对象编程特性, 以及数据类型 + + +> 这种数据类型的定义, 与Java这种编译型语言终究不同 +我的体会是它只存在编译期的类型检查, 而运行期还是与JS基本相同 +这样的好处也很明显, 能够减少在开发阶段犯错误的几率 ( 毕竟IDE可以完成类型检查的错误提示 ) +避免一些类型问题都需要调试来排查 + +### 开发环境 +首先这种JavaScript的超集, 如果需要在浏览器运行 +必然是需要compiler的, 因为需要转成可执行的JavaScript代码 + +如果是在nodejs里面运行, 就可以不需要了, 因为它可以想babel那样, 封装一个自己的运行器出来 +比如babel的 `babel-node`, 就如同是nodejs的 `node`, 前者提供了提供一个支持ES6的REPL环境 + +```shell +npm install -g typescript +``` +> 当然如果是只在项目里面使用, 也可以不执行全局安装 + +![typescript安装](/images/前端杂烩/typescript安装.png) +可以看到安装后添加了两个命令行工具, 分别是`tsc`和`tsserver` +tsc就是 TypeScript Compiler + +#### 使用编译器 +现在可以尝试写个typescript文件 +比如 +```typescript +// hello.ts +export class Hello { + hello(msg) { + console.log(msg) + } +} +``` +然后执行`tsc hello.ts` +就会生成hello.js文件, 内容如下 +```javascript +"use strict"; +exports.__esModule = true; +var Hello = /** @class */ (function () { + function Hello() { + } + Hello.prototype.hello = function (msg) { + console.log(msg); + }; + return Hello; +}()); +exports.Hello = Hello; +``` +就是一个语法的转换过程 + + + + + + + + + + +### 写在最后 +最近拿 [Nestjs](https://docs.nestjs.cn/) 给自己的博客写了个管理端的后台 +当然前后端分离是必须的, Nestjs写后台也只写接口 +这个框架需要用TypeScript编写代码, 于是就顺带学了学 + +据说习惯了TypeScript就再也不想写JavaScript了, 我倒是没怎么觉得 +只是Nestjs的很多设计都和Spring有几分神似, 只能说Spring大法好, 上手倒是容易很多 \ No newline at end of file diff --git a/source/images/前端杂烩/typescript安装.png b/source/images/前端杂烩/typescript安装.png new file mode 100644 index 0000000..1953a18 Binary files /dev/null and b/source/images/前端杂烩/typescript安装.png differ