TS

94 阅读2分钟

类型

Object对象类型

let obj: Object;
obj = {name: 'xxx'}

类型断言

有时候当值为联合类型时,在ts类型检查时,可能会出现问题

// 告诉ts该值一定为string类型;
// 两种写法:1.<类型>变量    2.变量 as 类型;如果是在react的jsx中时,只能使用第二种方式(as)
const getLength = (target: number | string): number => {
    if(<string>target.length || (target as string)){
        return (<string>target).length;
    }else{
        return target.toString().length;
    }
}

ES6-Symbol(基本数据类型,独一无二的值)

// 不需要使用new实例化创建;以函数的形式返回一个独一无二的Symbol值
// 内部会执行一个toString方法,将参数转成string类型
const s = Symbol(); // 参数只能是 number | string
console.log(s); // Symbol
const s2 = Symbol();
console.log(s2 === s); // false

// 对象中以Symbol值作为属性名时
const obj = {
    [`${Symbol(value)}`]: 'property',
}
1.for in循环获取不到该属性
2.Object.keys(对象) 获取不到symbol属性名
3.JSON.stringify(对象)  返回的字符串对象中不会显示symbol属性名
4.Object.getOwnPropertyNames(对象)  返回对象中的所有属性,除symbol  (数组)
5.Reflect.ownKeys(对象)  返回对象的所有属性名(包括symbol) (数组 )
6.Object.getOwnPropertySymbols(对象)  返回对象中的symbol属性名 (数组)

接口interface

// 接口定义,eslint中默认接口名需要以I开头
interface 接口名 {
    属性名: 类型,
}

// 如果需要设置可选属性的话
interface I接口名 {
    color?: string,   // 在属性名后加?
}

interface IObj {
    name: string,
    age: number,
}
const fn = (obj: IObj): void => {
    console(obj.name);
    console(obj.age);
}
// 使用接口后,函数中的参数个数与类型需要和接口定义的一致
fn({name: 'xxx', age: 18});

// 类型兼容性(跳过多余属性检测)
/*
* 将对象赋给obj时,对象中需要包含obj中所有的属性
*/
interface IObj {
    name: string,
    age: number,
}
const obj = {
    name: 'xxx',
    age: 18,
    sex: '男',
}
const getUserInfo = (obj: IObj) => {
    alert('');
}
getUserInfo(obj);
// 只读属性
interface IProperty {
    readonly name: string,  // 只能读取不能修改
}
let property = {
    name: 'xxx',
}
property.name = 'ccc';   // error ,不可赋值,该属性为只读属性

定义数组结构接口

// 0,1,2为数组索引;readonly只读
interface Array {
    0: number,
    1: string,
    2: boolean,
}
let arr: Array =[1, 'str', false];
访问数组元素: 数组[索引] ----> arr[1]

函数结构接口

interface addFun {
    (num: number, str: string): string,
    (函数参数1: 类型, 函数参数2: 类型): 返回值类型,
}
等同于
type AddFun = (num: number, str: string) => string

接口type

接口继承

interface tree {
    num: number;
}
// 继承tree接口后,拥有tree接口中的所有属性,与java中的子类继承父类,拥有父类的所有属性与方法类似
interface songshu extends tree {
    name: 'songshu',
}
interface yangshu extends tree {
    name: 'songshu',
}