中文代码示例之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代码看起来更好理解一点, 编译期的反馈信息对于减少错误很有用.

转载于:https://www.cnblogs.com/program-in-chinese/p/typescript-in-5-minutes-with-sample-code-in-Chinese.html

中文代码示例之5分钟入门TypeScript相关推荐

中文代码示例之Spring Boot 2.0.3问好
上次试用Spring Boot还是两年前: 中文代码示例之Spring Boot 1.3.3演示. 打算用在一个讨论组内小项目上, 于是从官网Building an Application with ...
中文代码示例之Vuejs入门教程(一)
为了检验中文命名在主流框架中的支持程度, 在vuejs官方入门教程第一部分的示例代码中尽量使用了中文命名. 所有演示都在本地测试通过, 源码在这里. 下面省略了很多原教程的说明内容, 而着重于代码示例 ...
python入门代码示例-总算知道python入门代码示例
Python是一种解释型.面向对象.动态数据类型的高级程序设计语言.作为今年来越来越流行的语言,我们该如何学习或者转行学习Python呢,这里小迹为大家介绍如何入门学习Python.以下是小编为你整理 ...
BIO,Socket网络编程入门代码示例,NIO网络编程入门代码示例,AIO 网络编程
BIO,Socket网络编程入门代码示例 1.BIO服务器端程序 package cn.itcast.bio;import java.io.InputStream; import java.io.Ou ...
python代码示例-总算知道python入门代码示例
Python是一种解释型.面向对象.动态数据类型的高级程序设计语言.作为今年来越来越流行的语言,我们该如何学习或者转行学习Python呢,这里小迹为大家介绍如何入门学习Python.以下是小编为你整理 ...
中文代码示例之冒泡算法, 后感
以前探讨过中文命名在业务部分的优势大于算法部分. 今天又一次看到了这个以冒泡算法的例子: 刘然:批判易语言的人是否用过这门语言,批判它的原因又是什么?有些感触. 先尝试对变量命名进行改进, 来看看是否 ...
python词云图代码示例无jieba_Python爬虫入门-jieba库制作词云图
1.钱当然很重要,这我不是不知道:我一天何尝不为钱而受熬苦!可是,我又觉得,人活这一辈子,还应该有些另外的什么才对-- 2.我认为,每个人都有一个觉醒期,但觉醒的早晚决定个人的命运. 3.在这个世界上 ...
可下载：60分钟入门PyTorch（中文翻译全集）
来源:机器学习初学者本文约9500字,建议阅读20分钟官网教程翻译:60分钟入门PyTorch(全集) 前言原文翻译自:Deep Learning with PyTorch: A 60 Minute ...
【Flutter】Future 与 FutureBuilder 异步编程代码示例 ( FutureBuilder 构造函数设置 | 处理 Flutter 中文乱码 | 完整代码示例 )
文章目录一.FutureBuilder 简介二.处理 Flutter 中的中文乱码三.完整代码示例四.相关资源一.FutureBuilder 简介 FutureBuilder 本质是组件 : ...

中文代码示例之5分钟入门TypeScript

后感:

中文代码示例之5分钟入门TypeScript相关推荐

最新文章

热门文章