1 类型注解和类型推断
简单的理解，类型注解就是明确指定我们定义的变量或者函数是什么类型，而类型推断是TS根据代码，推断出变量或者函数应该是什么类型。如下：
// 类型推断
let a = 11;
let b = 2;
let total = a + b;
// 类型注解
let aa: number = 11;
function count(x: number, y: number) {
return a + b;
}
let c = count(1, 2);
2 基本数据类型
基本数据类型有：boolean、number、string、null、undefined、void、symbol
- boolean
let isDone: boolean = false；
- number
let age: number = 20；
let binaryNumber: number = 0b1111; // 二进制
- string
let firstName: string = 'aaa'；
let message: string = `Hello, ${firstName}, age is ${age}`；
- null
null 是所有类型的子类型
let n: null = null;
- undefined
undefined 也是所有类型的子类型
let u: undefined = undefined;
3 对象类型
基本数据类型有：对象、数组、函数、class等
class Person {}
// 类
const worker: Person = new Person();
// 普通对象
const teacher: {
name: string;
age: number;
} = {
name: 'dell',
age: 1,
};
// 数组
const nmus: number[] = [1, 12];
// 接口
interface Point {
x: number,
y: number
}
const counter: Point = {
x: 1,
y: 2
}
// 函数
const getTotal: () => number = () => {
return 1;
}
4 any 类型和联合类型（不确定类型）
- any
避免使用 any，任何操作返回的类型，也是 any，IDE 也没有任何提示。
let notSure: any = 4;
notSure = 'maybe it is a string';
notSure = true;
notSure.myName;
notSure.getName();
- 联合类型
允许一部分联合类型
let numberOrString: number | string = 234;
numberOrString = 'abc';
5 Array 和 Tuple 类型
- Array
let arrOfNumbers: number[] = [1, 2, 3, 4];
arrOfNumbers.push(5);
类数组，有数组的一些属性或者方法，但是它不是数组类型，如：arguments，它的类型其实 ts 已经定义好了，是 IArguments
function test() {
console.log(arguments);
}
其他常见的数组类型注解，如：定义多种类型，类型别名使用，还有 class、数组对象等
// 字符串或者数字
const arr: (string | number)[] = ['name', 1212];
// 类型别名
type User = {
name: string;
age: number;
};
const oArr: User[] = [
{
name: 'xiaoming',
age: 12,
},
];
class Teacher {
name: string;
age: number;
}
// 数组，类型也是可以是class
const teacherArr: Teacher[] = [
new Teacher(),
// 注意，对象属性对的上，TS类型检查也是认为是可以的
{
name: 'xiaoming',
age: 12,
},
];
- Tuple 元组类型
Tuple 元组类型，是合并了不同种类型的组合，也就是说，数组的各个项是确定类型的，如下的 user，数组的第一项是 string，第二项是 number。
let user: [string, number] = ['viking', 1];
还有如下更有复杂的元组类型定义，数组里面的数组类型定义
const info: [string, string, number][] = [
['name', 'gener', 12],
['name', 'gener', 12],
]
扩展：null 与 undefined 的区别？
在JavaScript中，null 和 undefined 几乎相等
在 if 语句中 null 和 undefined 都会转为 false，两者用相等运算符比较也是相等
console.log(null == undefined); // true 因为两者都默认转换成了false
console.log(typeof undefined); // "undefined"
console.log(typeof null); // "object"
console.log(null === undefined); // false "==="表示绝对相等，null 和 undefined 类型是不一样的，所以输出 “false”
null 和 undefined 基本同义，二者又有什么区别呢？
- 1 null 是一个表示”无”的对象，即该处不应该有值
1） 作为函数的参数，表示该函数的参数不是对象
2） 作为对象原型链的终点
- 2 undefined 是一个表示”无”的原始值，或者表示缺少值，即此处应该有值，但没有定义
1）定义了形参，没有传实参，显示 undefined
2）对象属性名不存在时，显示 undefined
3）函数没有写返回值，即没有写 return，拿到的是 undefined
4）写了return，但没有赋值，拿到的是 undefined
3 null 和 undefined 转换成 number 数据类型
- null 默认转成 0
- undefined 默认转成 NaN
4 当声明的变量还未被初始化时，变量的默认值为 undefined
6 类型断言和类型保护
一般在联合类型声明中，TS 有时候不能判断到底是属于哪个类型，可以通过类型断言，或者类型保护，告诉 TS 是属于哪个类型，意思就是开发者比 TS 校验更懂。
类型断言，可以通过 as、类型保护，通过 in 、typeof、instanceof 等，如下示例：
interface Dog {
fly: boolean;
eat: () => {};
}
interface brid {
fly: boolean;
sing: () => {};
}
// 使用 as 断言；
// 联合类型
function fc1(params: Dog | brid): void {
if (params.fly) {
const b = (params as brid).sing();
}
}
// 使用 in 判断独立的属性是否存在
function fc2(params: Dog | brid): void {
// 断言
if ('sing' in params) {
params.sing();
return;
}
params.eat();
}
// typeof
function add(first: string | number, second: string | number): number {
// 类型的保护
if (typeof first === 'number' && typeof second === 'number') {
return first + second;
}
return 0;
}
// instanceof，必须是 class，不能是 interface
class NumObj {
count: number = 1;
}
function add2(first: object | NumObj, second: object | NumObj): number {
// 类型的保护
if (first instanceof NumObj && second instanceof NumObj) {
return first.count + second.count;
}
return 0;
}
网友评论