ts使用

134 阅读1分钟

对象类型定义

ts的对象类型定义分两种:type 和 interface

type animal = {
    name: string
    age: number
}

interface UserItem {
    name: string
    age?: number
}

暂时我觉着区别就是一个有等号,一个没有等号。

const petter: UserItem = {
    name: 'Petter',
    age: 18,
}

接口的继承

type animal = {
    name: string
    age: number
}

interface dog extends animal {
    bark: true
}


const petter: dog = {
    name: 'Petter',
    bark: true,
    age: 3
}

接口继承时舍弃数据

type Omit<T, K extends string | number | symbol>
type animal = {
    name: string
    age: number
}

interface dog extends Omit<animal,'age'> {
    bark: true
}


const petter: dog = {
    name: 'Petter',
    bark: true,
    age: 3  //不能将类型“{ name: string; bark: true; age: number; }”分配给类型“dog”。对象文字可以只指定已知属性,并且“age”不在类型“dog”中。
}

class User {
    name: string

    constructor(userName: string) {
        this.name = userName
    }

    getName() {
        console.log(this.name)
    }
}

const zhangsan: User = new User('张三')

zhangsan.getName()

同样可以使用继承、以及Omit舍弃数据

函数

总结了常见的几种方法

//写法一:函数声明
function sum1(x: number,y: number) {
    return x + y
}

//写法二:函数表达式
const sum2 = function(x: number,y: number): number {
    return x + y
}

//写法三:箭头函数
const sum3 = (x: number,y: number): number =>{
    return x + y
}

//写法四:对象方法
const obj = {
    sum4(x:number, y: number): number {
        return x + y
    }
}

参数可选

//可选参数必须放到最后,否则报错
function sum(x: number, y: number, isDouble?: boolean): number{
    return isDouble ? 2 * (x + y) : x + y
}


console.log(sum(1,2))
console.log(sum(1,2,true))

无返回值的参数

// 注意这里的返回值类型
function sayHi(name: string): void {
    console.log(`Hi, ${name}!`)
}

?:可选择属性

如果不添加?该对象的所有属性都需要定义,否则会报错,如果加上?就变为可选择属性,可填写,可不填写。

image.png

image.png

| 联合类型

|这里不表示联结,表示相连的类型都是正确的。

constructor(userName: string | number) {
    console.log(userName)
}

any任意值

function getFirstWord(msg:any){
    console.log(msg.split(' '[0]))
}

getFirstWord('Hello World')

getFirstWord(123)