TypeScript学习(二)——静态类型变量声明

王元肉==>个人主页

大家一起加油，我喜欢分专栏将知识打碎成一份一份小知识点，一篇文章只说一个知识点，因此每篇文章篇幅较短，希望大家不要介意。如有需要可以查看专栏看看是否有该文章中涉及到的知识点进行讲解的文章，如果大家觉得有帮助，希望大家三连支持一下。

推荐阅读

前往上一篇==>搭建typeScript开发环境

ts的静态类型是什么？

给声明的变量约束一个数据类型

ts的静态类型的作用是？

是什么？

解决javascript变量的变量值数据类型动态可变导致程序中隐藏bug。

使用js举例一个bug

function computed(dividend, divisor) {
    // 两数相加保留一位小数,四舍五入
    return (dividend + divisor).toFixed(1);
}
console.log(computed(1.23, 2.26));

这是我们编写的一段代码，此时可以满足要求正常执行，但是这个用js编写的函数是
不健壮的。当调用者传入的参数不是数字时，将会出问题。

function computed(dividend, divisor) {
    // 两数相加保留一位小数,四舍五入
    return (dividend + divisor).toFixed(1);
}
console.log(computed(1.23, 2.26));
console.log(computed("10", "8"));

因为toFixed()方法是Number.prototype身上的方法，当我们传入两个字符串时，+号进
行字符串拼接之后还是一个字符串，字符串类型的变量身上是没有toFixed()这个方法的，
而使用typescript就可以在代码编译期间给与程序员提示，从而避免代码中的隐藏bug出现。

使用ts来避免这个bug

function computed(dividend: number, divisor: number) {
    // 两数相加保留一位小数,四舍五入
    return (dividend + divisor).toFixed(1);
}
console.log(computed(1.23, 2.26));
console.log(computed("10", "8"));

我们发现在代码编写阶段，编辑器vscode就会给出提示，提示我们将一个string类型的数据
传递给了约束为number类型的变量。就算我们强行就行编译也会给出报错。

ts静态类型的一些使用场景

约束一个基本数据类型

在接口中使用

/* 约束对象中必须有的属性以及对应的数据类型，
更多用法将在接口小节中详细讲解 */
interface Person {
    name: string,
    age: number
}

const person: Person = {
    name: 'John',
    age: 18
}

在解构赋值中使用

/* 解构重命名与ts的结合使用 */
let { a: newA , b: newB } : {a : number , b: string} = { a: 1, b: 'hhh'};
console.log(newA,newB); // 1 hhh

在函数中使用

// 给函数的返回值添加注解，限制了该函数的返回值类型为number
function add(one:number,two:number) :number {
  return one + two;
}

console.log(add(1,2)); // 3


// 函数没有返回值,添加void注解
function clog() :void{
  console.log('clog');
}

// 函数永远执行不完(死循环、函数内部报错)添加never注解
function errorFunction() :never{
  throw new Error()
  console.log('1');
}

function forEver() :never{
  while(true){}
}

// 给函数的对象参数添加注解
function fnobj({one,two} :{one:number,two:number}){
  return one + two;
}

const totalobj = fnobj({ one:1,two:2});
console.log(totalobj); // 3

联合类型

// sex的值可以是string类型也可以是number类型
var sex: string| number;
sex = "male";
console.log(sex); // "male"

可选值

// sex的值只能是female或者male
var sex: "female" | "male";
sex = "male";
console.log(sex); // "male"

… 见专栏的其它文章

前往下一篇==>变量类型约束（any,void,object,Object,unknown,undefined,null,never,string,number,boolean）

结束啦！