一、安装

全局安装typescript(默认你已经安装了node)

npm install -g typescript

安装完了以后，就可以使用 typescript 进行开发了

// demo.ts
function demo01() {let test: string = 'a test typescript';console.log(test)
}
demo01()

typescript结尾的.ts文件是不能直接运行的，需要编译为.js结尾的文件才能运行

编译方式：

// 先编译为js文件// 编译
tsc demo.ts
// 执行
node demo.js// 使用ts-node插件的方式直接执行.ts文件
npm install -g ts-node
ts-node demo.ts // 直接运行ts文件

二、静态类型

// demo2.ts
const count : number = 1;

这里定义了 count 变量，这里的 : number 就是定义了一个静态类型。

注意⚠️：静态变量的类型不可以改变，但是值是可以改变的。

自定义静态类型

...
interface Demo {name: string;age: number;
}let demo : Demo = {name: '23',age: 23
}
console.log(demo);...

三、数据类型

基础数据类型： number 、 string 、 boolean 、 null 、 undefined 、 symbol

对象类型：对象、数组、类、函数

Number

TypeScript 里的所有数字都是浮点数。 这些浮点数的类型是 number 。 除了支持十进制和十六进制字面量，TypeScript 还支持 ECMAScript 2015 中引入的二进制和八进制字面量。

let num : number = 11111;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;

String

let str : string = '这是string基础静态类型';
let str1 : string = "这是基础数据类型";

Boolean

let bool : boolean = true;

Null

let nul : null = null;

Undefined

let unde : undefined = undefined;

Symbol

let sym : symbol = Symbol('foo');
let sym1 : symbol = Symbol(123);

对象

let obj : {user: string,age: number,sex: boolean
} = {user: 'xiaoming',age: 26,sex: true
}
console.log(obj) // { user: 'xiaoming', age: 26, sex: true }

数组

TypeScript像JavaScript一样可以操作数组元素。 有两种方式可以定义数组。 第一种，可以在元素类型后面接上 [] ，表示由此类型元素组成的一个数组

// 直接[]方式
let arr : Object[] = [null, undefined, 0, '123', true];
let arr1 : String[] = ['null', 'undefined', '0', '123', "true"];
console.log(arr) // [ null, undefined, 0, '123', true ]
console.log(arr1) // [ 'null', 'undefined', '0', '123', 'true' ]// 数组范型， Array<元素类型>const arr3: Array = ['str', 'strr', 'strrr'];

函数

let func : () => string = () => '小明' // es6箭头函数
console.log(func) // [Function: func]

类

class Person {}let per : Person = new Date(); // new Date() 也是可以，并没有报错
const per1 : Person = new Person();
console.log(per) // 2020-09-16T11:23:19.698Z
console.log(per1) // Person {}

enum枚举

// dmeo.ts
enum Color {Red, Green, Blue}
let c: Color = Color.Green
let r: Color = Color.Red
let b: Color = Color.Blue// demo.js
var Color;
(function (Color) {Color[Color["Red"] = 0] = "Red";Color[Color["Green"] = 1] = "Green";Color[Color["Blue"] = 2] = "Blue";
})(Color || (Color = {}));
var c = Color.Green;
var r = Color.Red;
var b = Color.Blue;
console.log(c, b, r);console.log(Color) // { '0': 'Red', '1': 'Green', '2': 'Blue', Red: 0, Green: 1, Blue: 2 }
console.log(c, b, r) // 1 2 0 r是0，是因为默认是从0开始// key、value简直是你中有我，我中有你，这就是枚举
//-----------------------------------------------
// 修改起始顺序
enum Colors {Pink = 1, Yellow, Purple}
let p: Colors = Colors.Pink
let y: Colors = Colors.Yellow
let p1: Colors = Colors.Purple
console.log(p,y,p1) // 1 2 3
console.log(Colors)
/*{'1': 'Pink','2': 'Yellow','3': 'Purple',Pink: 1,Yellow: 2,Purple: 3
}*/// 对应的js
var Colors;
(function (Colors) {Colors[Colors["Pink"] = 1] = "Pink";Colors[Colors["Yellow"] = 2] = "Yellow";Colors[Colors["Purple"] = 3] = "Purple";
})(Colors || (Colors = {}));
var p = Colors.Pink;
var y = Colors.Yellow;
var p1 = Colors.Purple;
console.log(p, y, p1); // 1 2 3
console.log(Colors);//-----------------------------------------------// 修改没个值
enum Job {Fe = 12, Php = 1, Java = 4}
let f: Job = Job.Fe;
let p3: Job = Job.Php;
let j: Job = Job.Java;
let fe: string = Job[12];
let php: string = Job[1];
let java: string = Job[4];console.log(f,p3,j,fe,php,java) // 12 1 4 Fe Php Java
console.log(Job) // { '1': 'Php', '4': 'Java', '12': 'Fe', Fe: 12, Php: 1, Java: 4 }
/**/// 对应的js
var Job;
(function (Job) {Job[Job["Fe"] = 12] = "Fe";Job[Job["Php"] = 1] = "Php";Job[Job["Java"] = 4] = "Java";
})(Job || (Job = {}));
var f = Job.Fe;
var p3 = Job.Php;
var j = Job.Java;
var fe = Job[12];
var php = Job[1];
var java = Job[4];
console.log(f, p3, j, fe, php, java); // 12 1 4 Fe Php Java

