中文代码示例之5分钟入门TypeScript
Typescript官方文档起的这个噱头名字: TypeScript in 5 minutes, 虽然光看完文章就不止5分钟...走完整个文档流水账如下(代码编辑器用的是VS Code)
源码在: program-in-chinese/typescript_in_5_min_zh
第一个TypeScript程序
function 问好(那谁) {
return "吃了么, " + 那谁;
}
let 路人 = "打酱油的";
document.body.innerHTML = 问好(路人);
运行
tsc 问好.ts
编译生成"问好.js"文件.
添加参数类型
function 问好(那谁: string) {
return "吃了么, " + 那谁;
}
如果'那谁'的类型不符, 比如是数组类型[0,1,2], 编译时会报错, 挺好:
问好.ts(7,30): error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.
添加接口
interface 人 {
姓: string;
名: string;
}
function 问好(那谁: 人) {
return "吃了么, " + 那谁.姓 + 那谁.名;
}
let 路人 = {姓: "大", 名: "黄"};
这里路人的"形状"符合"人", 类型就被判定为相符.
自己误写成了:
function 问好(那谁: 人) {
return "吃了么, " + 人.姓 + 人.名;
}
编译提示'人'是个类型而不是值, 挺好:
问好.ts(7,20): error TS2693: '人' only refers to a type, but is being used as a value here.
添加类
class 学生 {
全名: string;
constructor(public 姓: string, public 名: string) {
this.全名 = 姓 + 名;
}
}
interface 人 {
姓: string;
名: string;
}
function 问好(那谁: 人) {
return "吃了么, " + 那谁.姓 + 那谁.名;
}
let 路人 = new 学生("大", "黄");
官方文档说添加class之后编译生成的js文件与没有class的相同, 这里不解, 实验结果是不同的.
运行第一个网络应用
为了检验js文件, 添加HTML文件:
<!DOCTYPE html>
<html>
<head><title>TypeScript你好</title></head>
<body>
<script src="问好.js"></script>
</body>
</html>
最后一个插曲:
html文件在Chrome中打开显示正确:
吃了么, 大黄
但在火狐(Firefox)浏览器中打开时报错:
The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.
%E9%97%AE%E5%A5%BD.html
将View->TextEncoding从Western改为Unicode后显示正确.
后感:
tsc编译好慢!
TypeScript代码看起来更好理解一点, 编译期的反馈信息对于减少错误很有用.
中文代码示例之5分钟入门TypeScript的更多相关文章
- 2018-06-21 中文代码示例视频演示Python入门教程第五章 数据结构
知乎原链 续前作: 中文代码示例视频演示Python入门教程第四章 控制流 对应在线文档: 5. Data Structures 这一章起初还是采取了尽量与原例程相近的汉化方式, 但有些语义较偏(如T ...
- 2018-06-20 中文代码示例视频演示Python入门教程第四章 控制流
知乎原链 续前作: 中文代码示例视频演示Python入门教程第三章 简介Python 对应在线文档: 4. More Control Flow Tools 录制中出了不少岔子. 另外, 输入法确实是一 ...
- 2018-06-20 中文代码示例视频演示Python入门教程第三章 简介Python
知乎原链 Python 3.6.5官方入门教程中示例代码汉化后演示 对应在线文档: 3. An Informal Introduction to Python 不知如何合集, 请指教. 中文代码示例P ...
- 2017-10-31 中文代码示例教程之Vuejs入门&后续计划
"中文编程"知乎专栏原链 为了检验中文命名在主流框架中的支持程度, 这里把vuejs官方入门教程第一部分的示例代码中尽量使用了中文命名. 过程中有一些发现, 初步看来Vuejs对中 ...
- 中文代码示例之Angular入门教程尝试
原址: https://zhuanlan.zhihu.com/p/30853705 原文: 中文代码示例教程之Angular尝试 为了检验中文命名在Angular中的支持程度, 把Angular官方入 ...
- 2017-11-07 中文代码示例之Angular入门教程尝试
"中文编程"知乎专栏原址 原文: 中文代码示例教程之Angular尝试 为了检验中文命名在Angular中的支持程度, 把Angular官方入门教程的示例代码中尽量使用了中文命名. ...
- 中文代码示例之Vuejs入门教程(一)
原址: https://zhuanlan.zhihu.com/p/30917346 为了检验中文命名在主流框架中的支持程度, 在vuejs官方入门教程第一部分的示例代码中尽量使用了中文命名. 所有演示 ...
- 2017-11-09 中文代码示例之Vuejs入门教程(一)
"中文编程"知乎专栏原链 为了检验中文命名在主流框架中的支持程度, 在vuejs官方入门教程第一部分的示例代码中尽量使用了中文命名. 所有演示都在本地测试通过, 源码在这里. 下面 ...
- 2018-08-11 中文代码示例之Spring Boot 2.0.3问好
上次试用Spring Boot还是两年前: 中文代码示例之Spring Boot 1.3.3演示. 打算用在一个讨论组内小项目上, 于是从官网Building an Application with ...
随机推荐
- pytest进阶之配置文件
前言 pytest配置文件能够改变pytest框架代码的运行规则.比如修改pytest收集用例的规则,添加命令行参数等等!下面我们来一一讲解常用的一些配置项 Help 通过命令pytest --hel ...
- Vue.js 牛刀小试（持续更新~~~）
一.前言 这个系列的文章开始于今年9月从上一家公司辞职后,在找工作的过程中,觉得自己应该学习一些新的东西,从前几章的更新日期也可以看出,中间隔了很长的时间,自己也经历了一些事情,既然现在已经稳定了,就 ...
- Docker 快速开始
1. 概念 对于开发人员和系统管理员来说,Docker是一个使用容器开发.部署和运行应用程序的平台.使用Linux容器部署应用程序称为容器化.容器并不新鲜,但是将它们用于轻松部署应用程序却很新鲜. ...
- web项目自定义路由_实现静态资源URL控制
前言: IIS会默认把:图片.JS.HTML.CSS这些文件当成静态资源处理,为了减少服务器压力,默认这些静态资源是不走URL路由规则控制的. 作为小白及初学者,本人对这些了解甚少,补充基础知识吧: ...
- 引用provinces.js的三级联动
第一次写随笔 应该写的不是太好 请多多见谅 我这次是在网上发现了一个三级联动 也是给新人一个福利 这个是你需要新建个 JavaScript 文件 并复制到你新建的文件里面 var pr ...
- .net MVC +EF+VUE做回合制游戏（一）
刚毕业的新人,工作的时候试过用.net 框架,但是我发现写的前端代码都非常多,要写很多很多的原生,然后最近在看vue.js觉得还不错,可以减少前端很多dom操作. 至于做的东西我是想做一个游戏,一个回 ...
- Java设置PDF有序、无序列表
文档中的设置有序或无序列表是一种反应内容上下级关系或者内容相同属性的方式,与单纯的文字叙述相比,它能有效增强文档内容的条理性,突出重点.因此,本文将分享通过Java编程在PDF文档中设置有序或无序列表 ...
- Markdown 语法文档
Markdown 语法文档 前言 Markdown 是一种轻量级标记语言,创始人为約翰・格魯伯(英语:John Gruber); 它允许人们 "使用易读易写的纯文本格式编写文档,然后转换成有 ...
- Xapian索引-文档检索过程分析之匹配百分比
本文属于文档检索过程分析的一部分,重点分析文档匹配百分比(percent)的计算过程. 1 percent是什么? 我们之前分析的检索demo: Xapian::Query term_one = Xa ...
- [Abp vNext 源码分析] - 1. 框架启动流程分析
一.简要说明 本篇文章主要剖析与讲解 Abp vNext 在 Web API 项目下的启动流程,让大家了解整个 Abp vNext 框架是如何运作的.总的来说 ,Abp vNext 比起 ABP 框架 ...