TypeScript入门 | 青训营笔记

76 阅读5分钟

TypeScript入门青训营笔记\color{purple}TypeScript入门 | 青训营笔记

这是我参与「第四届青训营」笔记创作活动的第8\color{purple}这是我参与「第四届青训营」笔记创作活动的第8天

jsts比较\color{purple}js 与 ts比较

对象不同点
js动态类型(执行时才做类型匹配)、弱类型语言
ts静态类型、弱类型语言

注意:

  • 动态静态的差异就在编译是在执行时发生还是提前进行
  • 弱类型语言的特征就是类型转换,字符串和数字相加时会进行隐式类型转换 允许执行
  • ts是js的超集 包含于兼容所有js特性 支持共存 支持渐进式引入与升级

静态类型:

  • 可读性增强 基于语法解析TSDoc ide增强
  • 可维护性增强 在编译阶段暴露大部分错误
  • 多人合作的大型项目中 获得更好的稳定性和开发效率

TSDoc 旨在标准化文档注释语法,同时仔细平衡几个相互竞争的设计要求:

  1. 扩展: 工具必须能够定义自己的自定义标记,以自然的方式表示特定于域的元数据。
  2. 互操作性: 自定义标记不得阻止其他工具正确分析注释。为了换行,自定义标记必须使用已建立的语法模式,这些模式可以在解析过程中安全地识别和丢弃。
  3. 熟悉的语法: TSDoc 应尽可能保留熟悉的 JSDoc/Markdown 风格。这也最大限度地提高了旧注释作为 TSDoc 正确解析的可能性。

为什么 JSDoc 不能成为标准? JSDoc 语法不是严格指定的,而是从特定实现的行为中推断出来的。大多数标准的JSDoc标签都专注于为普通JavaScript提供类型注释,这对于像TypeScript这样的强类型语言来说并不是主要关注点。

TypeScript区分大小写\color{purple}TypeScript 区分大小写

TypeScript 区分大写和小写字符。

分号是可选的\color{purple}分号是可选的

每行指令都是一段语句,你可以使用分号或不使用, 分号在 TypeScript 中是可选的,建议使用。

以下代码都是合法的:

console.log("Runoob")
console.log("Google");

如果语句写在同一行则一定需要使用分号来分隔,否则会报错,如:

console.log("Runoob");console.log("Google");

基本类型\color{purple}基本类型

类型声明\color{purple}类型声明

类型声明是TS非常重要的一个特点

通过类型声明可以指定TS中变量(参数、形参)的类型

指定类型后,当为变量赋值时,TS编译器会自动检查值是否符合类型声明,符合则赋值,否则报错

简而言之,类型声明给变量设置了类型,使得变量只能存储某种类型的值

语法:\color{purple}语法:

let 变量: 类型;

let 变量: 类型 = 值;

function fn(参数: 类型, 参数: 类型): 类型{
    ...
}

自动类型判断:\color{purple}自动类型判断:

TS拥有自动的类型判断机制
当对变量的声明和赋值是同时进行的,TS编译器会自动判断变量的类型
所以如果你的变量的声明和赋值时同时进行的,可以省略掉类型声明

类型:\color{purple}类型:

类型例子描述
number1, -33, 2.5任意数字
string‘hi’, “hi”, hi任意字符串
booleantrue、false布尔值true或false
字面量其本身限制变量的值就是该字面量的值
any*任意类型
unknown*类型安全的any
void空值(undefined)没有值(或undefined)
never没有值不能是任何值
object{name:‘孙悟空’}任意的JS对象
array[1,2,3]任意JS数组
tuple[4,5]元素,TS新增类型,固定长度数组
enumenum{A, B}枚举,TS中新增类型

js赋值写法\color{purple}js赋值写法

image.png

ts赋值写法\color{purple}ts赋值写法

image.png

Any类型\color{purple}Any 类型

任意值是 TypeScript 针对编程时类型不明确的变量使用的一种数据类型,它常用于以下三种情况。