以上就是枚举的举例，同理，我是不是可以理解下面对于js来说就是枚举 ️?

{4: 'java',34: 'php',2: 'js'
}

Any

有时候，我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。 这些值可能来自于动态的内容，比如来自用户输入或第三方代码库。 这种情况下，我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。 那么我们可以使用 any 类型来标记这些变量

let notSure: any = 4;
notSure = "maybe a string instead";
notSure = false; // okay, definitely a boolean// 下面是官网的例子，但是报错(这就很迷茫了:joy:)
let notSure: any = 4;
notSure.ifItExists(); // okay, ifItExists might exist at runtime
notSure.toFixed();let prettySure: Object = 4;
prettySure.toFixed(); // Error: Property 'toFixed' doesn't exist on type 'Object'.// 当你只知道一部分数据的类型时，any类型也是有用的。 比如，你有一个数组，它包含了不同的类型的数据
let list: any[] = [1, true, "free"];
list[1] = 100;

Nerver

never 类型表示的是那些永不存在的值的类型。 例如， never 类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型； 变量也可能是 never 类型，当它们被永不为真的类型保护所约束时。

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

没有

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

下面是一些返回 never 类型的函数：

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

Object

object 表示非原始类型，也就是除 number ， string ， boolean ， symbol ， null 或 undefined 之外的类型。

使用 object 类型，就可以更好的表示像 Object.create 这样的API。例如：

declare function create(o: object | null): void;create({ prop: 0 }); // OK
create(null); // OKcreate(42); // Error
create("string"); // Error
create(false); // Error
create(undefined); // Error

类型断言

// 第一种尖括号的方式
let someValue: any = "this is a string";let strLength: number = (someValue).length;// 第二种as方式
let someValue: any = "this is a string";let strLength: number = (someValue as string).length;

注意⚠️： 当你在TypeScript里使用JSX时，只有 as 语法断言是被允许的

四、类型注释和类型推断

类型注释

这种就是 类型注释

let count : number = 23;

类型推断

不写数据需要的类型，但是系统字段推断为 number 类型，这就是 类型推断 。在这里，没写类型注释，但是ts依然识别出count1是 number 类型，就好比反推，这种情况叫做类型推断。

let count1 = 24;

写不写类型注释，根据业务自身去确定，比如计算2个数的和，如果不写注释传入字符串的话就是拼接了，所以要灵活根据业务自身去确定写不写类型注释。

// 这里是计算功能，是需要写的，否则就是字符串的拼接功能了。
function sumTwo(one : number, two : number) {return one + two;
}
console.log(sumTwo(2,3)); // 5
// console.log(sumTwo('2','3')); // 报错

五、函数参数和返回类型定义

参数

基础数据类型

// 2个简单的例子，其他的类似function echo(str : string) {console.log(str)
}
function echo1(bool : boolean) {console.log('打印的值是：' + (bool ? '真' : '假的'));
}
echo('he is a huamen'); // he is a huamen
echo1(true); // 打印的值是：真
echo1(false); // 打印的值是：假的

对象类型

// 参数是数组
function echo2(str3 : Object []) {console.log(str3)
}// 参数是对象
function echo3({one, two} : {one: string, two: string}) {console.log(one + two)
}// 参数是函数
function echo4(str : () => "33") {str()
}// 参数是类
function echo5(time : Date) {console.log(time.getTime())
}echo2([null, undefined, 0, true]); // [ null, undefined, 0, true ]
echo3({one: '3', two: '55'}); // 355
echo4(function () {return '33';
}); // undefined
echo5(new Date()); // 1600256196949

返回值

无返回值

函数无返回值,给函数增加类型注释 void 即可

