TypeScript 是 JavaScript 的一个超集,支持 ECMAScript 6 标准

安装TypeScript

  1. npm install -g typescript

编译

  1. tsc app.ts
  1. 1 let message:string = 'holle world';
  2. 2 console.log(message)
  3. 3
  4. 4 class Site{
  5. 5 name():void{
  6. 6 console.log(message)
  7. 7 }
  8. 8 }
  9. 9 let obj = new Site()
  10. 10 obj.name()
  11. 11
  12. 12 // let arr:number[] = [1,2,3]
  13. 13 let arr:Array<number> = [4,5,6]
  14. 14 console.log('数组:',arr)
  15. 15
  16. 16 let oarr:[number,string];
  17. 17 oarr = [1,'a']
  18. 18 console.log('元组:',oarr)
  19. 19
  20. 20 enum Color {Red,Green,Blue};
  21. 21 let c:Color = Color.Blue
  22. 22 console.log('枚举:',c)
  23. 23
  24. 24 let str = '1'
  25. 25 let n:number = <number> <any>str;//断言 <Type>值
  26. 26 console.log(n)
  27. 27
  28. 28 // 接口
  29. 29 interface IPerson{
  30. 30 name:string,
  31. 31 age:number,
  32. 32 sex:boolean,
  33. 33 action:(name:string)=>string
  34. 34 }
  35. 35 let xiaoming:IPerson = {
  36. 36 name:'小明',
  37. 37 age:18,
  38. 38 sex:true,
  39. 39 action:(name):string=>{
  40. 40 return '我的名字叫'+name
  41. 41 }
  42. 42 }
  43. 43 let say:string = xiaoming.action(xiaoming.name)
  44. 44 console.log(say)
  45. 45
  46. 46 // 接口和数组
  47. 47 interface namelist{
  48. 48 [index:number]:number
  49. 49 }
  50. 50 let iArr:namelist=[1,2,3];
  51. 51 // iArr["a"] = 123 //可编译通过 运行报错
  52. 52 console.log(iArr)
  53. 53
  54. 54 // 接口继承
  55. 55 interface Musician extends IPerson{
  56. 56 instrument:string
  57. 57 }
  58. 58 let xiaohong:Musician = {
  59. 59 name:'小红',
  60. 60 age:12,
  61. 61 sex:false,
  62. 62 instrument:'二胡',
  63. 63 action:(str):string=>{
  64. 64 return str
  65. 65 }
  66. 66 };
  67. 67 let say1:string = xiaohong.action('我会拉二胡');
  68. 68 console.log(xiaohong.name,say1)
  69. 69
  70. 70
  71. 71 /*
  72. 72 interface type
  73. 73 相同点
  74. 74 interface 和 type 都可以描述一个对象或者函数
  75. 75 不同点
  76. 76 type 可以声明基本类型别名,联合类型,元组等类型 进行赋值
  77. 77 interface 能够声明合并
  78. 78 */
  79. 79 type myType = {
  80. 80 name:string,
  81. 81 size:number
  82. 82 }
  83. 83 let isType:myType = {
  84. 84 name:'类型',
  85. 85 size:1
  86. 86 }
  87. 87 console.log(isType)
  88. 88
  89. 89 type alerType = 'success' | 'error' | 'info'
  90. 90 let alt:alerType;
  91. 91 // alt = 'abc' //报错
  92. 92 alt = 'success'
  93. 93 console.log('type',alt)
  94. 94
  95. 95
  96. 96 // 类
  97. 97 class Person{
  98. 98 name:string;
  99. 99 constructor(name:string){
  100. 100 this.name = name
  101. 101 }
  102. 102 sayHi():void{
  103. 103 console.log('hi,我是'+this.name)
  104. 104 }
  105. 105 }
  106. 106 let xm = new Person('小明');
  107. 107 xm.sayHi()
  108. 108
  109. 109 // 泛型
  110. 110 interface JJ{
  111. 111 JJsize:number,
  112. 112 JJlength:number
  113. 113 }
  114. 114 interface Human{
  115. 115 name:string,
  116. 116 age:number,
  117. 117 sex:string
  118. 118 }
  119. 119 function create<T extends JJ>(what:T):T{
  120. 120 return what
  121. 121 }
  122. 122
  123. 123 let ren = create({
  124. 124 name:'小明',
  125. 125 age:18,
  126. 126 sex:'男',
  127. 127 JJsize:12,
  128. 128 JJlength:18
  129. 129 })
  130. 130 console.log(ren)
  131. 131
  132. 132 function create1<T>(c: { new ()}): T {
  133. 133 return new c()
  134. 134 }
  135. 135 let cArr = create1<Array<number>>(Array)
  136. 136 cArr[0] = 1
  137. 137 // cArr[1] = '2' //报错
  138. 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. CSS 面试题总结

    CSS 中类 (classes) 和 ID 的区别. 书写上的差别:class名用"."号开头来定义,id名用"#"号开头来定义: 优先级不同(权重不同) 调用 ...

  2. EDM响应式邮件框架:MJML

    概述 新课题研究:响应式邮件框架MJML(MJML官网:https://mjml.io/)姐妹篇: EDM响应式邮件框架:Formerly Ink 介绍 MJML是一种标记语言,设计用于轻松实现一个响 ...

  3. 多页面共用sessionStorage的实现

    sessionStorage的局限:   sessionStorage是页面级别的,仅在一个标签页生效,如果同一个浏览器同时打开多个标签页,且都访问同一个域名,sessionStorage是不会在这多 ...

  4. IDEA 生成返回值对象快捷键Ctrl+Alt+V失效

    在IDEA上运用快捷键返回对象(Ctrl+Alt+V)的时候一直无效,找了很久的问题,发现是有快捷键冲突,发现QQ音乐快捷键与IDEA冲突了,把那处改掉或者关闭即可. 所以边敲代码边听音乐也要注意一下

  5. Spring Boot-@Configuration注解

    @Configuration:指明当前类是一个配置类,就是来替代spring的配置文件 @Configuration public class MyConfigFile { @Bean public ...

  6. Spring-AOP动态代理技术(底层代码)

    1.JDK代理:基于接口的动态代理技术 目标对象必须有接口,目标对象有什么方法,目标接口就有什么方法, 运行期间基于接口动态生成代理对象,所以代理对象也就有目标对象同样的方法. 注意:以下代码只是底层 ...

  7. 1903021116—吉琛—Java第七周作业—客户类测试

    项目 内容 课程班级博客链接 19信计班 这个作业要求链接 第七周作业链接 博客名称 学号-姓名-Java第七周作业-客户类测试 要求 每道题要有题目,代码(使用插入代码,不会插入代码的自己查资料解决 ...

  8. 【Vue3+Express实战】项目开发环境搭建

    大家好,我是半夏,一个刚刚开始写文的沙雕程序员.如果喜欢我的文章,可以关注 点赞 加我微信:frontendpicker,一起学习交流前端,成为更优秀的工程师-关注公众号:搞前端的半夏,了解更多前端知 ...

  9. EFCore 的 DbFirst 模式

    1 前言 EF6 时代,可以通过界面操作,添加数据库实体. EF Core 需要通过 CLI 来进行该操作,具体请参考EF Core官方文档:反向工程. 2 前置条件 PMC 工具(仅限 Visual ...

  10. .NET Core企业微信网页授权登录

    1.开发前准备 参数获取 corpid 每个企业都拥有唯一的corpid,获取此信息可在管理后台"我的企业"-"企业信息"下查看"企业ID" ...