关于ts:TypeScript教程基础

ts 是领有类型查看零碎的 javascript 超集, 提供了对 es6 的反对, 能够编译成纯 javascript, 运行在任何浏览器上。
TypeScript 编译工具能够运行在任何服务器和任何零碎上。TypeScript 是开源的。

ts 总体给我的感觉就是, 它能束缚代码, 又有肯定的灵便度, 能够造就你的编程习惯, 输入更高质量, 维护性高, 可读性高的代码

编译代码时, 进行严格的动态类型查看, 编译阶段而不是运行时发现很多谬误, 特地是一些很低级的谬误
帮忙咱们在写代码的时候提供更丰盛的语法提醒, 不便的查看定义对象上的属性和办法
比方: 你给函数传了一个对象, 你在函数实现的时候还得记住对象外面都有啥参数, 你定义的参数名字是啥

npm init -y
npm install typescript -g

js 中的数据类型:
字符串（String）、数字 (Number)、布尔(Boolean)、空（Null）、未定义（Undefined）、Symbol。
对象(Object)、数组(Array)、函数(Function)
ts 蕴含 js 中所有的类型, 而且还新增了几种类型
void、any、never、元组、枚举、高级类型

类型注解:
(变量 / 函数):type

布尔类型(boolean)
```
let flag: boolean = true
```
数字类型(number)
```
let num: number = 8;
```
字符串类型(string)
```
let str: string = 'sxh';
```
数组类型(array)

let arr1:number[]=[1,2,3]
let arr2:Array<number>=[1,2,3]

只读数组数组创立后不能被批改

 let ro: ReadonlyArray<number> = arr1;
// arr1.push(3);
// ro[1] = 4;
// ro.push(6);
// ro.length = 100;
// arr1 = ro;
// let arr3: number[] = ro

元组类型 (tuple)
管制了数组成员的类型和数量

let tuple:[string,number]=['sxh',10]
// 元祖越界问题：tuple.push(2)// 能够增加的类型是所有数组成员的联结类型
console.log(tuple[2])// 不能这样拜访

枚举类型 (enum)
一般枚举
若枚举类型未指定值或指定的值为 number 类型, 可对其进行双向取值

// 双向取值
enum Color {
RED,
BLUE,
}
console.log(Color[0], Color[1]);
console.log(Color['RED'], Color['BLUE']);

enum Color {
RED=2,
BLUE,
}

enum ActionType {
ADD = 'ADD',
EDIT = 'EDIT',
DELETE = 'DELETE',
}

常量枚举

const enum Status {
'success',
'warning',
'fail',
}
let loginStatus = [Status.success, Status.warning, Status.fail];

keyof typeof Enum, 将枚举类型转换为联结类型

enum ActionType {
ADD,
EDIT,
DELETE,
}
type ActionTypeConst = keyof typeof ActionType // 'ADD' | 'EDIT' | 'DELETE'

null、undefined

null, undefined 是其余类型的子类型, 能够赋值给其余类型的变量
strictNullChecks 为 true 的话不能赋值给其余类型
```
let str: string;
str = null;
str = undefined;
```
任意类型 (any)
任意类型 any 类型类型转换艰难的时候, 数据类型结构复杂, 没有类型申明的时候用
如果变量定义为 any 类型, 跟 js 差不多了, 不进行类型查看了

unkonwn 未知类型

let a: any 
let b: unkonwn
a.toFixed()
b.toFixed()

void 无类型
罕用于没有具体返回值的函数
```
const handler = (param: string):void => {}
```

never 类型
永远不存在的值
任何类型的字类型, 能够赋值给任何类型
然而任何类型都不可赋值给 never, 包含 any

function error(msg: string): never {throw new Error('我报错了'); // 间接异样完结了
}

function loop(): never {while (true) {}}

function fn(x: number | string) {if (typeof x === 'number') {
 // 类型爱护
 console.log(x);
} else if (typeof x === 'string') {console.log(x);
} else {console.log(x);
}
}

如果没有指定类型, TS 会依据类型推论推断出一个类型.
如果变量定义的时候没有赋值, 默认是 any 类型

let x; // 能够赋值为任何类型的值
let x1 = '生生世世'; // x1 会推论成 sring 类型, 不能给 x1 赋值为其余类型了
// x1 = 222;

如果 TS 能正确推断出其类型, 咱们可采纳类型推论而不用定义类型

function sum(x: number, y: number){return x + y;}


let name1: string | number;
// console.log(name1.toFixed());
// console.log(name1.toString());
name1 = 3;
name1 = 'sxh';

类型断言用来通知编译器“我晓得本人在干什么”, 有尖括号和 as 两种写法. 在 tsx 语法中, 只反对 as.

let name1: string = '111'
let name2: string | number;
// console.log(name2.toFixed())
console.log((name2 as number).toFixed());
// 双重断言
console.log((name1 as any) as boolean);

// 字符串字面量
const left: 'left' = 'left';
const right: 'right' = 'right';
type pos = 'left' | 'right';

function loc(pos: pos) {}
// loc('up')

// 类型字面量
type Person = {
  name: string;
  age: number;
};
let p1: Person = {
  name: 'sxh',
  age: 18,
};

type T1 = '1' | '2' | '3';
type T2 = string | number | boolean;
let t1: T1 = '2';
let t2: T2 = true;

