TypeScript入门这篇不够！！！

一、安装

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

<pre class="hljs nginx" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 0.75em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">npm install -g typescript
复制代码</pre>

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

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">// demo.ts
function demo01() {
let test: string = 'a test typescript';
console.log(test)
}
demo01()
复制代码</pre>

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

编译方式：

<pre class="prettyprint hljs vim" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">// 先编译为js文件

// 编译
tsc demo.ts
// 执行
node demo.js

// 使用ts-node插件的方式直接执行.ts文件
npm install -g ts-node
ts-node demo.ts // 直接运行ts文件
复制代码</pre>

二、静态类型

<pre class="hljs typescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 0.75em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">// demo2.ts
const count : number = 1;
复制代码</pre>

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

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

自定义静态类型

<pre class="prettyprint hljs typescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">...
interface Demo {
name: string;
age: number;
}

let demo : Demo = {
name: '23',
age: 23
}
console.log(demo);...
复制代码</pre>

三、数据类型

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

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

Number

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

<pre class="prettyprint hljs typescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">let num : number = 11111;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;
复制代码</pre>

String

<pre class="prettyprint hljs verilog" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">let str : string = '这是string基础静态类型';
let str1 : string = "这是基础数据类型";
复制代码</pre>

Boolean

<pre class="hljs rust" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 0.75em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">let bool : boolean = true;
复制代码</pre>

Null

<pre class="hljs fsharp" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 0.75em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">let nul : null = null;
复制代码</pre>

Undefined

<pre class="hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 0.75em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">let unde : undefined = undefined;
复制代码</pre>

Symbol

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">let sym : symbol = Symbol('foo');
let sym1 : symbol = Symbol(123);
复制代码</pre>

对象

<pre class="prettyprint hljs yaml" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">let obj : {
user: string,
age: number,
sex: boolean
} = {
user: 'xiaoming',
age: 26,
sex: true
}
console.log(obj) // { user: 'xiaoming', age: 26, sex: true }
复制代码</pre>

数组

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

<pre class="prettyprint hljs typescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">// 直接[]方式
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<string> = ['str', 'strr', 'strrr'];
复制代码</pre>

函数

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">let func : () => string = () => '小明' // es6箭头函数
console.log(func) // [Function: func]
复制代码</pre>

类

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">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 {}
复制代码</pre>

enum枚举

<pre class="prettyprint hljs typescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">// 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
复制代码</pre>

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

<pre class="hljs less" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 0.75em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">{
4: 'java',
34: 'php',
2: 'js'
}
复制代码</pre>

Any

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

<pre class="prettyprint hljs typescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">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;
复制代码</pre>

image

Nerver

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

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

没有

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

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

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">// 返回never的函数必须存在无法达到的终点
function error(message: string): never {
throw new Error(message);
}

// 推断的返回值类型为never
function fail() {
return error("Something failed");
}

// 返回never的函数必须存在无法达到的终点
function infiniteLoop(): never {
while (true) {
}
}
复制代码</pre>

Object

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

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

<pre class="prettyprint hljs sql" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">declare function create(o: object | null): void;

create({ prop: 0 }); // OK
create(null); // OK

create(42); // Error
create("string"); // Error
create(false); // Error
create(undefined); // Error
复制代码</pre>

类型断言

<pre class="prettyprint hljs typescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">// 第一种尖括号的方式
let someValue: any = "this is a string";

let strLength: number = (<string>someValue).length;

// 第二种as方式
let someValue: any = "this is a string";

let strLength: number = (someValue as string).length;
复制代码</pre>

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

四、类型注释和类型推断

类型注释

这种就是 类型注释

<pre class="hljs swift" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 0.75em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">let count : number = 23;
复制代码</pre>

类型推断

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

<pre class="hljs xquery" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 0.75em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">let count1 = 24;
复制代码</pre>

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

<pre class="prettyprint hljs typescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">// 这里是计算功能，是需要写的，否则就是字符串的拼接功能了。
function sumTwo(one : number, two : number) {
return one + two;
}
console.log(sumTwo(2,3)); // 5
// console.log(sumTwo('2','3')); // 报错
复制代码</pre>

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

参数

基础数据类型

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">// 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); // 打印的值是：假的
复制代码</pre>

对象类型

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">// 参数是数组
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
复制代码</pre>

返回值

无返回值

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

<pre class="prettyprint hljs livescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">function echo6() : void {
console.log('这个函数是没返回值')

// return 3333; // 直接报错Type 'number' is not assignable to type 'void'.
}
echo6();
复制代码</pre>

