TypeScript 的静态类型
1.如何定义静态类型
const count: number = 1;
这就是最简单的定义一个数字类型的count
的变量,这里的: number
就是定义了一个静态类型。这样定义后count
这个变量在程序中就永远都是数字类型了,不可以改变了。
//错误代码
const count: number = 1;
count = "jspang";
并且我们在制定了变量的类型之后,可以在变量后面打一个.
就可以看到vscode编译器
会给我们列举出所有的属于该类型所有的方法。
自定义静态类型
interface XiaoJieJie {
uname: string;
age: number;
}
const xiaohong: XiaoJieJie = {
uname: "小红",
age: 18,
};
这时候你如果声明变量,跟自定义不一样,VSCode直接就会报错。需要注意的是,这时候xiaohong
变量也具有uname
和age
属性了。
这节课你需要记住的是,如果使用了静态类型,不仅意味着变量的类型不可以改变,还意味着类型的属性和方法也跟着确定了。这个特点就大大提高了程序的健壮性,并且编辑器这时候也会给你很好的语法提示,加快了你的开发效率。
TypeScript 基础静态类型和对象类型
在 TypeScript 静态类型分为两种,一种是基础静态类型,一种是对象类型。
1.基础静态类型
基础静态类型非常简单,只要在声明变量的后边加一个:
号,然后加上对应的类型哦。比如下面的代码,就是声明了一个数字类型的变量,叫做count
。
const count : number = 918;
const myName :string = 'jspang'
类似这样常用的基础类型还有,我这里就举几个最常用的哦null,undefinde,symbol,boolean,void
这些都是最常用的基础数据类型
2.对象类型
map的形式
const xiaoJieJie: {
name: string,
age: number,
} = {
name: "大脚",
age: 18,
};
数组的形式
const xiaoJieJies: String[] = ["谢大脚", "刘英", "小红"];
类类型
class Person {}
const dajiao: Person = new Person();
函数类型
const jianXiaoJieJie: () => string = () => {
return "大脚";
};
那我们现在总结一下对象类型可以有几种形式:
- 对象类型
- 数组类型
- 类类型
- 函数类型
这几种形式我们在TypeScript
里叫做对象类型。
TypeScript 中的类型注释和类型推断
type annotation 类型注解
let count: number;
count = 123;
这段代码就是类型注解,意思是显示的告诉代码,我们的count
变量就是一个数字类型,这就叫做类型注解
。
type inferrence 类型推断
let countInference = 123;
这时候我并没有显示的告诉你变量countInference
是一个数字类型,但是如果你把鼠标放到变量上时,你会发现 TypeScript
自动把变量注释为了number
(数字)类型,也就是说它是有某种推断能力的,通过你的代码 TS 会自动的去尝试分析变量的类型。
工作使用问题(潜规则)
- 如果
TS
能够自动分析变量类型, 我们就什么也不需要做了 - 如果
TS
无法分析变量类型的话, 我们就需要使用类型注解
就是当我们变量声明的同时进行了赋值,这时候就可以让ts来自己进行推断。
在写 TypeScript 代码的一个重要宗旨就是每个变量,每个对象的属性类型都应该是固定的,如果你推断就让它推断,推断不出来的时候你要进行注释。
TypeScript 函数参数和返回类型定义
函数无返回值时定义方法
有时候函数是没有返回值的,比如现在定义一个sayHello
的函数,这个函数只是简单的terminal
打印,并没有返回值。
function sayHello(): void {
console.log("hello world");
}
如果这样定义后,你再加入任何返回值,程序都会报错。
never 返回值类型
如果一个函数是永远也执行不完的,就可以定义返回值为never
。
抛出了异常
function errorFuntion(): never {
throw new Error();
console.log("Hello World");
}
死循环
function forNever(): never {
while (true) {}
console.log("Hello JSPang");
}
函数参数为对象(解构)时
function add({ one, two }: { one: number, two: number }): number {
return one + two;
}
const three = add({ one: 1, two: 2 });
如果参数是对象,并且里边只有一个属性时,我们更容易写错。
function getNumber({ one }: { one: number }): number {
return one;
}
const one = getNumber({ one: 1 });