1、变量的值会动态改变时,比如来自用户的输入,任意值类型可以让这些变量跳过编译阶段的类型检查,示例代码如下:

let x: any = 1;    // 数字类型
x = 'I am who I am';    // 字符串类型
x = false;    // 布尔类型

2、改写现有代码时,任意值允许在编译时可选择地包含或移除类型检查,示例代码如下:

let x: any = 4;
x.ifItExists();    // 正确,ifItExists方法在运行时可能存在,但这里并不会检查
x.toFixed();    // 正确

3、定义存储各种类型数据的数组时,示例代码如下:

let arrayList: any[] = [1, false, 'fine'];
arrayList[1] = 100;

类型断言\color{purple}类型断言

有些情况下,变量的类型对于我们来说是很明确,但是TS编译器却并不清楚,此时,可以通过类型断言来告诉编译器变量的类型,断言有两种形式:

第一种

let someValue: unknown = "this is a string";
let strLength: number = (someValue as string).length;

第二种

let someValue: unknown = "this is a string";
let strLength: number = (<string>someValue).length;

对象类型\color{purple}对象类型

利用interface关键字声明对象类型 image.png

forEach()some()filter()map()every()的区别\color{purple}forEach()、some()、filter()、map()、every()的区别

forEach()\colorbox{violet}{forEach()}

作用:遍历数组,取出数组中的每一项 参数:function(value,index,array){} 返回值:没有返回值

 var arr = [2, 4, 65, 23];
 var sum = 0;
 arr.forEach(function(value, index, array) {
      console.log('每个数组元素' + value);
      console.log('每个数组元素的索引号' + index);
      console.log('数组本身' + array);
      sum += value;
    })
     console.log(sum); // 94

filter()\colorbox{violet}{filter()}

作用:遍历数组,筛选出满足条件的项,将满足条件的项放到新数组中,并且返回 参数:function(value,index,array){} 返回值:返回存放了满足条件的项的新数组 如果发现回调函数,返回了true,就将当前的value,放到新数组中

var arr = [12, 66, 4, 34, 2, 67];
var newArr = arr.filter(function(value, index, array) {
        // value 数组元素
        // index 数组元素的索引
        // array 当前的数组
        return value > 20;
    });
    console.log(newArr); // [66,34,67] 返回值是一个数组

filter 是查找满足条件的元素 返回的是一个数组 而且是把所有满足条件的元素返回回来

some()\colorbox{violet}{some()}

作用:遍历数组,判断是否有满足条件的元素,如果有返回true,如果没有返回false 查找数组唯一的元素 参数:function(value,index,array){} 返回值:返回true/false

如果发现回调函数,返回了true,就会停止遍历

// some 查找数组中是否满足条件的元素
     var arr = [10, 30, 4];
     var flag = arr.some(function(value, index, array) {
            // value 数组元素
            // index 数组元素的索引
            // array 当前的数组
            return value < 15;
        });
     console.log(flag); // true 返回的是布尔值,只要查找到满足条件的一个元素就立马终止循环
 var arr1 = ['red', 'pink', 'blue'];
    var flag1 = arr1.some(function(value) {
            return value == 'pink';
        });
   console.log(flag1); // true

some 查找满足条件的元素是否存在 返回的是一个布尔值 如果查找到第一个满足条件的元素就终止循环

map()\colorbox{violet}{map()}

map()生成一个新数组 其结果是该数组每一个元素 调用指定函数的 返回值

var arr = [1,2,3];
    var newArr = arr.map(function(value) {
            return value < 2;
    });
    console.log(newArr); //  [true, false, false]

every()\colorbox{violet}{every()}

every() 用来检测该数组中每一个元素 是否都满足指定函数的条件,返回的是 布尔值 如果给定是一个空数组,则返回true

var arr1 = [22, 45, 3, 5, 24];
 // var arr2 = [];
  var newArr1 = arr1.every(function(value) {
  return value > 20;
});
  console.log(newArr1); // false