基础基础数据类型

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">function echo7(num : number) : boolean {
return num > 0;
}

console.log(echo7(9)); // true
console.log(echo7(-23)); // false
复制代码</pre>

对象类型

<pre class="prettyprint hljs lua" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">// 下面是返回个string类型的数组，其他的类似
function echo8() : string[] {
return ['1', '2', 'str', 'num'];
}
console.log(echo8()) // [ '1', '2', 'str', 'num' ]
复制代码</pre>

六、数组类型

简单类型

<pre class="prettyprint hljs lua" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">let arr : string[] = ['1','3', 'erder', 'sfesrfre'];
console.log(arr) // [ '1', '3', 'erder', 'sfesrfre' ]
复制代码</pre>

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

<pre class="prettyprint hljs groovy" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">// 如下看起来可以解决， 但是不够通用，再来一个同样的数组，那定义的类型就要在写一遍，由此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 } ]
复制代码</pre>

数组包含多种类型

<pre class="prettyprint hljs typescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">const xiaojiejie1 : (string | number)[] = ['dajiao',28, 'teacher'] // 不是元组，不能定位到每个元素的类型，调换顺序不会报错。
复制代码</pre>

类型别名

以关键字 type 开始

<pre class="prettyprint hljs groovy" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">// 类型别名
type male = {
name: string,
age: number
}

// 接口
interface female {
user: String;
age: Number;
}

// 类
class Demo {
name: string
age: 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)
复制代码</pre>

七、元组

<pre class="prettyprint hljs typescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">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) //
复制代码</pre>

八、interface接口

定义

<pre class="prettyprint hljs groovy" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">// 定义一个函数
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) // 录取
复制代码</pre>

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

<pre class="prettyprint hljs typescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">// 提取为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) // 预不录取
复制代码</pre>

interface和类型别名区别

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

interface 必须是对象

接口非必选值定义

<pre class="prettyprint hljs typescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">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)
// 预不录取
//我看到你的大长腿了
复制代码</pre>

接口增加任意参数和方法

<pre class="prettyprint hljs typescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">interface Gril2 {
name: string;
age: number;
must: number;
leg ?: string; // 接口非必选值定义
[propname:string] : any; // 允许加入任意值，不像上面的那么严格
say(): string; // 增加了一个say方法，返回值是string类型
}
复制代码</pre>

类继承接口(implements)

<pre class="prettyprint hljs dart" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">class Xiao3 implements Gril2 {
name = 'zhy'
age = 23
must = 99
say() {
return this.name
}
}
console.log(new Xiao3()) // Xiao3 { name: 'zhy', age: 23, must: 99 }
复制代码</pre>

接口继承接口(extends）

<pre class="hljs dart" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 0.75em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">interface Xiao4 extends Gril2{

}
复制代码</pre>

九、类

定义

<pre class="prettyprint hljs javascript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">class Lady {
content = 'say hi'
say() {
return this.content
}
}

const xiaohong = new Lady();
console.log(xiaohong.say()) // say hi
复制代码</pre>

继承和方法重写

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

<pre class="prettyprint hljs scala" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">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
复制代码</pre>

super使用父类的方法

访问限制符public,protected,private

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

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

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

<pre class="prettyprint hljs scala" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">class Person {
public name : string
public say() {
return this.name
}
}
const zhy = new Person();
zhy.name = 'haiyang';
console.log(zhy.say()) // haiyang

class 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()) // yangyang

class Person2 extends Person1 {
public walk() {
return this.name
}
}
const zhy2 = new Person2()
console.log(zhy2.walk()) // yangyang

class 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()) // haihai

class 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
复制代码</pre>

构造函数

<pre class="prettyprint hljs scala" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">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();
复制代码</pre>

getter,setter,static用法

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

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

<pre class="prettyprint hljs typescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">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 = 23
say() {
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，并且可以在外部使用的方法
复制代码</pre>

只读属性和抽象类

只读属性

关键字readonly

<pre class="prettyprint hljs typescript" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">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
复制代码</pre>

抽象类

1. 关键字abstract定义类

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

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

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

<pre class="prettyprint hljs scala" style="padding: 0.5em; font-family: Menlo, Monaco, Consolas, "Courier New", monospace; color: rgb(68, 68, 68); border-radius: 4px; display: block; margin: 0px 0px 1.5em; font-size: 14px; line-height: 1.5em; word-break: break-all; overflow-wrap: break-word; white-space: pre; background-color: rgb(246, 246, 246); border: none; overflow-x: auto;">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() //因为没有具体的方法，所以我们这里不写括号

}
复制代码</pre>

image