类型
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',
}