定义函数有两种形式: 1. 函数定义 2. 函数表达式

// 1. 间接申明
function person2(name: string): void {console.log(name);
}
person2('sxh');

// 2. 变量申明
let sum: (x:number, y:number) => number
sum = (a,b)=>a+b
sum(1,2)

// 3. 类型别名
type Sum = (a: number, b: number) => void;
let sum: Sum = function (a: number, b: number): number {return a + b;};
let sum2: Sum = function (a: number, b: number): void {// 没有返回值
// return a + b;
};
const myAdd = (x: number, y: number) => x + y; //  也能够间接这样定义, 类型会主动推导
// 4. 接口
interface Sum{(x:number, y: number):number
}
let sum: Sum = (a,b)=>a+b
sum(1,2)

必须放在最初一个参数地位

function sum3(a: number, b: number, c?: number) {}
sum3(1, 2);

// 设置默认值, 最初一个参数设置默认值就, 函数调用可传可不传, 相当于可选参数
function sum4(a: number, b: number, c = 6) {return a + b + c;}
sum4(1, 2);
// 第一个参数设置默认值, 应用默认调用的时候必须传 undefiend
function sum5(a = 3, b: number) {return a + b;}
console.log(sum5(undefined, 2));

function sum6(...args: number[]) {return args.reduce((val, item) => val + item, 0);
}
sum6(1, 2, 3, 5);

给同一个函数提供多个函数定义

let catOpt: any = {};
function cat(param: string): void;
function cat(param: number): void;
function cat(param: any) {if (typeof param === 'string') {catOpt.name = param;} else if (typeof param === 'number') {catOpt.age = param;}
}
cat('小花');
cat(3);

function add(a: string, b: number): void;
function add(a: number, b: number): void;
function add(a: string | number, b: string | number): void {}
add(1, 2);
// add(1, '2');

class Book {
  name: string;
  getName(): void {console.log(this.name);
  }
}
let book1 = new Book();
book1.name = 'ts';
book1.getName();

通过存取器来扭转一个类中属性的读取和赋值行为

class MyBook {
  bname: string; // 属性
  constructor(bname: string) {this.bname = bname;}
  get name() {return this.bname;}
  set name(value) {this.bname = value;}
}

let myBook = new MyBook('ts');
myBook.name = 'js';
console.log(myBook.name);

class MyBook1 {
  // bname: string;
  constructor(public bname: string) {// this.bname = bname;}
  get name() {return this.bname;}
  set name(value) {this.bname = value;}
}
let myBook1 = new MyBook1('ts');
myBook1.name = 'js';
console.log(myBook1.name);

class MyBook2 {
  readonly bname: string; // 公开的只读属性只能在申明时或者构造函数中赋值
  readonly num: number = 1;
  constructor(bname: string) {this.bname = name;}
  changeName(value) {// this.bname = value;}
}

class Animal {
  name: string;
  constructor(name: string) {this.name = name;}
  eat(food: string) {console.log('吃什么', food);
  }
}

class Cat extends Animal {
  color: string;
  constructor(name: string, color: string) {super(name);
    this.color = color;
  }
}
let cat = new Cat('哈哈', 'white');
console.log(cat.name);
cat.eat('fish');

public 私有属性, private 公有属性, protected 受爱护的

// public 私有属性 , ts 默认为 public
class Animal1 {
  public name: string; // 本人, 子类和实例都能够拜访
  private age: number = 2; // 本人能够拜访, 子类 和 实例 都不能够拜访,
  protected body: string; // 本人和子类能够拜访, 实例不能够拜访
  public constructor(name: string, age: number) {
    this.name = name;
    this.age = age;
  }
  public eat(food: string) {console.log('吃什么', food);
  }
  private getAge() {return this.age;}
}
class Dog extends Animal1 {
  color: string;
  constructor(name: string, age: number, color: string) {super(name, age);
    this.color = color;
  }
  dogInfo() {// console.log(this.name);
    // console.log(this.body);
    // console.log(this.age);
  }
}

let an = new Animal1('哈哈', 2);
let dog = new Dog('哈哈', 2, 'white');
console.log(dog.name);
// console.log(dog.age);
// console.log(dog.body);
// console.log(dog.getAge());

类本身上的属性和办法

class Button {
  static type = 'link';
  static getType() {return Button.type;}
  public content: string;
  constructor(content: string) {this.content = content;}
}
console.log(Button.getType);
console.log(Button.type);

class SubButton extends Button {}
let btn = new SubButton('ok');
SubButton.type = 'e';
console.log(Button.type);
console.log(SubButton.type);

是抽象概念, 不能被实例化

abstract class Input {
  label: string;
  abstract changeValue(): void; // 此办法在子类中必须得实现}
class SearchInput extends Input {changeValue() {} // 必须得实现抽象类里形象办法}

形象办法不蕴含具体实现, 必须在子类中实现
有关键字 abstract

关于ts:TypeScript教程基础

TS 介绍

TS 是什么

为什么要用 TS

TS 装置

数据类型

类型推论

联结类型

类型断言

字符串字面量类型

字符串字面量 vs 联结类型

函数

函数定义

可选参数

残余参数

函数的重载

类

如何定义类

存取器

参数属性

readonly

继承

类外面的修饰符

动态属性静态方法

抽象类

接口