TS 重点笔记

目录

一、类型定义

1.1、基础定义

1.2、多类型、可选类型、及类型判断规则

1.3 泛型

1.4 类型继承 

1.5  可选属性、只读属性

1.6  内置工具类型

二、类

1、修饰符

2、类也可以当接口使用

---

 

一、类型定义

1.1、基础定义

ts中基础类型有：string、number、boolean、array、object、any(任意类型)、viod(null、undefined)、null、undefined

// 字符串类型定义
const a:string = 'a'

// 数字类型定义
const a:number = 1

// 布尔值类型定义
const a:boolean = false

// 数组类型定义
const arr:[] = [1] 
const arr:number[] = [1] // 常规定义内部类型
const arr:Array<number> = [1] // 泛型定义内部类型
const arr:[number,string,boolean] = [1,'2',false] // 对应下标定义

// 对象类型定义

const obj:{a:number,b:string} = {a:1,b:'2'}
const obj:{a:number,b:string,[propName:string]:any} = {a:1,b:'2',c:3,d:false}
// [propName:string]:number 定义额外类型

// 定义函数类型

function fn():number {
    return 1
} // 定义函数返回值类型

const fn: { (key: number, val: string): { c: number } } = function(key,val) {
   return { c: 1 }
} // 定义形参及函数返回值

const fn: { (key: number, val: string) } = function(key,val) {

} // 定义形参,无返回值可以不写：及后面的||：void，不写：及后面表示不定义返回值类型。

1.2、多类型、可选类型、及类型判断规则

多类型、可选类型如下：

// 多类型定义
const a:string|number|Boolean  // 表示 a 可以支持三个类型


// 可选类型
const obj:{a:number,b:string} = {a:1} 
// error=> Property 'b' is missing in type '{ a: number; }' but required in type '{ a: number; b: string; }'.
const obj:{a:number,b?:string} = {a:1} // ok

const obj:{a:number,b:string} = {a:1,b:'2',c:false} 
// error=>  Object literal may only specify known properties, and 'c' does not exist in type '{ a: number; b: string; }'.
const obj:{a:number,b:string,[propName:string]:any} = {a:1,b:'2',c:false}  // ok

类型判断规则，值的是ts会在如下这几种情况如何判断类型的。

1. obj:{a:number,b:string} = {a:1,b:'2'} ，严格判断每个key名称及value 的类型。

2.const a = { a: 1 } as { a: number; b: string }，类型断言，被断言的参数必须在定义的类型中能找到并且value类型相匹配。interface保函 被定义对象。

1.3 泛型

泛型T类似于函数传参，T可以代替任何类型，例：

interface types<T> {
    a:number
    b:T
}

const obj:types<number> = {a:1,b:2} // ok
const obj:types<boolean> = {a:1,b:false} // ok

// 泛型继承

interface Lengthwise {
    length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
    console.log(arg.length);  // Now we know it has a .length property, so no more error
    return arg;
}

// arg 传入字符串. T无length 属性。 动态添加length属性

1.4 类型继承 

ts中interface接口可以 继承类型，继承的类型拥有被继承的属性，也可继承类

// 继承类型

interface type1 {
    a:string
}
interface type extends type1 {
    b:number
}
const a: type = { a: '123', b: 1 } // ok , type : {a:string,b:number}

interface type1 { a: string }
interface type extends type1 { b: number,a: number } 
// error => Interface 'type' incorrectly extends interface 'type1'.
// Types of property 'a' are incompatible.
// Type 'number' is not assignable to type 'string'.
// 接口类型不兼容，type type1 类型key有重名

// 继承类

class Control {
  state: any
}

interface SelectableControl extends Control {
  select(): void
}

class Button extends Control implements SelectableControl {
  select() {}
}

// 错误：“Image”类型缺少“state”属性。
class Image implements SelectableControl {
    select() { }
}


const obj: SelectableControl = { state: 1, select: () => {} } // OK

1.5  可选属性、只读属性

// 可选属性 

interface SquareConfig {
    color?: string
    width?: number
}

const obj:SquareConfig = {color:'123'} // ok

// 只读属性

interface Point {
    readonly x: number;
    readonly y: number;
}

let p1: Point = { x: 10, y: 20 };
p1.x = 5; // error=> Cannot assign to 'x' because it is a read-only property.

1.6  内置工具类型

Record: 定义对象所有建值类型
 

const object<string,number> = {
    a:1,
    b:2
}

Partial:复制类型，新类型所有项变为可选项

interface type1 {
    name: string
    age: number
}

type type2 = Partial<type1>

// 等同于

type2 = {
    name?: string
    age?: number
}

// 原理

type Partial<T> = {
    [P in keyof T]?: T[P]
}

 Required：复制类型，新类型所有选项为必选。
 

// 例子参考上面的 Partial

// 原理

type Require<T> = {
    [p in keyof T]-?: T[P]
}

Readonly：复制类型，新类型中key(键)为只读。

Pick: 从T类型中取，key相同的类型。

interface type1 {
    age:number,
    name:string,
    isPerson?:boolean
}

type type2 = Pick<type1,'isPerson'|'name'>

// 等同于
type type2 = {
    isPerson?:boolean,
    name:string
}

Exclude: 单类型取异。
 

type type1 = string | number
type type2 = string | number | boolean

type p = Exclude<type2, type1>

// type p = boolean

type p = Exclude<type1, type2>

// type p = never

Extract: 单类型取同。 

type type1 = string | number
type type2 = string | number | boolean

type p = Extract<type2, type1>

// type p = string | number

type p = Exclude<type1, type2>

// type p = string | number

 Omit: 多类型排除

type type1 = {
	name: string
	age: number
}

type type2 = Omit<type1, 'age'>
// 等同于于
type type2 = {
	name: string
}

二、类

1、修饰符

public 可见的（默认）；

private 只在造函数中可见;

protected同private多个条件子类也可见；

readonly 只读，只能在定义的时候或者  constructor 中修改；

static静态属性，不需要new 可以通过 类.[key] 直接访问。

protected&&private 例:

// private 
class Person {
    private name: string='123'
}

const a = new Person()

a.name // error=> Property 'name' is private and only accessible within class 'Person'.

// protected

class Person {
    protected name: string='123'
}

class Person2 extends Person {
    getName(){
        console.log(this.name)  // 子类可见
    }
}

const a = new Person()
const b = new Person2()
a.name // error=> Property 'name' is protected and only accessible within class 'Person' and its subclasses.
b.name // error=> Property 'name' is protected and only accessible within class 'Person' and its subclasses.

readonly 例：

class Octopus {
    readonly name: string = 'yangbuguo'; // 定义时可赋值
    constructor (theName: string) {
        this.name = theName;  // constructor 可修改
    }
}
let dad = new Octopus("Man with the 8 strong legs");
dad.name = "Man with the 3-piece suit"; // 错误! name 是只读的.

static 例：

class Person {
    static value: string = '123'
    constructor() {
    console.log(this.value) // undefined
    console.log(Person.value) // 123
}
}
const a = new Person()
console.log(a.value) // undefined
console.log(Person.value) // 123

2、类也可以当接口使用

class Point {
    x: number;
    y: number;
}

interface Point3d extends Point {
    z: number;
}

let point3d: Point3d = {x: 1, y: 2, z: 3};
const a: Point = new Point()

.....