首页 > 其他分享 >TypeScript 初体验

TypeScript 初体验

时间:2023-05-15 09:24:16浏览次数:46  
标签:TypeScript string number 初体验 let 类型 name

什么是 TypeScript

TypeScript 是静态类型的 JavaScript 超集

类型系统按照「类型检查的时机」来分类,可以分为动态类型和静态类型。

动态类型是指在运行时才会进行类型检查,这种语言的类型错误往往会导致运行时错误。

TypeScript 在运行前需要先编译为 JavaScript,而在编译阶段就会进行类型检查,所以 TypeScript 是静态类型。

TypeScript 是弱类型的 JavaScript 超集

类型系统按照来分类,可以分为强类型和弱类型。

TypeScript 是完全兼容 JavaScript 的,它不会修改 JavaScript 运行时的特性,所以它们都是弱类型

但可以借助 TypeScript 提供的类型系统,以及 ES-Lint 提供的代码检查功能,来限制变量必须为某一种类型。

也就是说没有绝对的强弱类型之分,依据使用的情况不同,提现不同的类型偏向。

作为对比,Python 是强类型。

TypeScript 的特点

主要特点

  • 「省心的类型推断」TS 根据变量初始赋值,推导出的值的类型,大部分类型都不需要手动声明了。
  • 「灵活的类型标准」通过在tsconfig.json文件中自定义编译选项,从而降低或增加类型检查的标准。
  • 「优秀的的 IDE 能力」TS 增强了编辑器代码补全、接口提示、跳转到定义、代码重构等功能。
  • 「愈加完善的的生态」对于一些不支持 TS 的第三方库,可以通过安装社区维护的「类型声明库」来实现该库的代码补全、接口提示等能力。

项目迁移

TS 可以和 JS 共存。这就意味着能够把旧的 JS 代码逐步迁移成 TS 代码。对于哪些迁移成本过高的 JS 代码,可以通过「类型声明文件」实现旧项目的渐进式迁移。

启用自动编译

先配置好tsconfig.json。打开命令行菜单,选择运行任务,选择tsc:watch-tsconfig.json监听 TS 文件更改。

注意事项

TS 编译阶段仅在语法层面进行类型检查,如果是要在程序运行阶段也需要类型限制,那就要手动进行类型检查,比如判断运行时请求接口拉取的数据类型。

即使在编译阶段报错,TS 仍然能够编译出 JS 文件。如果需要禁止报错的 TS 文件编译成 JS 文件,可以在tsconfig.json 中配置 noEmitOnError 即可。

基础类型

空值 void

在 JS 中没有void空值的概念,在 TypeScript 中,可以用 void 表示没有任何返回值的函数:

function alertName(): void {
    alert('My name is Tom');
}

声明一个 void 类型的变量没有什么用,它只能被赋值为undefined, null

let name: void = undefined;

Null 和 Undefined

void 的区别是,undefinednull 是所有类型的子类型。也就是说 undefined 类型的变量,可以赋值给其他类型的变量。而 void 类型的变量不能赋值给其他类型的变量。

任意类型

当不知道数据类型时可以通过any类型对变量进行类型设置。比如不知道请求拉取服务器的数据类型时,就可以指定any类型完成数据的缓存。但更建议手动进行类型检查。

import { getList } from '@/api/goods'

getList()
  .then(res => {
  let result: any;
  if (res.code === 200) {
    result = res.data;
  }
    
  else {
    throw new Error(res.msg);
  }
})

可以认为声明一个any类型的变量就相当于用原生 JS 进行编程了,不再对变量指定一个基本或者引用类型,程序运行的过程中也能修改变量的值。

需要注意的是,变量如果在声明的时候,未指定其类型,那么它会被识别为任意值类型,这就是「类型推断」:

let something: any;// 等价于 let something;
something = 'seven';
something = 7;

something.setName('Tom');

联合类型

联合类型是指,变量、形参、返回值可以是两种或两种以上的类型。通过|分隔,类似于 JS 中的或运算符:

let num: string | number;
num = 'seven';
num = 7;
myFavoriteNumber = true;// 报错,不属于指定类型中的一种

当 TypeScript 不确定一个联合类型的变量到底是哪个类型的时候,我们只能访问此联合类型的所有类型里共有的属性或方法

function getStr(think: string | number | boolean): string {
  return think.toString();
}

