TypeScript 使用（一）

Karsuo
1,042 阅读6分钟

1-返回值类型

function add(first:number, second:number): number {
    return first + second
} 
const total = add(1,2)

2-void类型，返回值为空，希望没有return值

function say(): void {
    console.log("122")
}

3-never类型，永远不可能执行到最后

function error(): never {
    throw new Error()
    console.log("1111")
}

4-解构语法定义类型

function add({first, second}: {first:number, second:number}): number {
    return first + second
}
add({first:1,second:2})

5-基础类型 boolean，number,string,void,undfined,symbol,null

let count: number;
count = 100

6-对象类型 ，{}，Class, function, []

const func = (str:string): number => {
    return parseInt(str, 10)
}
const func:(str: string) => number = (str) => {
    return parseInt(str, 10)
}

interface Person {
    name: string
}
const q = "{"name": "jack"}";
const b: Person = JSON.parse(q);

7-或类型 |

let temp: number | string = 124；
temp = "1212"

8-数组

const arr: (number | string)[] = [1,'2',3]
const strArr: string[] = ['d','f','g']
const undefinedArr: undefined[] = [undefined]

const objectArr: {name: string, age: number}[] = [{
    name：'jack',
    age:  26
}]

9-类型别名 type

type User = {name: string, age: number}
const objectArr: User[] = [{
    name：'jack',
    age:  26
}]

10-元组

const info: [string, string, number] = ['jack', 'ben', 100]

11-interface

interface Person {
    readonly tag: string     // readonly表示该属性只读，不能覆盖改它
    name: string,
    age?: number    // ?表示该属性可有可无
    [propName: string]: any   // 我还可以有格外 其他属性，只要符合规格就可以
    say(): string
}
const setName = (person: Person, name): void => {
    person.name = name;
}
setName({name: "jack"}, "duke")
const a = {
    name: "jack",
    say(){
        return "kao "
    } 
}

// [propName: string]: any
setName({ name: "jack"，sex: "niu"}, "duke")

用变量传参好过用字面量传参，用自面量直接赋值传参会强校验,用变量缓起来传值就不会那么严格了

12- 一个class类想去应用一个interface接口

class User implements Person {
    name: "dragon",
    say() {
        return "gan"
    }
}

13- 接口之间可以相互继承

传参除了要有Person的属性外，还必须要有Teacher里的属性，如果你是：Teacher

interface Teacher extends Person {
    teach(): string
}

14- 定义函数接口类型

interface SayHi {
    (word: string): string
}

const say: SayHi = (word: string) => {
    return word
}

15-类的定义与继承 super用法

super用来调用父类的方法

class Person {
    name: 'jack',
    getName() {
        return this.name
    }
}

class Teacher extends Person {
    getTeach() {
        return "teach"
    }
    getName() {
        return super.getName() + 'duke!!!'
    }
}

16- private, protected, public 访问类型

默认就是public类型 ，允许在类的内外被调用
private类型, 允许在类内被使用
protected类型，允许在类内及继承的子类中使用

class Person {
    private name: string,
    // protected name: string,
    public sayHi() {
        this.name;
        console.log("name~~~")
    }
}

 class Teacher extends Person {
     public sayBye() {
         this.name
     }
 }

const person = new Person();
person.name = "ben";
console.log(person.name)
person.sayHi()

17- constructor 实例化

实例化的时候 constructor() 这个方法瞬间会自动执行，它能接收传过来的参数

// 传统写法
class Person {
    public name: string,
    constructor(name: string){
        this.name = name
    }
}
// 简化写法
class Person {
    constructor(public name: string){ }
}
 
const person = new Person('jack')

18- .如果父类有constructor构造器(并且有值)，子类也要声明构造器的时候，子类里面一定要手动调用一下父类的构造器

  • super 指的是父类
  • super() 指的是调用父类的构造函数
class Person {
    constructor(public name: string){ }
}
class Teacher extends Person {
    constructor(public age: number) {
        super('jack')
    }
}

const teacher = new Teacher(1000);

19- .如果父类没有写constructor构造器(没有值)，子类里面一定要手动调用一下父类的构造器 super() 空

class Person { }

class Teacher extends Person {
    constructor(public age: number) {
        super()
    }
}

const teacher = new Teacher(1000);

20- 静态属性 (getter得到, setter赋值)

  • private表示的是私有属性
  • _ 属性前加 _ 也表示是私有属性
class Person {
    constructor(private _name: string){ }
    get name() {
        return this._name + " ben"
    }
    set name(name: string) {
        const realName = name.split(" ")[0]
        this._name = realName
    }
}
const person = new Person("duke")
person.set = 'duke ben'

21- 单例模式(就是永远只能生成一个实例)

  • static就是直接把这个方法挂载在类上，而不是类的实例上面
