TypeScript 学习的随笔
TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准
安装TypeScript
npm install -g typescript
编译
tsc app.ts
1 let message:string = 'holle world';
2 console.log(message)
3
4 class Site{
5 name():void{
6 console.log(message)
7 }
8 }
9 let obj = new Site()
10 obj.name()
11
12 // let arr:number[] = [1,2,3]
13 let arr:Array<number> = [4,5,6]
14 console.log('数组:',arr)
15
16 let oarr:[number,string];
17 oarr = [1,'a']
18 console.log('元组:',oarr)
19
20 enum Color {Red,Green,Blue};
21 let c:Color = Color.Blue
22 console.log('枚举:',c)
23
24 let str = '1'
25 let n:number = <number> <any>str;//断言 <Type>值
26 console.log(n)
27
28 // 接口
29 interface IPerson{
30 name:string,
31 age:number,
32 sex:boolean,
33 action:(name:string)=>string
34 }
35 let xiaoming:IPerson = {
36 name:'小明',
37 age:18,
38 sex:true,
39 action:(name):string=>{
40 return '我的名字叫'+name
41 }
42 }
43 let say:string = xiaoming.action(xiaoming.name)
44 console.log(say)
45
46 // 接口和数组
47 interface namelist{
48 [index:number]:number
49 }
50 let iArr:namelist=[1,2,3];
51 // iArr["a"] = 123 //可编译通过 运行报错
52 console.log(iArr)
53
54 // 接口继承
55 interface Musician extends IPerson{
56 instrument:string
57 }
58 let xiaohong:Musician = {
59 name:'小红',
60 age:12,
61 sex:false,
62 instrument:'二胡',
63 action:(str):string=>{
64 return str
65 }
66 };
67 let say1:string = xiaohong.action('我会拉二胡');
68 console.log(xiaohong.name,say1)
69
70
71 /*
72 interface type
73 相同点
74 interface 和 type 都可以描述一个对象或者函数
75 不同点
76 type 可以声明基本类型别名,联合类型,元组等类型 进行赋值
77 interface 能够声明合并
78 */
79 type myType = {
80 name:string,
81 size:number
82 }
83 let isType:myType = {
84 name:'类型',
85 size:1
86 }
87 console.log(isType)
88
89 type alerType = 'success' | 'error' | 'info'
90 let alt:alerType;
91 // alt = 'abc' //报错
92 alt = 'success'
93 console.log('type',alt)
94
95
96 // 类
97 class Person{
98 name:string;
99 constructor(name:string){
100 this.name = name
101 }
102 sayHi():void{
103 console.log('hi,我是'+this.name)
104 }
105 }
106 let xm = new Person('小明');
107 xm.sayHi()
108
109 // 泛型
110 interface JJ{
111 JJsize:number,
112 JJlength:number
113 }
114 interface Human{
115 name:string,
116 age:number,
117 sex:string
118 }
119 function create<T extends JJ>(what:T):T{
120 return what
121 }
122
123 let ren = create({
124 name:'小明',
125 age:18,
126 sex:'男',
127 JJsize:12,
128 JJlength:18
129 })
130 console.log(ren)
131
132 function create1<T>(c: { new ()}): T {
133 return new c()
134 }
135 let cArr = create1<Array<number>>(Array)
136 cArr[0] = 1
137 // cArr[1] = '2' //报错
138 console.log(cArr)
关于声明文件:https://www.runoob.com/typescript/ts-ambient.html
搜索
复制
TypeScript 学习的随笔的更多相关文章
- typeScript学习随笔(一)
TypeScript学习随笔(一) 这么久了还不没好好学习哈这么火的ts,边学边练边记吧! 啥子是TypeScript TypeScript 是 JavaScript 的一个超集,支持 es6 标准 ...
- TypeScript学习指南--目录索引
关于TypeScript: TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程. TypeS ...
- TypeScript 学习一 参数,函数,析构表达式
1,TypeScript是由谷歌开发的,并且新出的Angular2框架就是谷歌公司由TypeScript语言编写的,所以现在TypeScript是有微软和谷歌一起支持的: 2,TypeScript在j ...
- TypeScript 学习资料
TypeScript 学习资料: 学习资料 网址 TypeScript Handbook(中文版)(推荐) https://m.runoob.com/manual/gitbook/TypeScript ...
- Typescript 学习笔记七:泛型
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- Typescript 学习笔记六:接口
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- Typescript 学习笔记五:类
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- Typescript 学习笔记四:回忆ES5 中的类
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
- Typescript 学习笔记二:数据类型
中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...
随机推荐
- 汽车最强大脑ECU和单片机是什么关系
先上图一张,据说这是某个F1赛车的动力总成ECU. 定睛一看,这不就是两个英飞凌的单片机的合体嘛. ECU的定义 ECU原来指的是engine control unit,即发动机控制单元,特指电喷发动 ...
- 决策树算法2:(增益比率C4.5)
最重要的是第一个 改进1:信息增益率代替信息增益来选择属性 改进2:连续属性与分裂点 计算的是以候选点(划分点)划分的划分点的条件信息熵 改进三:缺失值处理 众数:概率值-缺失值将缺失值当作单独分类, ...
- 谷歌地图 API 开发之信息窗口
信息窗口 简介 InfoWindow 在地图上方给定位置的弹出窗口中显示内容(通常为文本或图像).信息窗口具有一个内容区域和一个锥形柄.柄顶部与地图上的某指定位置相连. 通常,您会将信息窗口附加到标记 ...
- 【Android开发】控件外边框自定义
1.在drawable里面新建自定义的资源文件shape <?xml version="1.0" encoding="utf-8"?> <sh ...
- Eclipse的视窗和视图概述、Eclipse工作空间的基本配置
Eclipse的视窗和视图概述视窗 每一个基本的窗体被称为视窗 * PackageExplorer 显示项目结构,包,类,及资源 * Outline 显示类的结构,方便查找,识别,修改 * C ...
- 项目中常用到的布局 flex
1. 没header,footer固定 html<div class="page"> <div class="top"> <div ...
- 解决github上不去
github上不去 在hosts文件中加入下列IP,保存即可生效. !!!!!注意!!!!! 网站对应的IP需要去[https://www.ipaddress.com/]网站查询, 可能与下面给出的不 ...
- 【面试普通人VS高手系列】Fail-safe机制与Fail-fast机制分别有什么作用
前段时间一个小伙伴去面试,遇到这样一个问题. "Fail-safe机制与Fail-fast机制分别有什么作用" 他说他听到这个问题的时候,脑子里满脸问号.那么今天我们来看一下,关于 ...
- Vue快速入门(一)
目录 Vue快速入门(一) 介绍 Vue.js 是什么 M-V-VM思想 安装 CDN引入 下载到本地 快速使用 双向数据绑定测试 模板语法 插值语法 指令 文本指令 v-html:让HTML渲染成页 ...
- C语言基础部分练习(http://acm.hgnu.edu.cn)
前言 最近有朋友和同学找我要c语言基础练习答案,为了方便分享,放在我的博客上了,如果对你确实有帮助,可以考虑点下赞或打赏哦(都能通过,没有专注于搞算法,所以有的地方可以优化,欢迎在评论区留言) A. ...