{"id":20894559,"url":"https://github.com/gnu4cn/ts-learnings","last_synced_at":"2025-12-11T18:45:36.173Z","repository":{"id":48020344,"uuid":"177806166","full_name":"gnu4cn/ts-learnings","owner":"gnu4cn","description":"学习TypeScript.","archived":false,"fork":false,"pushed_at":"2025-01-16T12:43:41.000Z","size":1760,"stargazers_count":0,"open_issues_count":3,"forks_count":0,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-16T14:14:15.441Z","etag":null,"topics":["gulp","gulp-typescript","tsconfig","tutorial","typescript"],"latest_commit_sha":null,"homepage":null,"language":"Handlebars","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/gnu4cn.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":null,"code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2019-03-26T14:33:49.000Z","updated_at":"2025-01-16T12:43:42.000Z","dependencies_parsed_at":"2023-11-24T00:21:36.889Z","dependency_job_id":"a635b658-4e39-412d-b355-d39d9a71a819","html_url":"https://github.com/gnu4cn/ts-learnings","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gnu4cn%2Fts-learnings","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gnu4cn%2Fts-learnings/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gnu4cn%2Fts-learnings/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/gnu4cn%2Fts-learnings/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/gnu4cn","download_url":"https://codeload.github.com/gnu4cn/ts-learnings/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":243278274,"owners_count":20265521,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["gulp","gulp-typescript","tsconfig","tutorial","typescript"],"created_at":"2024-11-18T10:20:08.276Z","updated_at":"2025-12-11T18:45:36.062Z","avatar_url":"https://github.com/gnu4cn.png","language":"Handlebars","readme":"# TypeScript 学习记录\n\n你可以直接在 xfoss.com 阅读本书：[ts.xfoss.com](https://ts.xfoss.com/)。xfoss.com 还有其他书籍：\n\n- [Rust 编程语言](https://rust-lang.xfoss.com)，Rust 官方教程中文翻译\n\n- [Java 编程语言](https://java.xfoss.com)，\"Head First Java\" 书中文翻译\n\n- [60天通过CCNA考试](https://ccna60d.xfoss.com)，一本基础的网络通讯书，翻译自国外经典 CCNA 60 days\n\n\n\n\n你可以在 https://github.com/gnu4cn/ts-learnings 上 fork 本项目，并提交你的修正。\n\n\n\nECMAScript 2015 (ES6)已经正式发布，所有浏览器均已支持，同时许多项目，如Angular, Ionic, Electron框架等，均已在往ES6迁移。故需要学习掌握这一新版的Javascript。\n\n\n\n## 变更日志\n\n+ 2019-3-27, 重新整理`package.json`、`tsconfig.json`与`gulpfile.js`文件，让`.gitignore`生效，令到项目大小得以缩小\n\n---\n\n## 在本地阅读\n\n在本地阅读本书，需要安装 `mdbook` 程序。根据操作系统的不同，安装 `mdbook` 程序有所不同。\n\n\n### 在 Linux 系统上\n\n```console\ncurl --proto '=https' --tlsv1.2 -sSf https://sh.rustup.rs | sh\ncargo install mdbook\n```\n\n### 在 Windows 上\n\n在 “Powershell（管理员）”（\"Administrator: Windows Powershell\"） 中，先安装 `choco`\n\n```powershell\nSet-ExecutionPolicy Bypass -Scope Process -Force; [System.Net.ServicePointManager]::SecurityProtocol = [System.Net.ServicePointManager]::SecurityProtocol -bor 3072; iex ((New-Object System.Net.WebClient).DownloadString('https://community.chocolatey.org/install.ps1'))\n```\n\n经由 `choco` 安装 `msys2`\n\n```powershell\nchoco install -y msys2\n```\n\n在 `msys2` 中安装 `mdbook`\n\n```console\npacman -S mingw-w64-x86_64-mdbook\n```\n\n安装好 `mdbook` 后, 带一些命令行参数和开关运行服务器：\n\n```console\nmdbook serve ~/rust-lang-zh_CN -p 8080 -n 127.0.0.1 --open\n```\n\n\u003e 注：当在 Windows 系统上时，咱们要在 `msys2` 的终端窗口中运行此命令。\n\n此时，将在操作系统的默认浏览器中，打开本书。\n\n\n## ES6与 Javascript\n\nES6仍然是Javascript, 只不过是在我们已经熟悉的Javascript上加入了一些新的东西。使得Javascript更为强大，可以应对大型程序的要求。\n\n## ES6的实现\n\nES6只是新一代Javascript的规范，几大公司、各个浏览器引擎等都有具体的实现。微软TypeScript、社区的CoffeeScript等都是ES6的具体实现。\n\n参考链接：\n\n- https://blog.mariusschulz.com/2017/01/13/typescript-vs-flow\n- http://blog.ionicframework.com/ionic-and-typescript-part-1/\n\n鉴于Angular与Ionic都是使用了微软的TypeScript, 因此在学习ES6时，将学习TypeScript这一实现。\n\n## 关于TypeScript\n\nTypeScript是Javascript的超集，有着以下优势：\n\n- 可选的静态类型（关键就是这里的“可选”, Optional static typing, the key here is optional）\n- 类型推理，此特性在并没有使用到类型的情况下，带来那些类型的诸多益处（Type Inference, which gives some of the benefits of types, without actually using them）\n- 可在主流浏览器尚未对ES6/ES7提供支持之前，通过TypeScript用上ES6及ES7的特性\n- TypeScript有着将程序向下编译到所有浏览器都支持的某个Javascript版本的能力\n- IntelliSense提供了极好的工具支持\n\n因为TypeScript带给如你一样的开发者这些不错的特性及巨大优势，Ionic是以TypeScript编写的，而不是ES6（这里就表明了**TypeScript并不是ES6**）。\n\n### 关于可选的静态类型\n\n可能TypeScript最能打动人心的，就是其所提供到的可选静态类型系统了。将给变量、函数、属性等加上类型。这将帮到编译器，且在app尚未运行时，就给出有关代码中任何潜在错误的警告。在使用到库及框架时，类型也有帮助，这是由于类型可令到开发者准确知悉那些APIs期望何种类型的数据。而关于类型系统，你首先要记住的是它是可选的。TypeScript并不强制要求开发者在他们不想添加的上必须添加类型。但随着应用变得越来越大、越来越复杂，类型确实可以提供到一些很棒的优势。\n\n关于 IntelliSense:\n\n\u003e 一种 Microsoft 技术，这种技术通过在光标悬停在函数上时显示类定义和注释，从而让您可以分析源代码。当您在 IDE 中键入函数名时，IntelliSense 还可以完成这些名称。\n\nTypeScript的一大优势，就是其代码补全与IntelliSense了。IntelliSense在敲入代码时，提供有用的提示。因为Ionic本身就是用TypeScript写就的，代码编辑器就可以展示出所有可用的方法，以及这些方法所期望的参数。当今所有最好的集成开发环境，比如VScode、Atom、Sublime text，甚至那些诸如Vim/Neovim等命令行的编辑器，都有对代码补全的支持。\n\nTypeScript的许多优势，带来了一种好得多的app开发体验。因此，Ionic将全力压注到TypeScript上，而不提供ES6的启动器。\n\n摘录自：\n\n\u003e [TypeScript的优势](https://ionicframework.com/docs/developer-resources/typescript/)\n\n## 本教程特色\n\n针对新特性的详细讨论，并与与实例代码结合。TypeScript是在Javascript的基础上，引入了诸多新特性，本教程将逐一讨论这些新特性，并同时编写相应代码加以验证。\n\n## 环境的建立\n\n环境的建立主要由三个文件构成：\n\n+ `package.json` -- NodeJS 的项目文件，该文件包含了项目的各种信息与包依赖，比如项目名称、所有者信息、许可证、git地址等信息，包含各种依赖包等。\n\n```json\n{\n    \"name\": \"typescript-learnings\",\n    \"version\": \"0.1.0\",\n    \"description\": \"TypeScript Learning stuffs.\",\n    \"main\": \"/dist/main.js\",\n    \"scripts\": {\n        \"gulp\": \"gulp \u0026\",\n        \"start\": \"live-server dist/\",\n        \"test\": \"echo \\\"Error: no test specified\\\" \u0026\u0026 exit 1\"\n    },\n    \"repository\": {\n        \"type\": \"git\",\n        \"url\": \"git+https://github.com/gnu4cn/ts-learnings.git\"\n    },\n    \"keywords\": [\n        \"TypeScript\"\n    ],\n    \"author\": \"Peng Hailin, unisko@gmail.com\",\n    \"license\": \"ISC\",\n    \"bugs\": {\n        \"url\": \"https://github.com/gnu4cn/ts-learnings/issues\"\n    },\n    \"homepage\": \"https://github.com/gnu4cn/ts-learnings#readme\",\n    \"devDependencies\": {\n        \"@types/reflect-metadata\": \"^0.1.0\",\n        \"gulp\": \"^4.0.0\",\n        \"gulp-sourcemaps\": \"^2.6.1\",\n        \"gulp-typescript\": \"^5.0.1\",\n        \"gulp-uglify\": \"^3.0.0\",\n        \"live-server\": \"^1.2.0\",\n        \"typescript\": \"^3.4.1\"\n    },\n    \"dependencies\": {}\n}\n```\n\n`package.json`文件是所有NodeJS项目都有的文件，有了该文件，就可以使用`npm -i`命令，在本地安装项目依赖包。于是项目就可以运行起来了。\n\n+ `tsconfig.json` 文件\n\n    该文件表明此NodeJS项目是一个 TypeScript项目，其中包含了`files`、`include`、`exclude`、`compilerOptions`等属性，用于将 TypeScript代码编译为 JavaScript目标代码过程。\n\n```json\n{\n    \"include\": [\n        \"src/*.ts\"\n    ],\n    \"compilerOptions\": {\n        \"noImplicitAny\": true,\n        \"target\": \"es5\",\n        \"outDir\": \"dist/\",\n        \"experimentalDecorators\": true,\n        \"emitDecoratorMetadata\": true,\n        \"types\": [\n            \"reflect-metadata\"\n        ]\n    }\n}\n```\n\n+ `gulpfile.js` 文件\n\n    该文件是 Gulp 自动化工具的配置文件。利用 Gulp 来自动化处理有关编译、打包及SourceMap相关工作。在上面的`package.json`文件中包含了对 `gulp`、`gulp-typescript`的依赖，其中`gulp-typescript`就是 Gulp中的 TypeScript编译器。\n\n```javascript\nvar gulp = require('gulp');\nvar ts = require('gulp-typescript');\n\nvar tsProject = ts.createProject('tsconfig.json');\n\nlet paths = {\n    pages: [\"src/*.html\"]\n};\n\ngulp.task(\"copy-html\", ()=\u003e{\n    return gulp.src(paths.pages)\n        .pipe(gulp.dest(\"dist\"))\n});\n\ngulp.task('tsc', () =\u003e {\n    return gulp.src('src/*.ts')\n                          .pipe(tsProject())\n                          .pipe(gulp.dest('dist'));\n});\n\n// 这里 watch 里必须使用 gulp.series\ngulp.task('watch', () =\u003e {\n    gulp.watch('src/*.ts', gulp.series('tsc'));\n});\n\n\n// 这里必须要有一个 default 任务\ngulp.task('default', gulp.series('copy-html', 'tsc', 'watch'));\n```\n\n有了这三个文件，就意味着环境建立起来了，可以开始TypeScript代码的编写了。`src`目录下的所有`.ts`代码，都将被编译到 `dist`目录下。\n","funding_links":[],"categories":[],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgnu4cn%2Fts-learnings","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fgnu4cn%2Fts-learnings","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fgnu4cn%2Fts-learnings/lists"}