class Demo {
    private static instance: Demo;
    private constructor(public name: string) {}     // 声明私有的话，就不能用new外部调用了 
    static getInstance() {
        if(!this.instance){
            this.instance = new Demo("jack");
        }
        return this.instance;
    }
}

// 按道理来讲 demo1和demo2都是相同的实例
const demo1 = Demo.getInstance();
const demo2 = Demo.getInstance();

22- readonly 只能读不能改

class Person {
    public readonly name: string
    constructor(name: string){
        this.name = name
    }
}

const person = new Person("jack")
person.name = "dragon"  // 报错，因为设置了readonly

23- 抽象类 (把公用的东西抽出来，里面可以设置抽象方法，或实际的方法和属性)

  • 如果抽象类有抽象方法，extends继承的时候，要实现它不然会有红色报错
abstract class Geom {
    width: number;
    getType() {
        return "Geom"
    }
    abstract getArea(): number
}

class Circle extends Geom {
    getArea() {
        return 100
    }
}

24- Parmetets <typeof http>

  • http是函数中一个带参数的方法
  • Parameters 把http这个函数类型的变量和类型提取出来，可以读出这个http的参数类型
([a , b]: Parameters<typeof http>) => ^ ^…… ……

25- Partial <Person> ，可以没有其中一个或几个类型

type Person = {
    name: string,
    age: number
}
const dragon: Partial<Person> = {name: "dragon"}
const dragon: Partial<Person> = {}

26- Omit <Person, 'name'>, Person中可以没有name类型

type Person = {
    name: string,
    age: number
}
const dragon: Omit<Person, 'name'> = {age: 100}
const dragon: Omit<Person, 'name' | 'age'> = {}

27- keyof 的作用就是把一个对象类型的所有 key 取出来，以及Partial 的实现

type PersonKeys = keyof Person

// in 就是遍历的意思
type Partial<T> = {
    [P in keyof T]?: T[P]
}

28- Pick 的使用 Pick<Person, 'name'>

  • 就是从一个复合类型中，取出几个想要的类型的组合
type Pick<T, K extends keyof T> = { 
    [key in K]: T[key] 
}

// 原始数据
type Person = {
    name: string,
    age: number,
    size: number
}
// 如果我只想要name和age
interface TPerson extends Pick<Person, "name" | "age"> {};

29- Exclude 的使用Exclude<PersonKeys, 'name'>

  • 排除联合类型中一部分的内容,注意Exclude是操作联合类型的
type Exclude<T, U> = T extends U ? never : T;

我们这里用 T 也就是 ‘name’ | ‘age’ | ‘size’ 去代表 
用 name 属性去代表第二个泛型 **U**
T extends U 就判断是否’name’ | ‘age’ | ‘size’ 有 **name**， 有**name**就返回**never**,就代表将其排除

const demo1: Exclude<Person, 'name'> = age;
const demo1: Exclude<Person, 'name'> = name;  // 报错不能将 'name' 分配给 'age' | 'size'

30- as 关键字的使用，限制类型

// params的类型是个object 并且里面有一个redirect的属性是string类型的,规定了`redirect`是`string`类型
let { redirect } = params as { redirect: string };
const params = getPageQuery();
export const getPageQuery = () => parse(window.location.href.split('?')[1]);

let child: HTMLElement = allChildren[i] as HTMLElement;
as 是 ts的关键字,只是用来限制`child的类型`。
js没有强类型声明，不需要as。 这个as实际什么都没干，它就是一个类型断言。

let someValue: any = "this is a string"; 
let strLength: number = (someValue as string).length;

31- TypeScript中的“as const”的意思

let obj = {
  x: 10,
  y: [20, 30],
} as const;

对位于：

let obj: {
  readonly x: 10;
  readonly y: readonly [20, 30];
};

使用 const，我们可以将字面量锁定为其显式值，也不允许修改，数组字面量成为只读元组
as const可以让ts不设置数组而是设置成当前的类型

32- typeof 简介

  • typeof 操作符可以用来获取一个变量或对象的类型
interface Person { 
    name: string; 
    age: number; 
}; 
const sem: Person = { name: "semlinker", age: 30 }; 
type _Sem = typeof sem; // type _Sem = Person

// 通过 typeof 操作符获取 sem 变量的类型并赋值给 Sem 类型变量，之后我们就可以使用 Sem 类型
const lolo: _Sem = { name: "lolo", age: 5 }

结语

前端react QQ群：788023830 ---- React/Redux - 地下老英雄

前端交流 QQ群：249620372 ---- FRONT-END-JS前端

（我们的宗旨是，为了加班，为了秃顶……，仰望大佬），希望小伙伴们加群一起学习

avatar
文章
阅读
粉丝