ts的理解(ts语法概览)

ts对应js的数据类型

let name: string = “bob”;

let age: number = 37;

let isDone: boolean = false;

let u: undefined = undefined;

let n: null = null;

let obj: object = {x: 1};

let bigLiteral: bigint = 100n;

let sym: symbol = Symbol(“me”);

Array

// 元素类型[] let list: number[] = [1, 2, 3]; // Array<元素类型> let list: Array<number> = [1我爱线报网, 2, 3]; interface MyObject { name: string; age: number; } let arr: MyObject[] = [{name: “兔兔”, age: 18}] // OK

Tuple

对于内部不同类型的数组可以使用元组类型来定义注意,元组类型只能表示一个已知元素数量和类型的数组,长度已指定,越界访问会提示错误。例如,一个数组中可能有多种类型,数量和类型都不确定,那就直接any[]。let x: [string, number]; x = [hello, 10]; // OK x = [10, hello]; // Error

undefined和nul我爱线报网l

默认情况下null和undefined是所有类型的子类型。 就是说你可以把null和undefined赋值给任何类型的变量。

void

void表示没有任何类型,和其他类型是平等关系,不能直接赋值一般也只有在函数没有返回值时去声明

any和unknown

any(既是top type又是bottom type)会跳过类型检查器对值的检查,任何类型的值可以赋值给any,同时any类型的值也可以赋值给任何类型所有类型都可以分配给unknown(top type),但它只能赋值给unknown和any

never

never类型表示的是那些永不存在的值的类型。比如函数执行时抛出异常或者函数中的死循环,不存在返我爱线报网回值是任何类型的子类型,也可以赋值给任何类型,但没有类型可以赋值给never类型

as 类型断言

类型转换通常发生在你比TS更了解某个值的详细信息的时候。// as 语法 let someValue: any = “this is a string”; let strLength: number = (someValue as string).length;

跳过ts校验,保证有值

// 断言event.target有值,不为null/undefined const a:string = event.target!.name

类型推论

如果没有明确的指定类型,那么 TypeScript 会依照类型推论的规则推断出一个类型。老舅推荐:C我爱线报网++刷爆2023面试圈的C++六大优质简历项目:点击查看C++硬核项目(含源码)

如果你正在挑战(C++后端, SPDK, 内核,音视频,go云原生,Qt)的开发岗位。

这里的每一个项目都能让你斩获大厂offer!!

let myFavoriteNumber = seven; myFavoriteNumber = 7; // Error

联合类型

联合类型表示取值可以为多种类型中的一种,使用 | 分隔每个类型let myFavoriteNumber: string | number; myFavoriteNumber = seven; // OK myFavoriteNumber = 7; // OK

& 交叉类型我爱线报网

