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. .NET Core Ecosystem

    .NET .NET Blog Application Models Web Mobile Desktop Microservices Gaming Machine Learning Cloud Int ...

  2. javascript 理解和使用回调函数

    在javascript中,function是内置的类对象,也就是说它是一种类型的对象,可以和其他String.Array.Number.Objec类的对象一样用于内置对象的管理.因为function实 ...

  3. SQL之创建表

    1.创建表------ (方法一)-------create table Persons(id NUMBER,                                       age NU ...

  4. 前端面试题整理——手写flatern摊平数组

    // flatern 是摊平数组 function flat(arr) { const isDeep = arr.some(item => item instanceof Array) if(! ...

  5. SQList基础+ListView基本使用

    今日所学: SQList基础语法 SDList下载地址 SQLite Download Page SQList安装教程SQLite的安装与基本操作 - 极客开发者-博客 ListView用法 没遇到什 ...

  6. vue-cli打包后dist文件运行空白和背景图显示问题详解

    1.文件引用路径.我们直接运行打包后的文件夹中的index.html文件,会看到网页一片空白,f12调试,全是css,js路径引用错误的问题. 解决:到config文件夹中打开index.js文件. ...

  7. 《头号玩家》AI电影调研报告(二)

    四. 涉及前沿技术及与现实的交互 1.VR技术 在影片中,斯皮尔伯格用他认为未来的VR虚拟技术为我们创造了众多精彩的画面,令人佩服其对科技的预见性.其中好多的装备特别引人注目,部分也在现实中存在:VR ...

  8. 前端CSS浮动、定位、溢出、z-index、透明度

    一.浮动float 在 CSS 中,任何元素都可以浮动. 浮动元素会生成一个块级框,而不论它本身是何种元素. 关于浮动的两个特点: 浮动的框可以向左或向右移动,直到它的外边缘碰到包含框或另一个浮动框的 ...

  9. DevExpress控件与VS和.NET各个版本的支持情况

    如下图所示,绿色Yes代表支持,红色No代表不支持.对于有些人觉得装了dev后,vs工具箱没有,一般都是以下两大问题: 1.要么你的Dev的版本不支持你当前的VS版本,没有很正常. 2.要么你的项目的 ...

  10. Apache Doris ODBC外表数据库主流版本及其ODBC版本对应关系

    本文是在CentOS 7.9下测试通过 使用的Doris是:0.15.0 unixODBC版本是:2.3.1 1.PostgreSQL 以下是PostgreSQL数据库版本和PostgreSQL OD ...