TypeScript总结

TypeScript notes:🤓🤓🤓

前沿：为什么要学习typescript？🤓😼😼

假设有一个需求，求一个两数之和的函数

function(a,b){
	return a+b
}

我们本意：a，b两个数分别为整数，然后返回的值是两个数字的合数。但如果我们传入的变成了一个字符串。返回的将是一个字符串拼接的数字。但我们也可以手动来检查类型定义。

function add(a, b) {
    if (typeof a !== 'number' || typeof b != 'number') {
        throw new Error("类型错误")
    }
    return a + b
}
console.log(add('1', 2));

但如果这样多了，会大大地增加我们的内存开销。反正检查类型是在开发阶段用的，那么，我们为什么不用一个检查工具呢？这个时候，typescript就横空出示了！！！

可以这样理解，typescript就是一个辅助我们开发的检查工具。浏览器运行不了ts，最终还是要将ts编译成js。

1.静态类型定义😼

限制基础类型：

let a: number = 19
let b: string = "121"
let c: boolean = true
let d: undefined
let e: null = null
let f: any=21123h

数组限制：😼

​ 存放数组

想要一个数组里面所有元素为一个指定类型：

​ 有两种方式：

let arr: number[] = [1, 2, 3, 5, 6]
let arr1: Array<string> = ['1', '2', '3']

数组每个元素指定类型

​ 利用元祖写法

let arr2:[number,string]=[18,'jack']

对象限制写法😼

有两种方式的写法：

​ 正常写法:

let a: { x: number, y: number } = {
    x: 10,
    y: 20
}

​ 接口写法：

interface kang {
    x: number,
    y: number
}

let a: kang = {
    x: 10,
    y: 20
}

枚举😼

理解为对象的双重取值，key<---->value可以相互取值。

enum COLOR { red, green }
console.log(COLOR.red);//0
console.log(COLOR.green);//1
console.log(COLOR[1]);//green
console.log(COLOR[2]);//undefined

函数：😼

基本用法😼

function width(a: number, b: number): string {
    return a + b + 'px'
}
console.log(width(100, 200));

数组解构赋值😼

function add([a, b]: number[]): number {
    return a + b
}
function add2([a, b]: Array<number>): number {
    return a + b
}
function add3([a, b]: [number, number]): number {
    return a + b
}
console.log(add([1, 2, 34, 5]));
console.log(add2([1, 2, 34, 4]));
console.log(add3([1, 2]));

省略号赋值😼

function addAll(a: number, b: number, ...c: Array<number>): number {
    return a + b + c.reduce((a, b) => a + b)
}
console.log(addAll(1, 2, 3, 4, 5, 6, 7, 8, 9, 10));

对象解构😼😸

就采用对象的规则：普通写法，接口写法

---

2.箭头函数😸😸😸

箭头函数变量如果为一个的时候，建议不要简写，ts中不能定义类型，应当如下：

const self = (a: number): string => a + 'px'

另一种方法定义箭头函数类型

let a: (x: number, y: number) => number = (x, y) => {
    return x - y
}

3.interface😸😸😸

限制函数类型：😸

interface mathFn {
    (x: number, y: number): number
}

将箭头函数的 ------> 改写成 ：

对象当做函数参数来限制😸😸

interface myRule {
    name: string,
    age: number
}

let a: (p: myRule) => string = (p) => {
    return `名字为${p.name}\t\t\t年龄为${p.age}  `
}

或类型😸

interface my {
    name: string,
    age: number | string
}

可有可无😸

interface my {
    name: string,
    age: number | string,
    hobby?: string
}

接受任意个对象，对于某些对象有限制😸

interface my {
    name: string,
    age: number | string,
    hobby?: string,
    [props: string]: any
}
let obj: my = {
    name: "111",
    age: 10,
    hobby: '王者荣耀',
    status: 'shadiohsa',
    asusao: '12wnsdklnjas'
}

函数：😸

interface P {
    name: string,
    age: number,
    say(): void
}
let obj: P = {
    name: "sdoakoodj",
    age: 10,
    say() {
        console.log("hello world!!");
    }
}
obj.say()

interface Self {
    (a: number, b: number): number
}
interface P {
    name: string,
    age: number,
    say: Self
}
let obj: P = {
    name: 'snad',
    age: 12,
    say: (a, b) => a - b
}
console.log(obj.say(1, 2));