联合类型的变量在被赋值的时候,会根据类型推断的规则推断出一个类型:

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';// 类型推断 string
console.log(myFavoriteNumber.length); // 5
myFavoriteNumber = 7;// 类型推断为 number
console.log(myFavoriteNumber.length); // 编译时报错

接口对象声明

在 TypeScript 中,我们使用接口(Interfaces)来定义对象的类型。

TypeScript 中的接口是一个非常灵活的概念,除了可用于对类的一部分行为进行抽象以外,也常用于对「对象的形状(Shape)」进行描述。

换句话说,通过设置接口对象类型,来限制(约束)变量接收对象的形状,也能迅速描述出该接口的形状

举一个例子:

interface Cat {
  name: string,
  color: string
}

// 如果多写或少写【未定义的属性】都会类型检查报错,变量和接口的【形状】必须一致。
let miaomi: Cat = {
  name: '大黄',
  color: '狸花'
}

接口可选属性:

interface Cat {
  name: string,
  color?: string
}

// 忽略可选属性
let miaomi: Cat = {
  name: '大黄',
}

// 添加未定义属性,类型检查会报错
let miaomi: Cat = {
  name: '大黄',
  gender: 'male'
}

接口任意属性:

// 通过 [propName: string]: any 添加任意类型的属性
interface Cat {
  name: string,
  color?: string,
  [propName: string]: any// 类型也可以指定非 any
}

let miaomi: Cat = {
  name: '大黄',
  gender: 'male',
  age: 1
}

需要注意的是,一旦定义了任意属性,那么确定属性和可选属性的类型都必须是它的类型的子集

一个接口中只能定义一个任意属性。如果接口中有多个类型的属性,则可以在任意属性中使用联合类型:

interface Cat {
  name: string,
  color?: string,
  [propName: string]: string | number
}

let miaomi: Cat = {
  name: '大黄',
  gender: 'male',
  age: 1
}

有时候我们希望对象中的一些字段只能在创建的时候被赋值,那么可以用 readonly 定义只读属性:

interface Cat {
  readonly id: number,
  name: string,
  color?: string,
  [propName: string]: string | number
}

let miaomi: Cat = {
  id: 001,
  name: '大黄',
  gender: 'male',
  age: 1
}

miaomi.id = 002;// 只读属性,不可重新赋值

数组类型

普通声明:

let arr1: number[];// 普通声明, 中括号前指定数组内元素的类型
let arr2: any[];// 数组元素为任意类型
arr1 = null;
arr1 = undefined;
arr1 = Array.from(new Set([1, 2, 3, 3, 3]));

泛型声明:

let arr2: Array<object> = [{}];// 泛型声明, 尖括号内指定数组内元素的类型
arr1 = null;
arr1 = undefined;

接口数组声明:

interface IMyArr {
  [index: number]: number;// 元素类型也可以是任意类型和联合类型
}

let arr: IMyArr = [1, 2, 3]

不常用,用于表示类数组适用。

函数类型

接口声明函数类型:

interface IMyFunc {
  (a: string, b: string): boolean
}

let isContain: IMyFunc = function(a: string, b: string): boolean {
 return a.indexOf(b) >= 0;
};

let result: boolean = isContain('123', '1');

console.log(result);

命名声明函数类型:

function isContain(a:string, b:string): boolean {
  return  a.indexOf(b) >= 0;
 }
 
 let result: boolean = isContain('123', '1');
 
 console.log(result);

表达式声明函数类型(过于繁琐,不建议):

const isContain: (a:string, b:string) => boolean = function (a:string, b:string): boolean {
  return  a.indexOf(b) >= 0;
 }
 
let result: boolean = isContain('123', '1');
 
console.log(result);

可选参数和默认参数:

?添加到参数名前表示可选参数。

// 默认参数不传就是 undefined
function sum(a: number, b: number, c?: number): number {
  return a+b+c
}

sum(1, 2);

必须注意,必选参数不能写在可选参数后面因为必选参数写在可选参数后面的话,仅两个参数时无法去判断第二个参数是必选参数还是可选参数。

函数重载:

当函数需要根据不同的参数类型(联合类型或者any类型),进行不同的运算或者操作时,就可以利用重复函数名但设置不同参数类型启用【函数重载】。

function add(a: number, b: number): number {
  return a+b
}

function add(a: string, b: string): string {
  return a+b
}

add(1, 2)
add('张', '三')

TS 函数重载就是不同类型约束版本的同一个函数,根据输入类型判断适用哪个函数进行重载。

