类型分为:静态类型和对象类型
// 基础类型
const count : number = 1;
// 基础对象类型
const obj : {
name: string,
age: number
} = {
name: 'aaa',
age: 11
};
// 数组类型
const arr: string [] = ['aaa', 'bbb', 'ccc'];
// 类类型
class Person{}
const xiaoming: Person = new Person();
// 函数类型
const funcTs : () => string = () => {return '111'} // 分两部分看,前半部分说的是,类型为一个函数,返回值为一个string类型的,后半部分是等于的一个实际函数
// 类型注解和类型推断
function getTotal (one: number, two: string) {
return one + two;
}
const total = getTotal(1, 'aa');
// 这里要表达的意思就是,当我们没有对变量进行类型注解,如果ts无法判断出它属于哪种类型的的时候,回显示类型为any,这个就需要我们添加类型注解,如果ts能够正常推断出来,我们就不用做注解。
数组类型的定义:
const stringArr : string [] = ['a', 'b', 'c']; // 定义数组参数类型为string
const numberArr : number [] = [1, 2, 3]; // 定义数组类型为number类型的
const objArr : {name: string, age: number} [] = [{name: 'aaa', age: 12}] // 定义数组类型为对象类型,并且定义了对象参数的类型
// 但是上面这种写法过于繁琐,一旦对象参数过多时,这里就会是一长串, 所以引入了类型别名这个概念
// 类型别名(type alias) type
type lady = {name: string, age: number};
const objArr1 : lady [] = [{name: 'aaa', age: 12}]
// 另外还可以定义成类的形式
class man {
name: string;
age: number
}
const objArr2 : man[] = [{name: 'xiaohong', age: 13}]
元组类型:
// 假设有数组是这种格式 ['aaa', 'bbb', 'ccc', 12, false]
const cvsArr = ['aaa', 'bbb', 'ccc', 12, false]; // 这时ts的类型推断给我们的是cvsArr: (string | number | boolean)[],意思就是,不管你们有好多数据,必须保证你的数据类型顺序是按照这个走的;
const cvsArr1 : (string | number | boolean) [] = ['aaa', 14, true];
// 以上的写法虽然可以判断出大体的数据类型顺序,但是无法定位到每一项上面,而且上面数据类型移动一下顺序,ts无法识别到错误,但是其实已经报错了
// 所以元组就对这样的数组进行了一个加强
const cvsArr2 : [string, number, boolean][] = [
['aaa', 12, false],
['aaa', 13, false],
['aaa', 14, true]
]
接口interface:
// 接口和类型别名的区别
type name = string;
// type可以直接给单个类型定义,interface必须要是对象的形式
// 1.接口限制对象内属性和方法的类型
interface Person {
name: string;
age: number;
height: number;
sex ?: string; // 可选类型,代表如果后面的势力没有这个属性也是可以的
[propname: string] : any; // 可以自定义属性,属性名必须是字符串形式,属性值可以是any类型
say() : string; // 添加一个方法,这个方法必须要返回一个string类型的数据
};
// 2.接口限制类的类型
class girl implements Person {
name: 'xiaohong';
age: 12;
height: 165;
say() {
return 'hello,我是类的限制'
}
}
// 3.接口也可以实现继承
interface Teacher extends Person {
do() : string
}
const fillPerson = (person: Person) => {
person.age > 20 && person.sex === '男' && console.log(person.name + '符合要求');
(person.age <= 20 || person.sex !== '男') && console.log(person.name + '被pass了');
}
const getPerson = (person: Teacher) => {
console.log(person.say()); // 注意: person.say 和person.say()是不同的,前面一个是直接作为方法属性调用,是不执行的,后面一个才是执行函数
console.log(person.do());
}
let daqiang = {
name: 'daqiang',
age: 18,
height: 170,
// sex: 12 可选值
weight: 56,
say(){
return 'hello';
},
do() {
return 'Teacher继承了Person接口,还额外多加了一个do方法';
}
}
fillPerson(daqiang); // daqiang被pass了
getPerson(daqiang); // hello Teacher继承了Person接口,还额外多加了一个do方法