function echo6() : void {console.log('这个函数是没返回值')// return 3333; // 直接报错Type 'number' is not assignable to type 'void'.
}
echo6();

基础基础数据类型

function echo7(num : number) : boolean {return num > 0;
}console.log(echo7(9)); // true
console.log(echo7(-23)); // false

对象类型

// 下面是返回个string类型的数组，其他的类似
function echo8() : string[] {return ['1', '2', 'str', 'num'];
}
console.log(echo8()) // [ '1', '2', 'str', 'num' ]

六、数组类型

简单类型

let arr : string[] = ['1','3', 'erder', 'sfesrfre'];
console.log(arr) // [ '1', '3', 'erder', 'sfesrfre' ]

一般api返回的都是数组或者对象，因此如何定义对象类型是个重点！！！

// 如下看起来可以解决， 但是不够通用，再来一个同样的数组，那定义的类型就要在写一遍，由此ts为我们准备一个概念：类型别名(定义的时候要以type关键字开始)！
// 这里的类型：类型别名、接口、类都是可以解决的！
let arr1 : {user: string, age: number}[] = [{user: 'x', age: 23},{user: 'y', age: 24},
];console.log(arr1) // [ { user: 'x', age: 23 }, { user: 'y', age: 24 } ]

数组包含多种类型

const xiaojiejie1 : (string | number)[]  = ['dajiao',28, 'teacher'] // 不是元组，不能定位到每个元素的类型，调换顺序不会报错。

类型别名

以关键字 type 开始

// 类型别名
type male = {name: string,age: number
}// 接口
interface female {user: String;age: Number;
}// 类
class Demo {name: stringage: number
};let arr2 : male[] = [{name: 'aaa', sex: true},{name: 'bbb', sex: true},{name: 'ccc', sex: !!'true'}
]
console.log(arr2)let arr3 : female[] = [{user: 'abbb', age: 23},{user: 'accc', age: 24},{user: 'addd', age: 26}
]
console.log(arr3)let arr4 : Demo[] = [{name: 'xiaoming', age: 23},{name: 'xiaoshi', age: 23},{name: 'xiaohong', age: 23},{name: 'xiaoguang', age: 23}
]
console.log(arr4)

七、元组

const xiaojiejie : [string,string ,number]  = ['dajiao','teacher',28]
// 这就是一个元组，定义了每个字段的类型，如果顺序变化了，就会报错。
// 这是一个多维数组的元组
const xiao3 : [string, string, number][] = [['x', 'te', 3],['x', 'te', 3],['x', 'te', 3],['x', 'te', 3],
]
console.log(xiao3) // 

八、interface接口

定义

// 定义一个函数
const findXiao = (name: string, age: number, must: number) => {age < 24 && must > 90 && console.log('录取')age > 24 && must < 90 && console.log('淘汰')
}
const xiao = {name: '老谢', age: 21, must: 99}
const xiao1 = {name: '老谢', age: 89, must: 09}
findXiao('辣蟹', 21, 99) // 录取

同样的问题，每次都写的话，人要累死了😢

// 提取为interface
interface Gril {name: string;age: number;must: number;
}const xiao = {name: '老谢', age: 21, must: 99}
const xiao1 = {name: '老谢', age: 89, must: 09}const findXiao1 = (gril : Gril) => {gril.age < 30 && gril.must > 90 && console.log("预录取")gril.age > 30 && gril.must < 90 && console.log("预不录取")
}
findXiao1(xiao) // 预录取
findXiao1(xiao1) // 预不录取

interface和类型别名区别

类型别名是可以直接给类型，比如: type Gril = string;

interface 必须是对象

接口非必选值定义

interface Gril1 {name: string;age: number;must: number;leg ?: string; // 接口非必选值定义
}const findXiao2 = (gril : Gril1) => {gril.age < 30 && gril.must > 90 && console.log("预录取")gril.age > 30 && gril.must < 90 && console.log("预不录取")gril.leg && console.log('我看到你的大长腿了')
}const xiao2 = {name: '老谢', age: 89, must: 09, leg: "haha"}
findXiao2(xiao2)
// 预不录取
//我看到你的大长腿了

接口增加任意参数和方法

interface Gril2 {name: string;age: number;must: number;leg ?: string; // 接口非必选值定义[propname:string] : any; // 允许加入任意值，不像上面的那么严格say(): string; // 增加了一个say方法，返回值是string类型
}

类继承接口(implements)