剩余参数:

在 TS 中使用剩余参数也需要为剩余参数指定类型,比如...args: string[]就是指定所有剩余参数必须是字符串。

function printArgs(a: number, b: number, ...args: string[]):  void {
  console.log(args);
}

printArgs(1, 2, 'a', 'b', 'c');

类型断言:

在还不确定类型的时候就访问其中一个类型特有的属性或方法,用【类型断言】指定一个值的类型。然后根据确定的参数类型进行判断或者其他操作。

function showToast(toast: string | boolean = false): void {
  if ((toast as  string).length) {
    console.log('提示信息' + toast);
  }

  else if ((<boolean>toast).toString == 'true') {
     console.log('已开启提示信息');
  }
}

由于各种原因,在 TS 中断言最好用值 as 类型的形式表示

断言为any类型可以访问任意类型的属性和方法

标签:TypeScript,string,number,初体验,let,类型,name
From: https://www.cnblogs.com/mxyulin/p/17400814.html

相关文章

  • warning Unexpected any. Specify a different type @typescript-eslint/no-explic
    参考链接场景描述使用vue3+ts开发项目时,会遇到很多警告,我们可以在配置文件中关闭它一、警告:warningUnexpectedany.Specifyadifferenttype@typescript-eslint/no-explicit-any解决方案:关闭any类型的警告。//在.eslintrc.js文件中找到rules添加一行代码即可"@ty......
  • Vue3 + Vite4.3 + Element-Plus + TypeScript 从0到1搭建企业级后台管理系统(前后端开
    vue3-element-admin是基于vue-element-admin升级的Vue3+ElementPlus版本的后台管理前端解决方案,技术栈为Vue3+Vite4+TypeScript+ElementPlus+Pinia+VueRouter等当前主流框架。相较于其他管理前端框架,vue3-element-admin的优势在于一有一无有配套后端、无......
  • [Typescript] Testing type
    1.TSD:https://github.com/SamVerschueren/tsdimport{expectType}from'tsd';importconcatfrom'.';expectType<string>(concat('foo','bar'));expectType<string>(concat(1,2)); 2.Vitest:https://vit......
  • [Typescript] Builder pattern 07- Reducer
    import{Expect,Equal}from"../types/utils"import{expect,it}from'vitest';typePayloadsToDiscriminatedUnion<TextendsRecord<string,any>>={[KinkeyofT]:{type:K}&T[K];}[keyofT];exportclas......
  • [React Typescript] ComponentProps
    Blog:https://www.totaltypescript.com/react-component-props-type-helper GetanyProptypefromhtmlelement:import{ComponentProps}from"react";typeButtonProps=ComponentProps<"button">; GetpropstypefromaComponen......
  • 与chatGPT讨论c#的calss 与TypeScript中的calss问题
    与chatGPT讨论c#的calss与TypeScript中的calss问题目前来说chatGPT可以说是一场革命,它为我们提供了另一种选项,当你遇到问题的时候,只能去百度但度出来的结果大多不是我们想要的结果,特别是百度当你想要问度娘时......等到的却是一大堆广告,心中不由升起无明之火,不知百度能不能也搞......
  • typescript
    什么是typescripttypescript是微软开发的编程语言,它的后缀名是ts,通过编译可以将ts文件编译成ts文件,它定义了一些新语法使得开发起来可维护性更高也更好用,ts与js的区别如下图所示:在进行angular开发时,开发者不需要引入ts依赖,angular已经导入了ts依赖。快速上手ts编译tschell......
  • typescript重写canvas --10.绘制文字2
    typescript重写canvas--10.绘制文字21.使用canvas绘制文字<!DOCTYPEHTML><html><head><metacharset="utf-8"/></head><body><canvasid="myCanvas"width="450"height="400">你的浏览器......
  • kysely typescript 类型安全的sql 查询构建包
    typescript目前已经有不少方便的sql工具了,kysely是一个类型安全方便的sql查询构建工具对于使用typescript开发node服务的是个一个不错的选择,值得试用参考资料https://github.com/kysely-org/kyselyhttps://typeorm.io/https://github.com/typeorm......
  • typescript重写canvas --9.绘制文字
    typescript重写canvas--9.绘制文字1.使用canvas绘制文字<!DOCTYPEHTML><html><head><metacharset="utf-8"/></head><body><canvasid="myCanvas"width="450"height="400">你的浏览器不支......