1.TypeScript 的静态类型
- 如何定义静态类型：
const count: number = 1;
这就是最简单的定义一个数字类型的count的变量，这里的: number就是定义了一个静态类型。这样定义后count这个变量在程序中就永远都是数字类型了，不可以改变了。比如我们这时候给count复制一个字符串，它就报错了。
//错误代码
const count: number = 1;
count = "test";
但这只是最简单的理解，再往深一层次理解，你会发现这时候的count变量,可以使用number类型上所有的属性和方法。我们可以通过在count后边打上一个.看出这个特性，并且编辑器会给你非常好的提示。
- 自定义静态类型
interface XiaoJieJie {
uname: string;
age: number;
}
const xiaohong: XiaoJieJie = {
uname: "张三",
age: 18,
};
这时候你如果声明变量，跟自定义不一样，VSCode直接就会报错。需要注意的是，这时候xiaohong变量也具有uname和age属性了。如果使用了静态类型，不仅意味着变量的类型不可以改变，还意味着类型的属性和方法也跟着确定了。这个特点就大大提高了程序的健壮性。
2.TypeScript 基础静态类型和对象类型
在 TypeScript 静态类型分为两种，一种是基础静态类型，一种是对象类型
- 基础静态类型
基础静态类型,只要在声明变量的后边加一个:号，然后加上对应的类型
const count : number = 123;
const myName ：string = 'test'
类似这样常用的基础类型还有,null,undefinde,symbol,boolean，void这些都是最常用的基础数据类型，
- 对象类型
const xiaoJieJie: {
name: string,
age: number,
} = {
name: "张三",
age: 18,
};
console.log(xiaoJieJie.name);
对象类型也可以是数组
const xiaoJieJies: String[] = ["张三", "李四", "王五"];
这时候的意思是，变量xiaoJieJies必须是一个数组，数组里的内容必须是字符串。如果是把字符串改为数字，代码会报错。
//错误代码
const xiaoJieJies: String[] = ["张三", "李四", 1];
用类的形式，来定义变量
class Person {}
const xjj: Person = new Person();
这个意思就是xjj必须是一个Person类对应的对象才可以。我们还可以定义一个函数类型，并确定返回值。代码如下：
const newxjj: () => string = () => {
return "张三";
};
TypeScript的对象类型有几种形式
- 对象类型
- 数组类型
- 类类型
- 函数类型
3.TypeScript 中的类型注释和类型推断
- type annotation 类型注解
let count: number;
count = 123;
这段代码就是类型注解，意思是显示的告诉代码，我们的count变量就是一个数字类型，这就叫做类型注解。
- type inferrence 类型推断
let countInference = 123;
这时候我并没有显示的告诉你变量countInference是一个数字类型，但是如果你把鼠标放到变量上时，你会发现 TypeScript 自动把变量注释为了number（数字）类型，也就是说它是有某种推断能力的，通过你的代码 TS 会自动的去尝试分析变量的类型。
- 如果 TS 能够自动分析变量类型， 我们就什么也不需要做了
- 如果 TS 无法分析变量类型的话， 我们就需要使用类型注解
不用写类型注解的例子:
const one = 1;
const two = 2;
const three = one + two;
用写类型注解的例子：
function getTotal(one, two) {
return one + two;
}
const total = getTotal(1, 2);
这种形式，就需要用到类型注释了，因为这里的one和two会显示为any类型。这时候如果你传字符串，你的业务逻辑就是错误的，所以你必须加一个类型注解，把上面的代码写成下面的样子。
function getTotal(one: number, two: number) {
return one + two;
}
const total = getTotal(1, 2);
这里有的一个问题是，为什么total这个变量不需要加类型注解，因为当one和two两个变量加上注解后，TypeScript 就可以自动通过类型推断，分析出变量的类型。
当然 TypeScript 也可以推断出对象中属性的类型，比如现在写一个小姐姐的对象，然后里边有两个属性。
const XiaoJieJie = {
name: "张三",
age: 18,
};
写完后你把鼠标放在XiaoJieJie对象上面，就会提示出他里边的属性，这表明 TypeScript 也分析出了对象的属性的类型。在写 TypeScript 代码的一个重要宗旨就是每个变量，每个对象的属性类型都应该是固定的，如果你推断就让它推断，推断不出来的时候你要进行注释。
4.TypeScript 函数参数和返回类型定义
- 简单类型定义
getTotal的函数，并且对传入的参数作了定义
function getTotal(one: number, two: number) {
return one + two;
}
const total = getTotal(1, 2);
这时候我们写的代码其实是有一个小坑的，就是我们并没有定义getTotal的返回值类型，虽然TypeScript可以自己推断出返回值是number类型。 但是如果这时候我们的代码写错了，比如写程了下面这个样子。
function getTotal(one: number, two: number) {
return one + two + "";
}
const total = getTotal(1, 2);
这时候total的值就不是number类型了，但是不会报错。正确写法如下：
function getTotal(one: number, two: number): number {
return one + two;
}
const total = getTotal(1, 2);
- 函数无返回值时定义方法
function sayHello() {
console.log("hello world");
}
这就是没有返回值的函数，我们就可以给他一个类型注解void，代表没有任何返回值。
function sayHello(): void {
console.log("hello world");
}
- 函数参数为对象(解构)时
function add({ one, two }) {
return one + two;
}
const total = add({ one: 1, two: 2 });
浏览器中你会看到直接报错了，意思是total有可能会是任何类型，那我们要如何给这样的参数加类型注解?
function add({ one, two }: { one: number, two: number }): number {
return one + two;
}
const three = add({ one: 1, two: 2 });
一个参数和多个参数都是一样的
5.TypeScript 中数组类型的定义
- 一般数组类型的定义
const numberArr = [1, 2, 3];
这时候你把鼠标放在numberArr上面可以看出，这个数组的类型就是 number 类型。这是 TypeScript 通过类型推断自己推断出来的。 如果你要显示的注解，也非常简单，可以写成下面的形式。
const numberArr: number[] = [1, 2, 3];
同样道理，如果你的数组各项是字符串，你就可以写成这样。
const stringArr: string[] = ["a", "b", "c"];
也就是说你可以定义任意类型的数组，比如是undefined。
const undefinedArr: undefined[] = [undefined, undefined];
这时候问题来了，如果数组中有多种类型，比如既有数字类型，又有字符串的时候。那我们要如何定义那。 很简单，只要加个()，然后在里边加上|就可以了，具体看代码。
const arr: (number | string)[] = [1, "string", 2];
- 数组中对象类型的定义
const xiaoJieJies: { name: string, age: Number }[] = [
{ name: "张三", age: 18 },
{ name: "李四", age: 28 },
];
这种形式看起来比较麻烦，而且如果有同样类型的数组，写代码也比较麻烦，TypeScript 为我们准备了一个概念，叫做类型别名(type alias)
type Lady = { name: string, age: Number };
const xiaoJieJies: Lady[] = [
{ name: "张三", age: 18 },
{ name: "李四", age: 28 },
];
这样定义是完全起作用的，比如我们下面在对象里再加入一个属性，这时候编译器就会直接给我们报错了。
这时候有的小伙伴就会问了，我用类进行定义可以吗？答案是可以的，比如我们定义一个Madam的类,然后用这个类来限制数组的类型也是可以的。
class Madam {
name: string;
age: number;
}
const xiaoJieJies: Madam[] = [
{ name: "张三", age: 18 },
{ name: "李四", age: 28 },
];
6.TypeScript 中元组的使用和类型约束
- 元组的基本应用
const xiaojiejie = ["zhangsan", "teacher", 28];
这时候把鼠标放到xiaojiejie变量上面，可以看出推断出来的类型。我们就用类型注解的形式给他作一个注解，代码如下：
const xiaojiejie: (string | number)[] = ["dajiao", "teacher", 28];
这时候你已经增加了代码注解，但是这并不能很好的限制，比如我们把代码改成下面的样子，TypeScript依然不会报错。
const xiaojiejie: (string | number)[] = ["dajiao", 28, "teacher"];
我们只是简单的把数组中的位置调换了一下，但是TypeScript并不能发现问题，这时候我们需要一个更强大的类型，来解决这个问题，这就是元组。
元组和数组类似，但是类型注解时会不一样。
const xiaojiejie: [string, string, number] = ["dajiao", "teacher", 28];
这时候我们就把数组中的每个元素类型的位置给固定住了，这就叫做元组。
网友评论