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 学习的随笔的更多相关文章

  1. typeScript学习随笔(一)

    TypeScript学习随笔(一) 这么久了还不没好好学习哈这么火的ts,边学边练边记吧! 啥子是TypeScript  TypeScript 是 JavaScript 的一个超集,支持 es6 标准 ...

  2. TypeScript学习指南--目录索引

    关于TypeScript: TypeScript是一种由微软开发的自由和开源的编程语言.它是JavaScript的一个超集,而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程. TypeS ...

  3. TypeScript 学习一 参数,函数,析构表达式

    1,TypeScript是由谷歌开发的,并且新出的Angular2框架就是谷歌公司由TypeScript语言编写的,所以现在TypeScript是有微软和谷歌一起支持的: 2,TypeScript在j ...

  4. TypeScript 学习资料

    TypeScript 学习资料: 学习资料 网址 TypeScript Handbook(中文版)(推荐) https://m.runoob.com/manual/gitbook/TypeScript ...

  5. Typescript 学习笔记七:泛型

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  6. Typescript 学习笔记六:接口

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  7. Typescript 学习笔记五:类

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  8. Typescript 学习笔记四:回忆ES5 中的类

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

  9. Typescript 学习笔记二:数据类型

    中文网:https://www.tslang.cn/ 官网:http://www.typescriptlang.org/ 目录: Typescript 学习笔记一:介绍.安装.编译 Typescrip ...

随机推荐

  1. LQR (线性二次型调节器)的直观推导及简单应用

    转自:https://blog.csdn.net/heyijia0327/article/details/39270597 本文主要介绍LQR的直观推导,说明LQR目标函数J选择的直观含义以及简单介绍 ...

  2. elf,基于flexbox的响应式CSS框架

    官网地址:http://jrainlau.github.io/elf/项目地址:https://github.com/jrainlau/elf 介绍 取名为"精灵"的elf,是一个 ...

  3. 一个html标签到底包含了多少信息(1)

    先来看一段代码: var dom = document.querySelector('body'); for(var i in dom){ console.log(i,dom[i]) } 可以看到很多 ...

  4. H5 视频播放解决方案

    前两天,美团推出的杨洋H5火爆朋友圈.里面主要的是多段视频播放.暂停.听起来很简单,但是由于腾讯白名单限制,在微信浏览器,qq浏览器,会自动将video标签中非腾讯域名的视频 ,自动全屏,结尾追加视频 ...

  5. Jar 包下载以及 maven jar 包配置

    学习内容: jar包下载是我们必须掌握的一个内容,不管是使用Maven项目还是其他项目,一般都需要引入外部的 jar 包 jar包下载 下载地址(打不开网址的直接百度搜索 maven reposito ...

  6. PowerBI添加中国地图

    可以直接在添加视觉对象中添加 或者用此方法 样子: 添加形状地图地图的"位置""图例" 然后去http://datav.aliyun.com/portal/sc ...

  7. xtrabackup备份和恢复数据脚本

    该脚本用于备份和恢复MySQL数据库. 总结xtrabackup备份的两个坑: 1.在恢复数据的过程中,如果中途出错,则数据将会被破坏,后续很难再恢复. 2.在恢复过程中,如果版本过低,在准备全量数据 ...

  8. JavaScript学习基础2

    ##JavaScript基本对象 1 .function:函数(方法)对象 * 创建: 1.var fun =new Function(形式参数,方法体): 2.function 方法名(参数){ 方 ...

  9. .NET Core(.NET6)中gRPC注册到Consul

    一.简介 上一篇文章介绍了.NET Core 中使用gRPC,在微服务中,我们通常要把服务做成服务注册,服务发现的方式,那么这里来说一下gRPC是如何注册到Consul中的. Consul的安装这里就 ...

  10. Ansible Notes: Tower Credential的本质

    Ansible AWX/Tower credential 的本质 Ansible Tower (社区版本叫AWX)用credential这个资源来对象来存储playbook运行过程中用到的机密信息.比 ...