摸鱼偷学TS:基础类型及变量声明

浅聊一下

在上篇文章中,我们已经初步了解了TS,接下来我们就来深入了解一下TS中的基础类型和变量声明...

在金三银四的尾巴上了车,如果你也和我一样也想在大三找一份还不错的实习,欢迎掘友们私聊我交流面经(wechat: LongLBond

基础类型

  1. 布尔值 最基本的数据类型就是简单的true/false值,在JavaScript和TypeScript里叫做boolean(其它语言中也一样)。
ts 复制代码
let isDOne: boolean = false;
  1. 数字

和JavaScript一样,TypeScript里的所有数字都是浮点数

ts 复制代码
let num: number = 1
  1. 字符串
ts 复制代码
let str: string = "掘金"

你还可以使用模版字符串

ts 复制代码
let name:string = "掘金"
let words:string = `hello!${ name }`
  1. 数组

定义数组的第一种方式,在元素类型后面接上[ ]

ts 复制代码
let arr: number[] = [1, 2, 3]

第二种方式就是使用数组泛型

ts 复制代码
let arr:Array<number> = [1, 2, 3]
  1. 元组Tuple

    元组是个啥玩意??暂且理解为元素的组合...

    元组类型允许表示一个已知元素数量和类型的数组,各元素的类型不必相同

    例如:我要定义一个值分别为string类型和number类型的元组

ts 复制代码
let y:[string, number] = ['掘金',666]

掘友们千万注意不要把位置弄反了哟!如何访问元组的数据呢?

ts 复制代码
let x:[string, number] = ['掘金',666]
console.log(x[0]); 
console.log(x[1]); 

如果访问越界

  1. 枚举类型

使用枚举我们可以定义一些带名字的常量。 使用枚举可以清晰地表达意图或创建一组有区别的用例。 TypeScript 支持数字的和基于字符串的枚举。

  • 数字枚举
ts 复制代码
enum Dis{
    a,
    b,
    c,
    d
}

通过观察数字枚举的编译结果,我们可以知道数字枚举除了支持 从成员名称到成员值 的普通映射之外,它还支持 从成员值到成员名称 的反向映射 如果你不手动初始化,那么a,b,c,d的值就会从0开始依次增加1

  • 字符串枚举

在纯字符串枚举中,我们必须给每个属性都初始化

否则就会出现以下情况:

  • 常量枚举

在ts中,用const来定义一个常量枚举,其中的值值定义以后无法改变

ts 复制代码
const enum Dis{
    a,
    b,
    c,
    d
}

console.log(Dis.a)

若修改属性a

  • 异构枚举
ts 复制代码
enum Enum{
    A,
    B = "B",
    C = 2,
    D
}

console.log(Enum.D)

在学习过程中,我发现如果是以下这种形式则会报错

ts 复制代码
enum Enum{
    A,
    B = "B",
    C,
    D
}

因为对于A,会默认赋值为0,对于B已经手动赋值为"B",此时C由于B被赋值,所以也必须要初始化,于是报错

  1. any

有时候,我们会想要为那些在编程阶段还不清楚类型的变量指定一个类型。 这些值可能来自于动态的内容,比如来自用户输入或第三方代码库。 这种情况下,我们不希望类型检查器对这些值进行检查而是直接让它们通过编译阶段的检查。 那么我们可以使用 any类型来标记这些变量

ts 复制代码
let notSure: any = 666; 
notSure = "semlinker"; 
notSure = false;

在TS中,任何类型都可以说是any类型,从以上的例子你就能很好地体会到,并且,TS允许我们对any类型的数值执行任何操作,并且无需事先执行任何检查

但是使用any就等于没用TS😂,无法使用TS提供的大量保护机制,为了解决any带来的问题,TS又引入了unknow类型

  1. unkonw

就像所有类型都可以赋值给 any,所有类型也都可以赋值给 unknown

但与any不同的是,我们无法将unknow的值赋值给其他类型的变量(除any和unknow类型)

并且unknow类型的值,无法做任何值的操作

  1. void

学过Java的同学都知道,void一般被用来表示函数没有返回值

  1. null 和 undefind

TypeScript里,undefinednull两者各自有自己的类型分别叫做undefinednull。 和 void相似,它们的本身的类型用处不是很大:

ts 复制代码
let u: undefined = undefined;
let n: null = null;

默认情况下nullundefined是所有类型的子类型。 就是说你可以把 nullundefined赋值给number类型的变量。

  1. never

never 类型表示的是那些永不存在的值的类型。 例如,never 类型是那些总是会抛出异常或根本就不会有返回值的函数表达式或箭头函数表达式的返回值类型。

ts 复制代码
//抛出异常
function error(message: string): never { 
    throw new Error(message); 
}
// 无法到达
function infiniteLoop(): never { 
    while (true) {} 
}
  1. object

object表示非原始类型,也就是除numberstringbooleansymbolnullundefined之外的类型

ts 复制代码
// node_modules/typescript/lib/lib.es5.d.ts
interface ObjectConstructor {
  create(o: object | null): any;
  // ...
}

const proto = {};

Object.create(proto);     // OK
Object.create(null);      // OK
Object.create(undefined); // Error
Object.create(1337);      // Error
Object.create(true);      // Error
Object.create("oops");    // Error

变量声明

TypeScript(TS)和 JavaScript(JS)在变量声明方面有一些区别,主要体现在以下几个方面:

  1. 类型注解:TypeScript 支持在变量声明时添加类型注解,以明确变量的类型。而 JavaScript 则不需要类型注解,变量的类型在运行时确定。
ts 复制代码
// TypeScript 示例
let x: number = 10;
// JavaScript 示例
let x = 10;
  1. 类型推断:在 TypeScript 中,类型推断更加严格,可以根据赋值表达式推断出变量的类型。而在 JavaScript 中,类型推断相对较弱,变量的类型只有在运行时才能确定。
ts 复制代码
// TypeScript 示例
let x = 10; // 自动推断为 number 类型
// JavaScript 示例
let x = 10; // 变量类型未指定,默认为 number 类型
  1. 默认值:TypeScript 支持在变量声明时为变量指定默认值。而 JavaScript 则不支持直接在变量声明时设置默认值,需要通过其他方式实现。
ts 复制代码
// TypeScript 示例
let x: number = 10; // 默认值为 10
// JavaScript 示例
let x = 10; // 变量类型未指定,默认为 number 类型,没有默认值
  1. const 和 let:在 TypeScript 中,建议使用 const 来声明不可变变量,以避免不必要的变量赋值操作。而在 JavaScript 中,constlet 的行为略有不同,const 声明的变量不能重新赋值,但可以修改变量的属性或元素。
ts 复制代码
// TypeScript 示例
const x: number = 10; // 不可变变量
x = 20; // 报错,不能重新赋值
// JavaScript 示例
const x = 10; // 可以修改变量的属性或元素,但不能重新赋值整变量
x.y = 20; // 合法,可以修改变量的属性或元素

结尾

ts的基本类型和变量声明就学到这,在后面的学习中继续摸索...

相关推荐
轻口味36 分钟前
命名空间与模块化概述
开发语言·前端·javascript
前端小小王1 小时前
React Hooks
前端·javascript·react.js
迷途小码农零零发1 小时前
react中使用ResizeObserver来观察元素的size变化
前端·javascript·react.js
娃哈哈哈哈呀2 小时前
vue中的css深度选择器v-deep 配合!important
前端·css·vue.js
旭东怪2 小时前
EasyPoi 使用$fe:模板语法生成Word动态行
java·前端·word
yg_小小程序员3 小时前
vue3中使用vuedraggable实现拖拽
typescript·vue
ekskef_sef4 小时前
32岁前端干了8年,是继续做前端开发,还是转其它工作
前端
高山我梦口香糖4 小时前
[react 3种方法] 获取ant组件ref用ts如何定义?
typescript·react
sunshine6414 小时前
【CSS】实现tag选中对钩样式
前端·css·css3