交叉类型是将多个类型合并为一个类型如果key相同但是类型不同,则该key为never类型。interface A { name: string, age: number } interface B { name: string, gender: string } let a: A & B = { // OK name: “兔兔”, age: 18, gender: “男” };

interface 接口

定义一些参数,规定变量里面有什么参数,参数是什么类型,使用时就必须有这些对应类型的参数,少或者多参数、参数类型不对都会报错interfaceLabeledValue { la我爱线报网bel:string; money?: number; // 可选属性 readonly x: number; // 只读属性 [key: string]: any; // 索引签名,TypeScript 支持两种索引签名:字符串和数字。 } function printLabel(labeledObj: LabeledValue) { console.log(labeledObj.label); } // myObj中的属性会进行类型推论,以此绕过多余的类型检查 let myObj = { size: 10, label: “Size 10 Object” }; printLabel(myObj); // O我爱线报网K

ReadonlyArray

数组创建后再也不能被修改let a: number[] = [1, 2, 3, 4]; let ro: ReadonlyArray<number> = a; ro[0] = 12; // Error ro.push(5); // Error ro.length = 100; // Error a = ro; // Error a = ro as number[]; // OK

extends 接口继承接口

接口可以多继承。使用多继承时,先确保父接口没有共有属性,或共有属性定义的类型都相同。interface Shape { color: string; } interfacePenStrok我爱线报网e { penWidth:number; } interface Square extends Shape, PenStroke { sideLength: number; } let square: Square = { sideLength: 1 } // Error let square1: Square = { sideLength: 1, color: red } // Error let square2: Square = { sideLength: 1, color: red, penWidth: 2 } // OK

Pick 选择性继承

主要是从一个已知的类型中,取出子集,作为一个新的类型返回/我爱线报网/ 原始类型 interface TState { name: string; age: number; like: string[]; } // 如果我只想要name和age interface TSingleState extends Pick<TState, “name” | “age”> {}; 或者 interface TSingleState extends Pick<TState, “name” | “age”> ;

函数声明

// 剩余参数 function sum(x: number, y: number, …rest: any[]): number { returnx + y;我爱线报网 }

函数表达式

// 可选参数、参数默认值 let mySum: (x: number, y: number, m:number = 11, z?: number) => number = function (x: number, y: number): number { return x + y; };

用接口定义函数类型

interface SearchFunc{ (source: string, subString: string): boolean; } let mySearch: SearchFunc = function(source: string, subString: string) { // OK let我爱线报网 result = source.search(subString); return result >-1; };

内置对象

let s: String = new String(兔神); let n: Number = new Number(123); let b: Boolean = new Boolean(1); let e: Error = new Error(Error occurred); let d: Date = new Date(); let r: RegExp = /[a-z]/; let body: HTMLElement = document.body; let allDiv: NodeList = document.querySelectorAll我爱线报网(div); document.addEventListener(click, function(e: MouseEvent) { // Do something }); function sum() { let args: IArguments = arguments; // 类数组对象 }

type 类型别名

类型别名就是给一种类型起个别的名字,使用type关键字来定义type StringType = string; let str: StringType; str = hello; str = 123 // Error

import type … from & export type … from

导入或者导出类型文件,编译器将把这我爱线报网些类型文件删除

import type … from — 让编译器知道您要导入的内容绝对是一种类型。export type … from — 一样, 仅用作导出。 // src/lib-type-re-export.ts export type { Track, Playlist } from “./types”; // 类型文件 export type { CreatePlaylistRequestParams } from “./api”; // 类型文件 export { createPlaylist } from “./api”; // 会被编译为: // dist/lib-type-re-export.js expo我爱线报网rt { createPlaylist } from “./api”;

字符串字面量类型

字符串字面量类型用来约束取值只能是某几个字符串中的一个。type Name = ALisa | Bob | Cola let name: Name = Alisa; // Error 与 DOM 中的全局 window 对象下的 name 属性出现了重名 let name1: Name = ALisa; // OK let name2: Name = Bob; // OK let name3: Name = Cola; // OK let name4: Name = 兔兔; // Error

Enum 枚举

枚举是一个被命名的整型常数的集合TS支持数字的和基于字符串的枚我爱线报网举。// 数字枚举 enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat}; console.log(Days.Sun) // 0 console.log(Days.Mon) // 1 // 初始化枚举成员,那么该初始化成员后面的成员会在它的基础上自动增长1 enum Days {Sun = 1, Mon, Tue, Wed, Thu, Fri, Sat}; console.log(Days.Sun) // 1 console.log(Days.Mon) // 2 // 字符串枚举 enum Direction { Up = “UP”, Down = “DOWN”, Le我爱线报网ft =“LEFT”, Right = “RIGHT”, } // 异构枚举,枚举可以混合字符串和数字成员 enum Direction { name = 兔兔, age = 18 }

class 类

class Animal { // public 修饰符,类的属性、方法可以在外部访问 public static age: number = 18; // 类的属性、方法不可以在外部访问 private static title: string = 兔兔; // protected 修饰符,在派生类中仍然可以访问(继承中可以访问) protected title: string = 兔兔; class Animal { con我爱线报网structor(public name: string, private age: number, protected sex: string) { } } Animal.age; // OK Animal.title; // Error

abstract 抽象类

象类做为其它派生类的基类使用, 不允许被实例化。抽象类中的抽象方法不包含具体实现并且必须在派生类中实现abstract class Department { constructor(public name: string) { } printName(): void { console.log(Department name: +我爱线报网this.name); } abstract printMeeting(): void; // 必须在派生类中实现 } class AccountingDepartment extends Department { constructor() { super(Accounting and Auditing); // 在派生类的构造函数中必须调用 super() } printMeeting(): void { console.log(The Accounting Department meets each Monday at 10am.); } generateReports(): void { c我爱线报网onsole.log(Generating accounting reports…); } } let department: Department; // OK:允许创建一个对抽象类型的引用 department = new Department(); // Error: 不能创建一个抽象类的实例 department = new AccountingDepartment(); // OK:允许对一个抽象子类进行实例化和赋值 department.printName(); // OK department.printMeeting(); // OKdepartment.generateReports(我爱线报网);// Error: 方法在声明的抽象类中不存在 复制代码

implements 类实现接口

用类去实现接口interface Age { age: number; } interface Title{ title: string; } class title implements Title, Age{ title: string = 兔兔; age: number = 18; }

T 泛型

泛型是指在定义函数、接口或类的时候,不预先指定具体的类型,而在使用的时候再指定类型的一种特性。// 泛型函数 function identity<T>(arg: T): T { returnarg; } ide我爱线报网ntity<number>(1); // OK:明确的指定`T`是`number`类型 identity(1); // OK:让编译器自己推断类型 // 泛型约束,在函数内部使用泛型变量的时候,由于事先不知道它是哪种类型,所以不能随意的操作它的属性或方法。 function loggingIdentity<T>(arg: T): T { console.log(arg.length); // Error return arg; } function loggingIdentity<T>(arg: T[]): T[] { console.log(arg.length); // OK return arg; } // 泛型我爱线报网接口 interface Person<T> { name: T; getAge(arg: T): T; } let myIdentity: Person<string> = { name: “兔兔”, getAge(name) { return name } }; // 泛型类 class GenericNumber<T> { zeroValue: T; add: (x: T, y: T) => T; } let myGenericNumber = new GenericNumber<number>(); // 泛型参数的默认类型 function我爱线报网 createArray<T = string>(length: number, value: T): Array<T> { }

类型守卫

// 要定义一个类型守卫,我们只要简单地定义一个函数,它的返回值是一个类型谓词 function isA(person: A | B): person is A{ return(person as A).name !== undefined; } // 使用 function doSomething(person: A | B): void { if(isA(person)) { // OK // … } } // 使用in操作符 // typeof类型守卫 // instanceof我爱线报网类型守卫 //
声明: 本站所有内容仅供参考,分享出来是为了可以给大家提供新的思路。 本站一切资源不代表本站立场,并不代表本站赞同其观点和对其真实性负责。 互联网转载资源会有一些其他联系方式,请大家不要盲目相信,被骗本站概不负责! 本网站部分内容只做项目揭秘,无法一对一教学指导,每篇文章内都含项目全套的教程讲解,请仔细阅读。 本站分享的所有平台仅供展示,本站不对平台真实性负责,站长建议大家自己根据项目关键词自己选择平台。 因为文章发布时间和您阅读文章时间存在时间差,所以有些项目红利期可能已经过了,能不能赚钱需要自己判断。 本网站仅做资源分享,不做任何收益保障,创业公司上收费几百上千的项目我免费分享出来的,希望大家可以认真学习。 本站所有资料均来自互联网公开分享,并不代表本站立场,如不慎侵犯到您的版权利益,请联系本站删除,将及时处理! 站长联系方式微信:ddd204443
行业资讯

我也可以更好歌词(抖音短片《我要更好》:用10位抖音用户的真实故事,回答“什么是美好”)

2024-4-8 21:23:35

行业资讯

韩国经典小白鞋品牌(韩国初创公司I'mweb为“小白型”网店主提供一站式定制网站服务)

2024-4-8 21:44:08

给力项目,中创会员网会员可以下载 友情提醒:中创会员网微信公众号开通了, 这里没有广告,只有干货!定期分享你意想不到的网络思维! 干货教程!网赚论坛部分教程需要解压密码,所以请务必加微信公众号! 据说加了站长微信的,一个月都可以赚几万块!试试就知道哦 站长v:ddd204443
0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索