typscript 语法1
let isDone: boolean = false;
let decLiteral: number = 0xf00d;
let names: string = 'boob';
/** 使用模版字符串 */
let name1: string = `gene`;
let age: number = 37;
let sentence = `Hello, my name is ${name1}I'll be ${age + 1} years old next month `; function error(message: string): never {
throw new Error(message);
}
let str: string = 'nihao';
// 元组类型
let arr1: [number, string] = [123, "aa"];
//枚举类型
enum personm {
age = 1,
height = 2
}
let s: personm = personm.age;
// r任意类型
let num: any = 123;
let oBox: any = document.getElementById('#oBox');
console.log(oBox);
// number 类型, null, undefined
let num1: number | null | undefined; num = 1234; //void类型 表示没有任何类型,一般用于 定义 没有返回值的方法
function run(): void {
console.log('run');
} // 必须要返回 number类型
function run1(): number {
console.log('run');
return 1;
} // 任意类型
var arr2: any[] = ['123', 'asd', 123]; //3.1 TS中 函数的定义
function getInfo(name: string, age: number): string {
return `${name}:${age}`
}
console.log(getInfo('tong', 222));
//匿名函数
let getInfo1 = function (name: string, age: number): string {
return `${name}:${name}`
}
//没有返回值的方法
function run2(): void {
console.log('run');
} //3.2 TS中 可选参数
//es5的形参 和 实参 可以不一样
//注意:age?:number 可选参数 必须放到最后面 function getInfo2(name: string, age?: number): string {
if (age) {
return `${name} --- ${age}`;
} else {
return `${name} ---年龄保密`
}
}
console.log(getInfo2('tong1')) //3.3 默认参数
function getInfo3(name: string, age: number = 22) {
if (age) {
return `${name} --- ${age}`;
} else {
return `${name} ---年龄保密`
}
}
console.log(getInfo3('tong2')) //3.4 剩余参数 // function sum(a:number,b:number,c:number,d:number):number{
// return a+b+c+d;
// }
//三点运算符接受剩余参数 ...
function sum(...result: number[]): number {
let sum = 0;
for (let i = 0; i < result.length; i++) {
sum += result[i];
}
return sum;
} console.log(sum(1, 2, 3, 4, 5, 6, 7, 8)) //3.5 TS 函数的重载
function getInfo4(config: string): string;
function getInfo4(age: number): number;
function getInfo4(name: string, age: number): string; function getInfo4(str: any, age?: any): any {
if (typeof str === 'string') {
return '我叫:' + str;
} else {
return '我的年龄' + str; }
}
//调用
console.log(getInfo4('tong1')); //正确
console.log(getInfo4(20)); //正确
//错误用法
// console.log(getInfo4(true)); //3.6 箭头函数 this 指向的问题,上下文
setTimeout(() => {
// console.log('箭头函数');
}) /**---------------------------es5--------------------------- */
// //es5 里面的继承
// //4.1 简单类
// function person(){
// this.name = 'tong';
// }
// var p = new person();
// console.log(p.name); // //4.2 构造函数和原型链里面增加方法 // function person1(){
// this.name= 'tong1';
// this.age = 20;
// this.run = function(){
// console.log('tong1在 run')
// }
// }
// person1.prototype.sex='男';
// person1.prototype.work= function (){
// console.log('tong1 在工作 ')
// } // var p1 = new person1();
// p1.run(); // //4.3 类里面的静态方法
// function person2(){
// this.name= 'tong2';
// this.age = 20;
// this.run = function(){
// console.log('tong2在 run')
// }
// }
// person2.getInfo = function(){
// console.log('person2的静态方法');
// }
// person2.getInfo(); // //4.4 继承 原型链和对象冒充
// function webPerson(){
// person1.call(this); /** 这就是对象冒充 使用call 函数 */
// }
// var wp = new webPerson();
// wp.run(); /** 对象冒充 只可以 继承构造函数里面的对象和方法 */ // // wp.work();/** 注意! 对象冒充 无法 继承原型链上面的方法 */ // //4.5 原型链继承
// webPerson.prototype = new person1(); // 原型链继承
// var wp1=new webPerson();
// console.log('------------')
// wp1.work();/** 实现原型链继承的好处 既可以继承构造函数的属性方法 也可以继承原型链的方法 */ // //4.6原型链继承的问题 实例化子类的时候 无法给父类传参 // //4.7 !!重点 组合继承的方式 原型链加构造函数的
// function person3(name,age){
// this.name= name;
// this.age = age;
// this.run = function(){
// console.log(this.name + ' 在 run : 原型链加构造函数');
// }
// }
// person3.prototype.sex='男';
// person3.prototype.work= function (){
// console.log('tong1 在工作 ')
// }
// function person3C(name,age){
// person3.call(this,name,age); // 对象冒充继承 实例化子类可以给父类传参
// }
// person3C.prototype = new person3(); // var newP3= new person3C('tong3C',22);
// newP3.run();
/**---------------------------es5 end--------------------------- */ // 5.ts 中定义类
class person4 {
name: string; // 属性 前面省略了publick关键词
constructor(n: string) {// 构造函数 实例化出发的方法
this.name = n;
}
run(): void {
console.log(this.name);
} }
//实例化
var p4 = new person4('tong4');
p4.run(); //5.1 ts 中关于继承的探讨 父类的方法和子类的方法一致
class Web5 extends person4 {
constructor(name: string) {
super(name);// 初始化 父类的构造函数
}
work() {
console.log(`${this.name} 在work`)
}
run() {
console.log(`${this.name} :子类的run`)
}
}
var w1 = new Web5('tong5 class extents继承');
w1.run();
w1.work();
//类的 三种 修饰符
/**
* public : 公有 在当前类里面,子类,类外面都可以访问
* protected : 保护类 在当前类里面/子类里面可以访问,在类外部无法访问
* private : 私有 找类里面可以访问, 子类,类外面都无法访问
*/
// public
// protected
class person6 { // 如果不加修饰符 默认就是公有
public name: string; // 属性 前面省略了publick关键词
protected name2: string; // 保护类型
private name3: string; // 保护类型
constructor(n: string, m: string, o: string) {// 构造函数 实例化出发的方法
this.name = n;
this.name2 = m;
this.name3 = o;
}
run(): void {
console.log(this.name);
console.log(this.name2);
console.log(this.name3);
}
}
class web6 extends person6 {
constructor(n: string, m: string, o: string) {
super(n, m, o);
}
work() {
console.log(`${this.name}:${this.name2}`);
// console.log(`${this.name}:${this.name2}:${this.name3}`); // private 无法访问私有属性
}
}
let w2 = new web6('t1', 't2', 't3');
w2.work();
console.log(w2.name);
// console.log(w2.name2);
class person7 {
public name7: string;
constructor(name: string) {
this.name7 = name;
};
run() { };
work() { }
} //6.0 多态 定义一个方法不去实现,让继承他的子类去继承,每个子类的表现不一样 class person8 {
name: string;
constructor(name: string) {
this.name = name;
};
eat() {
console.log('多态: 定义的空方法');
}
}
class person8a extends person8 {
constructor(name: string) {
super(name)
};
eat() {
console.log('多态: person8a的方法')
}
}
let per8a = new person8a('person8a');
per8a.eat(); // 6.1 抽象方法 抽象类 :他是提供其他类继承的基类,不能被直接实例化
// 用 abstract 关键字定义抽象类和抽象方法,抽象类中的抽象方法不包含具体的实现并 必须在派生类中实现
// abstract 抽象方法只能放在抽象类 里面
//抽象类和抽象方法用来定义标准~~ 子类的基类 s abstract class person9 {
public name: any;
constructor(name: any) {
this.name = name;
};
abstract eat(): any;
}
class person9a extends person9 {
//抽象类的子类必须继承 抽象类的方法
constructor(name: any) {
super(name);
}
eat() {
console.log(this.name);
}
}
let p9 = new person9a('抽象类的子类');
p9.eat(); //7.1属性接口
// ts 中定义方法
function printLabel(label: string): void {
console.log('printLabel:' + label);
} // 对JSON进行约束
function printLabel1(labelJson: { label: string }): void {
console.log('printLabel:' + labelJson);
}
printLabel1({ label: 'a' }); // 正确写法 // 对批量方法传入参数进行约束 接口
//ts 接口
//通过 interface 来定义接口 interface fullName {
firstName: string;
secondName: string;
} function printName(name: fullName) {
// 必须传入对象
console.log(name.firstName + '...' + name.secondName)
} let obj = {
firstName: 'tong1',
secondName: 'tong2',
age: '111',
}
printName(obj); //7.2 接口 可选属性 参数数据可以不一样 interface fullName1 {
firstName: string;
secondName?: string; // 增加 ?号 实现可传可不传
}
function printName1(name: fullName1) {
// 必须传入对象
console.log(name.firstName + '...' + name.secondName)
}
let obj1 = {
firstName: 'tong1',
age: '111',
}
printName1(obj1); // 7.3 案例 ajax 原生 无兼容
interface configData {
type: string;
url: string;
data?: string;
dataType: string;
}; function ajax(config: configData) {
var xhr = new XMLHttpRequest();
xhr.open(config.type, config.url, true); // 异步
xhr.send(config.data);
xhr.onreadystatechange = function () {
if (xhr.readyState == 4 && xhr.status == 200) {
console.log('seccess')
if (config.dataType == 'json') {
console.log(xhr.responseText);
} else {
console.log(xhr.responseText);
}
}
}
}
ajax({
type: 'GET',
url: 'http://a.itying.com/api/productlist',
dataType: 'json',
data: ''
}); // 7.4 函数类型接口 对函数的传入值和返回值进行约束 interface encrypt {
(key: string, value: string): string;
}
let md5: encrypt = function (key: string, value: string): string {
//模拟操作 return key + value;
} console.log(md5('tongmd', 'bb MD5 函数类型接口')); let sha11: encrypt = function (key: string, value: string): string {
return key + value;
} // 7.5 可索引接口 通常对数组对象的约束 let arr = ['asd', 123];
let arra1: number[] = [123, 123];
let arra2: Array<number> = [123, 123]; interface userArr { // 对数组约束的接口
[index: number]: string;
}
let arra3: userArr = ['asd', '123']; // 可索引接口 console.log(arra3[0]); // 7.6 可索引接口 对 对象的约束 interface userObj {
[index: string]: string
} let userObj: userObj = {
name: 'tong1'
}
// 7.7 可索引接口 对 对类的约束 和抽象类相似 interface Animal1 {
name: string eat(str: string): void;
} class dog implements Animal1 {
name: string;
constructor(name: string) {
this.name = name;
}
eat() {
console.log(this.name + '的方法执行');
}
} let doga1 = new dog('牛牛');
doga1.eat(); // 约束方法的 参数 class cat implements Animal1 {
name: string;
constructor(name: string) {
this.name = name;
}
eat(food: string) {
console.log(this.name + '吃' + food);
}
} let cat1 = new cat('小猫');
cat1.eat('鱼'); // 8.0 接口的扩展 interface Animal2 {
eat(): void;
} //实现接口的继承
interface person2 extends Animal2 {
work(): void;
} class programmer {
public name: string;
constructor(name: string) {
this.name = name;
}
coding(code: string) {
console.log(this.name + code);
}
} //继承沿用 多个接口
class web2 extends programmer implements person2 {
// public name: string;
constructor(name: string) {
super(name); // 继承 programmer 这个接口
// this.name = name;
}
eat() {
console.log(this.name + 'eat 方法执行');
}
work() {
console.log(this.name + 'work 方法执行');
}
} let newWeb2 = new web2('接口继承实现');
newWeb2.eat();
newWeb2.work();
newWeb2.coding('写ts code'); //9.0 泛型 一个组件中 可以支持 未来未知的数据类型
// 同时返回多种类型数据 string 和number
// 可以使用any 来实现 多种数据类型的返回 但是放弃了类型检查
function getData<T>(value: T): T { //定义泛型
return value;
} getData<number>(123); //使用泛型 可以限定输入与输出的 数据类型一致
//9.1 泛型类
class minClass { public list: number[] = []; add(num: number) {
this.list.push(num);
} min(): number {
var minNum = this.list[0]; for (let i = 0; i < this.list.length; i++) {
if (minNum > this.list[i]) {
minNum = this.list[i];
}
} return minNum;
}
} var minN = new minClass();
minN.add(9);
minN.add(2);
minN.add(1);
minN.add(10);
console.log(minN.min()); // 类的泛型
class minClass1<T> { public list: T[] = []; add(num: T) {
this.list.push(num);
} min(): T {
var minNum = this.list[0]; for (let i = 0; i < this.list.length; i++) {
if (minNum > this.list[i]) {
minNum = this.list[i];
}
} return minNum;
}
} let minN1 = new minClass1<number>(); // 实例化类
minN1.add(11);
minN1.add(13);
minN1.add(2);
console.log(minN1.min()); //9.3 泛型接口 interface configFn {
(value1: string, value2: string): string;
}
let getDataFn: configFn = function (value1: string, value2: string): string {
return value1 + value2;
} console.log(getDataFn('tong3', 'basd'));
//泛型接口 写法1 interface configFn1 {
<T>(value: T): T;
}
let getDataFn1: configFn1 = function <T>(value: T): T {
return value;
}
getDataFn1<string>('tong4 泛型接口'); //泛型接口 写法2 interface configFn2<T> {
(value: T): T;
}
function getDataFn2<T>(value: T): T {
return value;
} let myGetDataFn2: configFn2<string> = getDataFn2; myGetDataFn2('23');// 正确写法
// myGetDataFn2(12); //与指定的类型不一致 错误写法
typscript 语法1的更多相关文章
- 我的MYSQL学习心得(一) 简单语法
我的MYSQL学习心得(一) 简单语法 我的MYSQL学习心得(二) 数据类型宽度 我的MYSQL学习心得(三) 查看字段长度 我的MYSQL学习心得(四) 数据类型 我的MYSQL学习心得(五) 运 ...
- Swift与C#的基础语法比较
背景: 这两天不小心看了一下Swift的基础语法,感觉既然看了,还是写一下笔记,留个痕迹~ 总体而言,感觉Swift是一种前后端多种语言混合的产物~~~ 做为一名.NET阵营人士,少少多多总喜欢通过对 ...
- 探索C#之6.0语法糖剖析
阅读目录: 自动属性默认初始化 自动只读属性默认初始化 表达式为主体的函数 表达式为主体的属性(赋值) 静态类导入 Null条件运算符 字符串格式化 索引初始化 异常过滤器when catch和fin ...
- [C#] 回眸 C# 的前世今生 - 见证 C# 6.0 的新语法特性
回眸 C# 的前世今生 - 见证 C# 6.0 的新语法特性 序 目前最新的版本是 C# 7.0,VS 的最新版本为 Visual Studio 2017 RC,两者都尚未进入正式阶段.C# 6.0 ...
- Velocity初探小结--velocity使用语法详解
做java开发的朋友一般对JSP是比较熟悉的,大部分人第一次学习开发View层都是使用JSP来进行页面渲染的,我们都知道JSP是可以嵌入java代码的,在远古时代,java程序员甚至在一个jsp页面上 ...
- node.js学习(二)--Node.js控制台(REPL)&&Node.js的基础和语法
1.1.2 Node.js控制台(REPL) Node.js也有自己的虚拟的运行环境:REPL. 我们可以使用它来执行任何的Node.js或者javascript代码.还可以引入模块和使用文件系统. ...
- C#语法糖大汇总
首先需要声明的是"语法糖"这个词绝非贬义词,它可以给我带来方便,是一种便捷的写法,编译器会帮我们做转换:而且可以提高开发编码的效率,在性能上也不会带来损失.这让java开发人员羡慕 ...
- 值得注意的ibatis动态sql语法格式
一.Ibatis常用动态sql语法,简单粗暴用一例子 <select id="iBatisSelectList" parameterClass="java.util ...
- Flex 布局教程:语法篇
作者: 阮一峰 网页布局(layout)是CSS的一个重点应用. 布局的传统解决方案,基于盒状模型,依赖 display属性 + position属性 + float属性.它对于那些特殊布局非常不方便 ...
随机推荐
- ARP命令详解
ARP是一个重要的TCP/IP协议,并且用于确定对应IP地址的网卡物理地址.实用arp命令,我们能够查看本地计算机或另一台计算机的ARP高速缓存中的当前内容.此外,使用arp命令,也可以用人工方式输入 ...
- DllPlugin、DllReferencePlugin 可以提取的第三方库列表
DllPlugin.DllReferencePlugin 可以提取的第三方库列表: 'vue/dist/vue.esm.js', // 'vue/dist/vue.common.js' for web ...
- POJ3177(3352)(边双连通分量)
题目: 原本没有记录桥是谁,而是染色时即时判断的.后来发现不行,因为a去b可能满足low[b]>dfn[a],但b去a就不满足了. 这是因为low和dfn的关系是相对的,仅限于tarjan时的那 ...
- 联想服务器配置 RAID
联想服务器配置 RAID BIOS 中配置 RAID 阵列卡 x3650 和 x3850 一.进入 RAID 1.在开机自检时按 F1 进入 UEFI 配置界面 2.选择 System Setting ...
- led的驱动及测试程序
一.驱动源码 #include <linux/module.h> #include <linux/kernel.h> #include <linux/fs.h> # ...
- 对比两个表中,字段名不一样的SQL
需要包括有几种情况一.A表中有的字段B表无二.B表有的A表无三.两个表字段名不一致的 --------------------------------------------------------- ...
- debian下配置keepalived ha
抄袭自http://blog.51yip.com/server/1417.html,做了一些修改 可以参考http://blog.linuxphp.org/archives/1615/ 备注:NAT模 ...
- 小峰mybatis(2)mybatis传入多个参数等..
一.mybatis传入多个参数: 前面讲传入多个参数都是使用map,hashmap:key value的形式:-- 项目中开发都建议使用map传参: 比如现在通过两个参数,name和age来查询: 通 ...
- java web中获取各种路径
一.获取项目路径: 1) String path = request.getContextPath() :// /TestMyEclipseString basePath = request.getS ...
- 开发框架-APP:Hybird App
ylbtech-开发框架-APP:Hybird App Hybrid App(混合模式移动应用)是指介于web-app.native-app这两者之间的app,兼具“Native App良好用户交互体 ...