中文代码示例之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 ...
随机推荐
- “崩溃了？不可能，我全 Catch 住了” | Java 异常处理
前言 今天我们来讨论一下,程序中的错误处理. 在任何一个稳定的程序中,都会有大量的代码在处理错误,有一些业务错误,我们可以通过主动检查判断来规避,可对于一些不能主动判断的错误,例如 RuntimeEx ...
- 让 .NET 更方便的导入导出 Excel
让 .Net 更方便的导入导出Excel Intro 因为前一段时间需要处理一些 excel 数据,主要是导入/导出操作,将 Excel 数据转化为对象再用程序进行处理和分析,没有找到比较满意的库,于 ...
- 模块使用：time、datetime、calendar、sys、os、os.path、normcase和normapath、random、json、pickle
## time:时间 时间戳(timestamp):time.time() 延迟线程的运行:time.sleep(secs) (指定时间戳下的)当前时区时间:time.localtime([secs] ...
- php一致性hash算法的应用
阅读这篇博客前首先你需要知道什么是分布式存储以及分布式存储中的数据分片存储的方式有哪些? 分布式存储系统设计(2)—— 数据分片 阅读玩这篇文章后你会知道分布式存储的最优方案是使用 一致性hash算法 ...
- Flex很难？一文就足够了
Flexible Box 是什么 布局的传统解决方案,基于盒状模型,依赖 display 属性 + position属性 + float属性.它对于那些特殊布局非常不方便,比如,垂直居中就不容易实 ...
- box-decoration-break属性
box-decoration-break属性可以指定元素片段在跨行.跨列或跨页(如打印)时候的样式渲染表现.默认情况下,元素的跨行或跨列渲染都是裁剪分割,各得一部分.举个例子<div class ...
- Angular（03）-- lint风格规范和WebStorm小技巧
在开始讲 Angular 各个核心知识点之前,想先来讲讲开发工具 WebStorm 的一些配置以及相应配置文件如 tslint.json 的配置. 因为我个人比较注重代码规范.代码风格,而对于这些规范 ...
- VS2015编译GEOS的debug和release版本
目前GEOS最新的3.7.1版本支持camke进行编译.经过尝试发现通过cmake生成的工程在vs2015下面编译的时候还是存在问题,而且在中文网上也没找到解决方案. 所以还是采用了nmake进行编译 ...
- IIS Express 配置缓存位置
Please refer to the three configure files to check if they contains the rule setting. "%Program ...
- 【RL-TCPnet网络教程】第39章 RL-TCPnet之TFTP服务器
第39章 RL-TCPnet之TFTP服务器 本章节为大家讲解RL-TCPnet的TFTP服务器应用,学习本章节前,务必要优先学习第38章的TFTP基础知识.有了这些基础知识之后,再搞本章节会 ...