代码编织梦想

前提

  1. 安装 Node 的运行环境(https://node.js.org) 建议使用淘宝镜像
  2. 全局安装 typeScript
    npm install typescript -g

如果不下插件,不能直接运行ts,最好是用ts-node插件
npm install -g ts-node

静态类型

如何定义静态类型

Static Typing,定义,就不可以再改变了。有点像ES6里的const。

编译的时候或者源代码类型检查的时候。每一个有静态类型的储存(变量或者属性)地方都可以预知它的值。类型检查确保实现类型推断,不用运行代码就能进行静态类型检查。

最简单的定义一个数字类型的count的变量,这里的: number就是定义了一个静态类型。这样定义后count这个变量在程序中就永远都是数字类型了,不可以改变了。比如我们这时候给count复制一个字符串,它就报错了。

const count: number = 1;
count = "jm";
// 报错

再往深一层次理解,会发现这时候的count变量,可以使用number类型上所有的属性和方法。我们可以通过在count后边打上一个.看出这个特性
在这里插入图片描述

自定义静态类型

下面的代码会报错

interface XiaoJieJie {
  uname: string;
  age: number;
}
const xiaohong: XiaoJieJie = {
  uname: "小红",
  age: "小红",
};

xiaohong变量也具有unameage属性了。
在这里插入图片描述
如果使用了静态类型,不仅意味着变量的类型不可以改变,还意味着类型的属性和方法也跟着确定了。这个特点就大大提高了程序的健壮性,并且编辑器这时候也会给你很好的语法提示,加快了你的开发效率。

基础静态类型和对象静态类型

基础静态类型

声明变量的后边加一个:号,然后加上对应的类型

const count : number = 918;
const myName :string = 'jm'

常用的有:null,undefinde,symbol,boolean,void

对象静态类型

最简单的对象类型

const xiaoJieJie: {
  name: string,
  age: number,
} = {
  name: "大脚",
  age: 18,
};
console.log(xiaoJieJie.name);

对象类型也可以是数组,变量xiaoJieJies必须是一个数组,数组里的内容必须是字符串。可以试着把字符串改为数字,VSCode会直接给我们报错。

const xiaoJieJies: String[] = ["谢大脚", "刘英", 123];

在这里插入图片描述
用类的形式,来定义变量。

class Person {}
const dajiao: Person = new Person();

函数类型

const jianXiaoJieJie: () => string = () => {
  return "大脚";
};

类型注释和类型推断

类型注释

在这里插入图片描述

类型推断

在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
为什么total这个变量不需要加类型注解,因为当onetwo两个变量加上注解后,TypeScript 就可以自动通过类型推断,分析出变量的类型。

工作使用问题(潜规则)

如果 TS 能够自动分析变量类型, 我们就什么也不需要做了
如果 TS 无法分析变量类型的话, 我们就需要使用类型注解
在写 TypeScript 代码的一个重要宗旨就是每个变量,每个对象的属性类型都应该是固定的,如果你推断就让它推断,推断不出来的时候你要进行注释。

学习资料

视频:https://www.bilibili.com/video/BV1qV41167VD?p=1
文字版:https://jspang.com/detailed?id=63#toc28
参考文章:
https://blog.csdn.net/weixin_34111819/article/details/91370780?utm_medium=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1.not_use_machine_learn_pai&depth_1-utm_source=distribute.pc_relevant.none-task-blog-BlogCommendFromBaidu-1.not_use_machine_learn_pai

版权声明:本文为博主原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。 本文链接: https://blog.csdn.net/a_bald_girl/article/details/111060391

WQ-爱代码爱编程

WQ博客 试用CSDN博客新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与

TypeScript学习日记(一)-爱代码爱编程

最近在学习 typescript 每次学习完想做一个小结,以加深巩固,也防止以后遗忘 一 环境的搭建 我用的是vscode 本来感觉 webstorm 挺好用的,结果之前白嫖的激活码到期了,找半天也没找到,所以只好开始用vscode (1) 安装 typescript 这一步很简单,有 node 的情况下直接 npm install typescri

ECharts 实现世界地图-爱代码爱编程

效果图 源代码(仅供参考) <template> <div class="echarts"> <div class="className" id="id" style="width: 100%; height: 450px" ref="myEchart"

typescripe第二天—返回类型和注解-爱代码爱编程

函数参数类型和返回类型定义 简单类型定义 如下图,getTotal没有给它定义返回值类型,虽然被推断出了返回值是number类型,但如图所示,有string存在时,并未报错 可以直接给total一个类型注解,但错误的根本是getTotal()函数的错误 const total: number = getTotal(1, 2); 合适的做法是给函数

手写Promise系列之Promise.race-爱代码爱编程

手写Promise系列之Promise.race Promise.race(iterable) 方法返回一个 promise迭代器中的promise谁先执行完毕就用谁的结果,那个率先改变的 Promise 实例的返回值,就传递那个给p的回调函数。 看下面一个示例 let p1 = new Promise((resolve,reject)=>

手写Promise系列之Promise.allSettled-爱代码爱编程

手写Promise系列之Promise.allSettled es2020引入只有等到所有这些参数实例都返回结果(不管是fulfilled还是rejected),才会结束 举个例子: let p1 = new Promise((resolve,reject)=>{ setTimeout(()=>{ resol