接口继承😸

extends

联合类型😸

interface AAAAAAAA{
    a: number
}

interface BBBBBBBB{
    b: number
}

//联合类型
type C = AAAAAAAA | BBBBBBBB

只读😸

readonly

4.字面量来定义类型😸

只能是定义时候的数据，典型用法为：与 | 结合起来使用：

let a='man'  | 'sex'   a只能是man或者sex中的一个值

5.type类型😸

| 和 & 结合起来使用的用法：

type rule = string | number
let a: rule
a = '121'
a = 121
export { }

&的用法：

interface Person {
    name: string
}
interface User extends Person {
    fans: number
}
interface Up extends Person {
    liuliang: number
}
type UpAndUser = User & Up
let obj: UpAndUser = {
    name: 'sha',
    fans: 10000,
    liuliang: 12121
}

6.unknown类型😸

我们在typescript尽量避免去使用any，因为使用any会跳过类型检查。例如：

let a: any
a = 1
a = "1212"
let b: boolean = true
b = a
console.log(a, b);

所以，针对这个问题，我们引出了unknown这个类型。

let a: unknown
a = 1
a = "1212"
let b: boolean = true
b = a//会报错，不会错过类型检查
console.log(a, b);

as😸

当我们肯定这个类型就是那个类型的时候，可以使用as，将那个类型当成as 类型来处理

let a: unknown;
a = 1
a = "1"
let b: string
//b = a//这样虽然都是字符串，但是会报错
b = a as string  //这样将a当成字符串来处理，不会报错

这样虽然不会报错，但是如果我们肯定的类型为错误的时候，我们也会错！显然，这种方法对人的要求很高

7.泛型😸

目的：定义函数/类的时候，遇到==参数不确定，==我们可以使用泛型。

function add<T>(a: T): T {
    return a
}
console.log(add(1));

8.面向对象😸😸😸💓

基本用法：

class Person {
    name: string
    age: number
    constructor(name: string, age: number) {
        this.name = name
        this.age = age
    }
}

如果在构造器外面用常量赋值，这个值是实例上可以使用的。💓💓

class Person {
    name: string
    age: number
    z: number = 100
    constructor(name: string, age: number) {
        this.name = name
        this.age = age
    }
    say(a: number, b: number): number {
        return a + b
    }
}
let YK = new Person('shuyikang', 100)
console.log(YK.say(1, 2));
console.dir(YK);

静态属性：💓💓💓

实例不能访问，通过类名去访问。

class Person {
    name: string
    age: number
    z: number = 100
    constructor(name: string, age: number) {
        this.name = name
        this.age = age
    }
    static say(a: number, b: number): number {
        return a + b
    }
}
let YK = new Person('shuyikang', 100)
console.log(Person.say(1, 2));
console.dir(YK);
export { }

抽象类 抽象方法💓💓💓

和java一样 目的是：重写里面的方法—作为一个检验机制。

abstract class Animal {
    name: string
    constructor(name: string) {
        this.name = name
    }
    abstract say(): void
}
class Dog extends Animal {
    say(): void {
        console.log('我在狗叫');
    }
}
class Pig extends Animal {
    say(): void {
        console.log('我在猪叫');
    }
}
let dog = new Dog('旺财')
let pig = new Pig('佩奇')
dog.say()
pig.say()
export { }

接口💓💓

定义一种规则，然后类通过implements来是实现这种规则。

interface Person {
    name: string,
    age: number
}
class P implements Person {
    name: string
    age: number
    constructor(name, age) {
        this.name = name
        this.age = age
    }
}

私有属性💓💓

除了本类，子类都不可以访问。类的实例对象也不能访问

interface Person {
    name: string,
    age: number
}
class P implements Person {
    name: string
    age: number
    private c: number = 1000
    constructor(name, age) {
        this.name = name
        this.age = age
    }
}
let p = new Person('jack', 100)
console.log(p.c);

报错！

可以手动去设置set和age方法。
这篇文章总结了一些ts日常使用的常见知识，如果想要了解ts的更多特性可以去往官网🧑🏼‍🚀🧑🏼‍🚀🧑🏼‍🚀ts中文官网