中文代码示例之5分钟入门TypeScript
发布日期:2021-06-29 15:30:24
浏览次数:2
分类:技术文章
本文共 1546 字,大约阅读时间需要 5 分钟。
Typescript官方文档起的这个噱头名字: , 虽然光看完文章就不止5分钟…走完整个文档流水账如下(代码编辑器用的是VS Code)
源码在:
第一个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文件:
TypeScript你好
最后一个插曲:
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://codeinchinese.blog.csdn.net/article/details/85844287 如侵犯您的版权,请留言回复原文章的地址,我们会给您删除此文章,给您带来不便请您谅解!
发表评论
最新留言
逛到本站,mark一下
[***.202.152.39]2024年04月03日 11时25分26秒
关于作者
喝酒易醉,品茶养心,人生如梦,品茶悟道,何以解忧?唯有杜康!
-- 愿君每日到此一游!
推荐文章
centos7 基于rsync+inotify 实现定时备份
2019-04-29
指定IP进行 文件的分发
2019-04-29
基于http搭建本地yum仓库
2019-04-29
常规邮件基础
2019-04-29
邮件基础之 -- SMTP协议
2019-04-29
Java设计模式--责任链模式
2019-04-29
OpenCV的cvLoadImage函数
2019-04-29
OpenCV中与matlab中相对应的函数
2019-04-29
C/C++中二维数组作函数形参时,调用函数时,可传递的实参类型的小结
2019-04-29
cvGetSubRect与cvMul用法
2019-04-29
opencv图像处理梯度边缘和角点
2019-04-29
Caffe源码中blob文件分析
2019-04-29
OpenCV 图像采样 插值 几何变换
2019-04-29
图像处理-仿射变换 AffineTransform
2021-07-02
图像二值化----otsu(最大类间方差法、大津算法)
2021-07-02
图像二值化----otsu(最大类间方差法、大津算法)(二)
2021-07-02
OpenCV编程案例:使用轮廓函数检测连通区域
2021-07-02
opencv使用cvFindContours提取联通域
2021-07-02
C++中MessageBox的常见用法
2021-07-02
ordfilt2函数功能说明
2021-07-02