class Xiao3 implements Gril2 {name = 'zhy'age = 23must = 99say() {return this.name}
}
console.log(new Xiao3()) // Xiao3 { name: 'zhy', age: 23, must: 99 }

接口继承接口(extends）

interface Xiao4 extends Gril2{}

九、类

定义

class Lady {content = 'say hi'say() {return this.content}
}const xiaohong = new Lady();
console.log(xiaohong.say()) // say hi

继承和方法重写

super 关键字支持使用父类的方法，但是不能使用属性

class Zhang extends Lady {say() {return '这里是Zhang的重写';}walk() {console.log('1111111111super', super.say()) // 方法是可以的// console.log('1111111111super', super.content) // 报错，属性不行return '边走鞭炮';}
}const xiaozhang = new Zhang();
console.log(xiaozhang.content) // say hi
console.log(xiaozhang.say()) // 这里是Zhang的重写
console.log(xiaozhang.walk()) // 1111111111super say hi

super使用父类的方法

访问限制符public,protected,private

public : 类的内部和外部都可以访问

protected :类的内部和子类可以访问

private : 只能在自己本类内部访问

class Person {public name : stringpublic say() {return this.name}
}
const zhy = new Person();
zhy.name = 'haiyang';
console.log(zhy.say()) // haiyangclass Person1 {protected name : string = 'yangyang'public say() {return this.name}
}
const zhy1 = new Person1();
// zhy1.name = 'haiyang'; // 报错，Property 'name' is protected and only accessible within class 'Person1' and its subclasses.
console.log(zhy1.say()) // yangyangclass Person2 extends Person1 {public walk() {return this.name}
}
const zhy2 = new Person2()
console.log(zhy2.walk()) // yangyangclass Person3 {private name : string = 'haihai'public say() {return this.name}
}
const zhy3 = new Person3();
// zhy3.name = 'haiyang'; // 报错，Property 'name' is private and only accessible within class 'Person3
console.log(zhy3.say()) // haihaiclass Person4 extends Person3{walk() {// return this.name //报错， 09_calss.ts:78:17 - error TS2341: Property 'name' is private and only accessible within class 'Person3'.}
}
const zhy4 = new Person4()
console.log(zhy4.walk()) // undefined

构造函数

class Now{}class Chl extends Now {constructor() {super() // 报错才补的//因为没写super(),所以报错了， Constructors for derived classes must contain a 'super' call.console.log(1111)}
}
const c = new Chl();

getter,setter,static用法

1. getter 、 setter 都是属性，只是形式函数

2. 属性的名字可以是随意的，你自己知道对应的意思就好

class Xie {constructor(private num_age : number) {}// 属性的名字是随意的，此时看着是方法，但对于类来说只是一个属性set name(age : number) {this.num_age = age}get age() {return this.num_age}
}const xiaoxie = new Xie(32)
console.log(xiaoxie.age) //32  注意是属性！！！
xiaoxie.name = 4444 // 注意是属性！！！
console.log(xiaoxie.age) // 4444 上面改变了年龄/*
1\. 静态属性和方法只是不应实例化类，而类可以直接调用
*/class StaticClass {name = 'zhy'static age = 23say() {console.log('我不是static的方法')}static walk() {console.log('我是static，并且可以在外部使用的方法')}
}
console.log(StaticClass.name) // StaticClass 这个应是固有的属性，获取方法名字
console.log(StaticClass.age) // 23
// console.log(StaticClass.say()) // 不可以访问，会报错
console.log(StaticClass.walk()) // 我是static，并且可以在外部使用的方法

只读属性和抽象类

只读属性

关键字readonly

class Person10 {public readonly _name :string;constructor(name:string) {this._name = name;}
}const person10 = new Person10('demo')
// person10._name= '谢广坤'  // 报错，Cannot assign to '_name' because it is a read-only property.
console.log(person10._name) // demo

抽象类

1. 关键字abstract定义类

2. 抽象方法不能有方法体

3. 子类必须实现抽象方法

4. 抽象类里面可以有其他正常类的属性和方法（根据php推出）

abstract class Girl{abstract skill()  //因为没有具体的方法，所以我们这里不写括号}
class Waiter extends Girl{skill(){console.log('大爷，请喝水！')}
}class BaseTeacher extends Girl{skill(){console.log('大爷，来个泰式按摩吧！')}
}class seniorTeacher extends Girl{skill(){console.log('大爷，来个SPA全身按摩吧！')}
}abstract class Girl{name = 'zhy'say() {return 333;}abstract skill()  //因为没有具体的方法，所以我们这里不写括号}