TypeScript

入门
- 使用
- 数据类型
- - 基本数据类型
- TS新增类型
- 类型断言
- TS class类
- 接口 interface
- - 属性类接口
  - 函数类型接口
  - 类类型接口
  - 接口的继承

入门

类型检测，相比javascript，在TS中允许你为变量指定类型，有更多语法提示。

类型注解：变量后跟 :number，string等数据类型，约定了什么类型，就只能给变量赋值该类型的值，否则，就会报错

使用

安装：npm install -g typescript

编译：tsc xxx.ts

热编译：tsc -w xxx.ts

初始化：tsc --init

数据类型

基本数据类型

布尔值

let isDone：boolean = false；

数字

let sun：number = 1；

字符串

let str：string = “string”；
let sentence: string = `Hello, my name is ${ name }.

数组

let arr: Array<number> = [1,2];//允许数组内有数值
let a: [string] = ['1']; // 只允许数组内有1个字符串
let a1: string[] = ['1','2'];//只允许数组内有字符串
let b: any[] = [1,'2', {name:1}];//允许数组内有任意值

Null undefined

默认情况下null和undefined是所有类型的子类型

然而，当你指定了--strictNullChecks标记，null和undefined只能赋值给void和它们各自。

TS新增类型

元组 Tuple

元组类型允许表示一个已知元素数量和类型的数组，
各元素的类型不必相同。

let x: [string, number];  // 数组有两个元素，类型为字符串，数字x = ['hello', 10]; // OKx = [10, 'hello']; // Error//超出元组定义的值，只有类型允许的才可接受
//我们称其为联合类型
x[3] = 'world'; // OK, 字符串可以赋值给(string | number)类型console.log(x[5].toString()); // OK, 'string' 和 'number' 都有 toStringx[6] = true; // Error, 布尔不是(string | number)类型

枚举 enum

枚举类型可以为一组数值赋予友好的名字。

enum Color { red,green=2,blue=4};
let arr:Color=Color;
console.log(arr);
//元素标号（下标）默认从0开始
//{0: 'red', 2: 'green', 4: 'blue', red: 0, green: 2, blue: 4}// 你可以根据下标获取元素，也可以反之用值获取其标示
console.log(arr[2]); // green
console.log(arr['green']);//2

任意值 any

any代表它可以是任意类型，在不清楚变量的类型时可以使用。

let Any: any = 123;
Any = '123';
Any = false;// 包含任意类型的数组
let Arr: <any> = [1,'2',true];

空值 void
void类型像是与any类型相反，它表示没有任何类型。当一个函数没有返回值时，你通常会见到其返回值类型是void

function fn(e): void {console.log('没有返回值');
}//只能为它赋予undefined和null
let v：void = null；

Never
never类型表示的是那些永不存在的值的类型（抛出错误）

never类型是任何类型的子类型，也可以赋值给任何类型；

然而，没有类型是never的子类型或可以赋值给never类型（除了never本身之外）。即使any也不可以赋值给never。

// 返回never的函数必须存在无法达到的终点
function error(message: string): never {throw new Error(message);
}// 推断的返回值类型为never
function fail() {return error("Something failed");
}// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {while (true) {}
}

类型断言

相当于告诉编译器，
“相信我，我知道自己在干什么”
“你不要帮我检查了, 相信我，它就是这个类型”
（通过原本不被通过的类型赋值）

函数

function 函数名(参数列表): 返回值类型 {函数体 ...[return 返回值;]
}//可选参数 ?: 代表参数可不传。可选参数必须配置到参数的最后面
function fn(str:string,arr?:number):string {return xxx;
}

TS class类

类的定义

class Person {name: string;//属性，前面省略了public关键词constructor(n: string) {//构造函数，实例化类的时候触发的方法this.name = n;//使用this关键字为当前类的name属性赋值}run(): void {//方法console.log(this.name+ "在跑步");}
}var p = new Person("张三");
p.run();

类的继承

类的继承：在 TypeScript 中要想实现继承使用 extends 关键字，只要一旦实现了继承关系，那么子类中便拥有了父类的属性和方法，而在执行方法过程中，首先从子类开始找，如果有，就使用，如果没有，就去父类中找。类的继承只能单向继承。

class Person {name: string;//父类属性，前面省略了public关键词constructor(n: string) {//构造函数，实例化父类的时候触发的方法this.name = n;//使用this关键字为当前类的name属性赋值}run(): void {//父类方法console.log(this.name + "在跑步");}
}//中国人这个类继承了人这个类
class Chinese extends Person {age: number;//子类属性constructor(n: string, a: number) {//构造函数，实例化子类的时候触发的方法super(n);//使用super关键字调用父类中的构造方法this.age = a;//使用this关键字为当前类的age属性赋值}speak(): void {//子类方法super.run();//使用super关键字调用父类中的方法console.log(this.name + "说中文");}
}var c = new Chinese("张三", 28);
c.speak();

修饰符

TypeScript 在class类里面定义属性的时候给我们提供了三种修饰符

public：公有类型，在当前类里面、子类、类外面都可以访问
protected：保护类型，在当前类里面、子类里面可以访问，在类外部没法访问
private：私有类型，在当前类里面可以访问，子类、类外部都没法访问

      注意：如果属性不加修饰符，默认就是公有（public）。

静态属性

被静态修饰符修饰的属性就是静态属性，静态属性可以通过类名直接调用。

class Person {name: string;//属性，前面省略了public关键词static sex: string = "男";//被静态修饰符static修饰的属性constructor(n: string) {//构造函数，实例化类的时候触发的方法this.name = n;}run(): void {//方法console.log(this.name+ "在跑步");}
}console.log(Person.sex);

静态方法

静态方法：被静态修饰符修饰的方法就是静态方法，静态方法可以通过类名直接调用，但是在静态方法内部，不能直接调用当前类的非静态属性、非静态方法。

class Person {name: string;//属性，前面省略了public关键词static sex: string = "男";//被静态修饰符static修饰的属性constructor(n: string) {//构造函数，实例化类的时候触发的方法this.name = n;}run(): void {//方法console.log(this.name + "在跑步");}static print(): void {//被静态修饰符static修饰的方法// console.log('姓名：' + this.name);//错误console.log('性别：' + Person.sex);//正确// this.run();//错误}
}Person.print();

抽象类

抽象类
TypeScript 中的抽象类：它是提供其他类继承的基类，不能直接被实例化。

用abstract关键字定义抽象类和抽象方法，抽象类中的抽象方法不包含具体实现并且必须在派生类（也就是其子类）中实现，abstract抽象方法只能放在抽象类里面。

我们常常使用抽象类和抽象方法用来定义标准。

//动物抽象类，所有动物都会跑（假设），但是吃的东西不一样，所以把吃的方法定义成抽象方法
abstract class Animal {name: string;constructor(name: string) {this.name = name;}abstract eat(): any;//抽象方法不包含具体实现并且必须在派生类中实现run() {console.log(this.name + "会跑")}
}class Dog extends Animal {constructor(name: string) {super(name);}eat(): any {//抽象类的子类必须实现抽象类里面的抽象方法console.log(this.name + "吃骨头");}
}var d: Dog = new Dog("小狼狗");
d.eat();class Cat extends Animal {constructor(name: string) {super(name);}eat(): any {//抽象类的子类必须实现抽象类里面的抽象方法console.log(this.name + "吃老鼠");}
}var c: Cat = new Cat("小花猫");
c.eat();

接口 interface

接口的用途就是：
对行为和动作进行规范和约束，规定这批类里必须提供某些方法，变量需为何种类型；
但是，接口中不能有方法体，只允许有方法定义。

属性类接口


//对传入对象的属性约束，以下这个是一个属性接口
interface FullName {firstName: string;secondName: string;
}function printName(name: FullName) {console.log(name.firstName + "--" + name.secondName);
}//传入的参数必须包含firstName、secondName
var obj = {age: 20,firstName: '张',secondName: '三'
};
printName(obj);//正确
// printName("1213");//错误

函数类型接口

//加密的函数类型接口
interface encrypt {//约束传参及返回值(key: string, value: string): string;
}var md5: encrypt = function (key: string, value: string): string {//模拟操作return key + "----" + value;
}
console.log(md5("name", "zhangsan"));

类类型接口

interface Animal {name: string;eat(str: string): void;
}//类接口需要 implements 关键字
class Dog implements Animal {name: string;constructor(name: string) {this.name = name;}eat() {console.log(this.name + "吃大骨头");}
}var d = new Dog("小狼狗");
d.eat();

接口的继承

接口可以继承接口，接口之间和抽象类之间的继承都是单向单继承，但是实现接口的子类可以实现多个接口。

简单来说，对于类、抽象类、接口继承只能单继承，但接口却可以多实现。


//人这个接口
interface Person {eat(): void;
}//程序员接口
interface Programmer extends Person {code(): void;
}//小程序接口
interface Web {app(): void;
}//前端工程师
class WebProgrammer implements Person, Web {public name: string;constructor(name: string) {this.name = name;}eat() {console.log(this.name + "下班吃饭饭")}code() {console.log(this.name + "上班敲代码");}app() {console.log(this.name + "开发小程序");}
}var w = new WebProgrammer("小李");
w.eat();
w.code();
w.app();

TS - 勉强入个门儿相关推荐

头条用户人均985，月入过万？看完真实的数据可视化，我有了答案
看见一个问题: 我刷知乎不多,但是也有这个感觉:211凑合,985一般,清北还行.常青藤,勉强入眼,年薪百万算个屁,月入千万有点低. 好吧,我不知道是谁飘了,我只知道随便敲敲键盘确实很简单. 其实也不 ...
大数据常见面试问题汇总
目录第1章核心技术 1.1 Linux&Shell 1.1.1 Linux常用高级命令 1.1.2 Shell常用工具及写过的脚本 1.1.3 Shell中单引号和双引号区别 1.2 Ha ...
为TypeScript项目生成API文档
为TypeScript项目生成文档使用typedoc为TypeScript项目生成API文档. 1. 使用typedoc生成HTML文档需要安装 typedoc. npm i typedoc 可以 ...
百度前端技术学院2017学习总结
一.前言百度的前端技术学院IFE,2016年就听说了,当时自己也报名,还组成队伍了,不过自己一个任务也没完成就结束了,遗憾... 关注了IFE,知道2017年2月有新的一期培训,于是一直在等着报名, ...
iphone双卡_单卡 iPhone 变双卡，3分钟搞定安卓备用机短信——IFTTT妙用
〇.前言虽然双卡手机在天朝早已遍地开花,甚至 iPhone 都在 2018 年支持了双卡,我使用的依然是单卡手机,而且是两部.它们虽然都是好几年前的手机了,但依然「够用」,所以我一直无缘新的双卡手机 ...
有哪些道理是我当了程序员后才知道的？
1.当你明白了技术永远是为了业务服务的时候,不再技术至上的时候,你就成长到程序员的下一个阶段了. 2.业务第一,产品第二,技术第三. 3.盈利了,是业务部门把钱搞来的,技术部门是支出部门. 4.年轻的 ...
大一的一些心得与近况
下周就离开北方,从沈阳飞西安大一结束了,要填的坑太多了,总觉得要总结一下才能踏实的继续学下去你会选择诗与远方,还是会选择柴米油盐? 而我还在苟且学习web安全,风雨兼程总想着认真记录博客,可好久 ...
Linux学习命令总结个人及个人心得
在开始今天的讲课,我们还是一如既往的回顾下前面我们讲解的内容.前面我讲解了Linux的12类命令,及三剑客与正则表达式.他是我们学会Linux的基础,大家一定要下功夫把他们掌握了,今天我们说下Linu ...
零基础学python大概要多久-零基础学Python要多久
随着Python就业的逐渐火热,我们会看见很多转行零基础学Python编程开发拿上万月薪的新闻,这让很多IT专业甚至非IT专业的同学蠢蠢欲动,想自己也去尝试一下.但是在转行学习Python之前,同学们 ...
mx250显卡天梯图_MX250和150差别大吗？MX250和MX150区别对比 (全文)
NVIDIA早在17年的时候,推出了MX150显卡,主要用于高性能轻薄本,兼顾续航与一般的游戏性能,在低画质下可以勉强吃鸡.时隔两年,新一代MX250显卡正式发布,同样是定位"高性能轻薄本& ...

TS - 勉强入个门儿