Typescript 技术点总结

最新推荐文章于 2024-05-17 16:12:22 发布
最新推荐文章于 2024-05-17 16:12:22 发布
阅读量560 收藏 1
点赞数
分类专栏： typeScript js 文章标签： typeScript js
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_42204698/article/details/92667795
版权

文章目录

Typescript 技术点总结

1、原始数据类型

布尔值 boolean
let isDone: boolean = false;
//或者构造函数类型
let createdByNewBoolean: Boolean = new Boolean(1);
//或者通过下面方式返回布尔类型
let createdByBoolean: boolean = Boolean(1);
数值 number
let decLiteral: number = 6;
let hexLiteral: number = 0xf00d;
// ES6 中的二进制表示法
let binaryLiteral: number = 0b1010;
// ES6 中的八进制表示法
let octalLiteral: number = 0o744;
let notANumber: number = NaN;
let infinityNumber: number = Infinity;
字符串 string
let myName: string = 'Tom';
let myAge: number = 25;

// 模板字符串
let sentence: string = `Hello, my name is ${myName}.
I'll be ${myAge + 1} years old next month.`;
空值 void

JavaScript 没有空值（Void）的概念，在 TypeScript 中，可以用 void 表示没有任何返回值的函数

function alertName(): void {
    alert('My name is Tom');
}
//声明一个 void 类型的变量没有什么用，因为你只能将它赋值为 undefined 和 null
let unusable: void = undefined;
null 和 undefined
let u: undefined = undefined;
let n: null = null;

与 void 的区别是，undefined 和 null 是所有类型的子类型。也就是说 undefined 类型的变量，可以赋值给 number 类型的变量

// 这样不会报错
let num: number = undefined;
// 这样也不会报错
let u: undefined;
let num: number = u;
//但这样就报错
let u: void;
let num: number = u;
// index.ts(2,5): error TS2322: Type 'void' is not assignable to type 'number'.
任意值 any

变量如果在声明的时候，未指定其类型，那么它会被识别为任意值类型

let myFavoriteNumber: any = 'seven';
myFavoriteNumber = 7;
//声明一个变量为任意值之后，对它的任何操作，返回的内容的类型都是任意值。
联合类型
let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

联合类型的属性和方法

//只能访问共有的属性或方法
function getString(something: string | number): string {
    return something.toString();
}

2、对象类型

接口 Interfaces
interface Person {
    name: string;
    age: number;
}

let tom: Person = {
    name: 'Tom',
    age: 25
};
//必须一一对应，少属性报错

可选属性

interface Person {
    name: string;
    age?: number;
}

let tom: Person = {
    name: 'Tom'
};

任意属性

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

interface Person {
    name: string;
    age?: number;
    [propName: string]: any;
}

let tom: Person = {
    name: 'Tom',
    gender: 'male'
};
let tom1: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male'
};
//tom1报错，age是任意类型的子集，不为字符串

只读属性 readonly

//第一次给对象赋值的时候
interface Person {
    readonly id: number;
    name: string;
    age?: number;
    [propName: string]: any;
}

数组

  • 第一种
let fibonacci: number[] = [1, 1, 2, 5];
  • 第二种：数组泛型
let fibonacci: Array<number> = [1, 1, 2, 5];
  • 第三种：接口表示数组
interface NumberArray {
    [index: number]: number;
}
let fibonacci: NumberArray = [1, 1, 2, 3, 5];
//NumberArray 表示：只要 index 的类型是 number，那么值的类型必须是 number。
  • 第四种：any
let list: any[] = ['Xcat Liu', 25, { website: 'http://xcatliu.com' }];

类数组

上常见的类数组都有自己的接口定义，如 IArguments, NodeList, HTMLCollection等：

function sum() {
    let args: IArguments = arguments;
}

函数

函数声明

function sum(x: number, y: number): number {
    return x + y;
}
//执行时多余定义参数或者小于都不被允许

函数表达式

let mySum = function (x: number, y: number): number {
    return x + y;
};
//如果需要我们手动给 mySum 添加类型
let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
    return x + y;
};
//这里的 => 不是es6的 =>

用接口定义函数的形状

interface SearchFunc {
    (source: string, subString: string): boolean;
}

let mySearch: SearchFunc;
mySearch = function(source: string, subString: string) {
    return source.search(subString) !== -1;
}

可选参数

function buildName(firstName: string, lastName?: string) {
    if (lastName) {
        return firstName + ' ' + lastName;
    } else {
        return firstName;
    }
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom');

可选参数后面不允许再出现必须参数了
参数默认值

function buildName(firstName: string, lastName: string = 'Cat') {
    return firstName + ' ' + lastName;
}
let tomcat = buildName('Tom', 'Cat');
let tom = buildName('Tom');

剩余参数

//只能是最后一个参数
function push(array: any[], ...items: any[]) {
    items.forEach(function(item) {
        array.push(item);
    });
}

let a = [];
push(a, 1, 2, 3);

重载

function reverse(x: number): number;
function reverse(x: string): string;
function reverse(x: number | string): number | string {
    if (typeof x === 'number') {
        return Number(x.toString().split('').reverse().join(''));
    } else if (typeof x === 'string') {
        return x.split('').reverse().join('');
    }
}

类型断言

需要在还不确定类型的时候就访问其中一个类型的属性或方法，可以使用类型断言

function getLength(something: string | number): number {
    if ((<string>something).length) {
        return (<string>something).length;
    } else {
        return something.toString().length;
    }
}
//类型断言不是类型转换，断言成一个联合类型中不存在的类型是不允许的

声明文件

声明语句
declare var jQuery: (selector: string) => any;

jQuery('#foo');

上例中，declare var 并没有真的定义一个变量，只是定义了全局变量 jQuery的类型，仅仅会用于编译时的检查，在编译结果中会被删除

全局变量声明文件
  • 通常我们会把声明语句放到一个单独的文件（jQuery.d.ts）中，这就是声明文件
  • 声明文件必需以d.ts为后缀。
第三方声明文件
npm install @types/jquery --save-dev
书写声明文件
  • 要是以npm install @types/xxx --save-dev安装的，则不需要配置

declare var

// src/jQuery.d.ts

declare const jQuery: (selector: string) => any;
//使用
jQuery('#foo');

declare function

// src/jQuery.d.ts

declare function jQuery(selector: string): any;
declare function jQuery(domReadyCallback: () => any): any;
//使用
jQuery('#foo');
jQuery(function() {
    alert('Dom Ready!');
});

declare class
declare class语句也 只能用来定义类型，不能用来定义具体的实现 ，比如定义 sayHi方法的具体实现则会报错

// src/Animal.d.ts

declare class Animal {
    name: string;
    constructor(name: string);
    sayHi(): string;
}
//使用
// src/index.ts

let cat = new Animal('Tom');

declare emun
declare emun语句也 只能用来定义类型，不能用来定义具体的值

// src/Directions.d.ts

declare enum Directions {
    Up,
    Down,
    Left,
    Right
}
//使用
// src/index.ts

let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];

declare namespace

// src/jQuery.d.ts

declare namespace jQuery {
    function ajax(url: string, settings?: any): void;
}
//使用
// src/index.ts

jQuery.ajax('/api/get_something');

interface 和 type

// src/jQuery.d.ts

interface AjaxSettings {
    method?: 'GET' | 'POST'
    data?: any;
}
declare namespace jQuery {
    function ajax(url: string, settings?: AjaxSettings): void;
}
//使用
// src/index.ts

let settings: AjaxSettings = {
    method: 'POST',
    data: {
        name: 'foo'
    }
};
jQuery.ajax('/api/post_something', settings);

防止命名冲突

// src/jQuery.d.ts
//放到namespace下
declare namespace jQuery {
    interface AjaxSettings {
        method?: 'GET' | 'POST'
        data?: any;
    }
    function ajax(url: string, settings?: AjaxSettings): void;
}
//使用
// src/index.ts

let settings: jQuery.AjaxSettings = {
    method: 'POST',
    data: {
        name: 'foo'
    }
};
jQuery.ajax('/api/post_something', settings);

声明合并

// src/jQuery.d.ts

declare function jQuery(selector: string): any;
declare namespace jQuery {
    function ajax(url: string, settings?: any): void;
}
//使用
// src/index.ts

jQuery('#foo');
jQuery.ajax('/api/get_something');

npm包

  • 判断依据是 package.json 中有 types 字段，或者有一个 index.d.ts 声明文件
  • 尝试安装一下对应的 @types 包就知道是否存在该声明文件，安装命令是 npm install @types/foo --save-dev
  • 创建一个 types目录，专门用来管理自己写的声明文件，将 foo的声明文件放到 types/foo/index.d.ts中。这种方式需要配置下tsconfig.json中的 paths和 baseUrl字段。
目录结构
/path/to/project
├── src
|  └── index.ts
├── types
|  └── foo
|     └── index.d.ts
└── tsconfig.json

tsconfig.json 内容

{
    "compilerOptions": {
        "module": "commonjs",
        "baseUrl": "./",
        "paths": {
            "*": ["types/*"]
        }
    }
}

export导出

// types/foo/index.d.ts

declare const name: string;
declare function getName(): string;
declare class Animal {
    constructor(name: string);
    sayHi(): string;
}
declare enum Directions {
    Up,
    Down,
    Left,
    Right
}
interface Options {
    data: any;
}

export { name, getName, Animal, Directions, Options };
//导入模块
// src/index.ts

import { name, getName, Animal, Directions, Options } from 'foo';

console.log(name);
let myName = getName();
let cat = new Animal('Tom');
let directions = [Directions.Up, Directions.Down, Directions.Left, Directions.Right];
let options: Options = {
    data: {
        name: 'foo'
    }
};

export default 导出

// types/foo/index.d.ts

export default Directions;

declare enum Directions {
    Up,
    Down,
    Left,
    Right
}

export =

// 整体导出
module.exports = foo;
// 单个导出
exports.bar = bar;
//导入
// 整体导入
const foo = require('foo');
// 单个导入
const bar = require('foo').bar;

UMD库 的 export as namespace

  • 既可以通过 <script> 标签引入，又可以通过 import 导入的库，称为UMD 库
// types/foo/index.d.ts

export as namespace foo;
export default foo;

declare function foo(): string;
declare namespace foo {
    const bar: number;
}

直接扩展全局变量

interface String {
    prependHello(): string;
}

'foo'.prependHello();

declare global 在 npm 包或 UMD 库中扩展全局变量

// types/foo/index.d.ts

declare global {
    interface String {
        prependHello(): string;
    }
}

export {};
//使用
// src/index.ts
//注意即使此声明文件不需要导出任何东西，仍然需要导出一个空对象，用来告诉编译器这是一个模块的声明文件，而不是一个全局变量的声明文件。

'bar'.prependHello();

内置对象

ECMAScript 的内置对象
let b: Boolean = new Boolean(1);
let e: Error = new Error('Error occurred');
let d: Date = new Date();
let r: RegExp = /[a-z]/;
DOM 和 BOM 的内置对象
let body: HTMLElement = document.body;
let allDiv: NodeList = document.querySelectorAll('div');
document.addEventListener('click', function(e: MouseEvent) {
  // Do something
});
dearqz
关注
专栏目录
TypeScript技术知识整理
a1396531115的博客
11-22 573
TypeScript技术知识整理 文章目录TypeScript技术知识整理一、环境搭建与编译执行1.安装 `TypeScript` 编译器2.编写代码**代码编辑器 - vscode**3.编译执行5.一些有用的编译选项--outDir--target--watch6.编译配置文件7.指定加载的配置文件二、类型系统初识1.什么是类型2.动态类型语言 & 静态类型语言**动态类型语言****...
JavaScript & TypeScript总结
SS_SS_SSS_SSS的博客
06-25 878
JavaScript初学总结
16 个有用的 TypeScript 和 JavaScript 技巧
web前端开发
05-29 232
英文 | https://blog.logrocket.com/16-useful-typescript-javascript-shorthands-know/翻译 | 杨小爱JavaScript 和 TypeScript 共享许多有用的常用代码概念的技巧替代方案。这些代码替代方案可以帮助减少代码行数，这也是我们努力的目标。在本文中，我们将分享16 个常见的 TypeS...
TypeScript 常见知识点总结及实例解析【复习、了解必看！】
计算机小white博客
05-17 1195
本文简明扼要地总结了 TypeScript 的常见知识点，并通过一些小实例展示了它的使用方法，旨在帮助初学者快速掌握 TypeScript 的基础知识，也为有需要复习的开发者提供一个便捷的知识点梳理。
Typescript技术分享
想想挺好啊
09-08 208
TypeScript
AI考拉技术分享--程序媛带你入门the real typescript
weixin_33691817的博客
08-14 190
前言 公司的程序猿的“日常女友”是JS，每天相爱相杀，一边吐槽一边却又离不开；自从新入职了个程序媛小姐姐，分享了Typescript大法，大家上班腰也不酸腿也不累了，经常往小姐姐的位置上问问题... 女程序媛说：用到了Typescript的特性，才是写了真的TypeScript；否则它们都只是披着.ts外套的JavaScript 。 Typescript 还没出生的年代 那时候，JavaScrip...
TypeScript_个人技术小文章旨在对知识的总结能帮助到别人就更好啦.zip
最新发布
11-11
TypeScript
WEB学习之JavaScript & TypeScript总结
qq_54553728的博客
07-05 928
JavaScript和typescript的一些学习
TypeScript和JavaScript的数据类型对比总结
12-14
TypeScript和JavaScript是两种广泛使用的编程语言，它们在数据类型方面有着显著的相似性和差异性。JavaScript，作为Web开发的...选择使用哪种语言，取决于项目的需求、团队的技术栈以及对代码质量和开发效率的考虑。
typescript分享.pptx
06-19
现在前端的技术发展日新月异，从最开始的es5到es6,再到现在的typescript。本课件着重介绍了typescript的使用场景以及如何在项目中配置使用typescript，非常适合新人和想了解ts的人哦。
typescript 总结
wangyoucaoxiaoxiao的专栏
05-27 497
将ts文件编译为js 文件 ****************************************************************************** typescript中几种特殊的number类型 1 NaN: 由于种种原因， 不是数字，出现这种状况不会报错，而是将结果看成NaN 2 Infinity ：正无穷大 3 -Infinit...
TypeScript学习简单总结
qq_53574266的博客
07-10 157
TypeScript简单学习总结总结
TypeScript基础知识点
m0_62073591的博客
09-07 1227
（1）Typlescript是Javascript一个超集支持ECMAScript 6标准。（2）TypeScript由微软开发的自由和开源的编程语言。（3）TypeScript设计目标是开发大型应用，它可以编译成纯JavaScript，编译出来的JavaScript 可以运行在任何浏览器上（4）TypeScript 是一种由微软开发的自由和开源的编程语言。它是JavaScript的一个超集，而且本质上向这个语言添加了可选的静态类型和基于类的面向对象编程。
TypeScript学习分享
m0_57308879的博客
02-03 219
typescript学习记录
TypeScript技术（一）让你对前端有个更高的认知！！
筱白爱学习！的博客
08-04 344
前言 本文章带你上手并掌握前端的一个目前市面上比较火爆的一门技术，相信大家对前端的JavaScript不陌生吧，入门前端必备的也是必须掌握的技术之一吧，那好，我们现在来学习一个比JavaScript更牛X的技术，那就是TypeScript技术. 这个技术有什么优势呢？ 为何说比JavaScript厉害呢? 为什么有人被视为”前端的未来“？ 为什么是TypeScript而非JavaScript？ 以下文章内...
5 个有用的 TypeScript 技巧
m0_61643133的博客
11-16 181
在这篇文章中，我想强调几个我希望我在开始编写现代 JavaScript 和 TypeScript 代码时就知道的技巧。随着越来越多的大型项目使用 JavaScript，许多人现在已经转而使用 TypeScript 编写代码，TypeScript 通过编译提供类型和向后兼容性。如果你试图将事件名称“用户”更改为“帐户”，你可以放心，你的代码仍然可以工作，并且你不会忘记将更改复制粘贴到某处。
TypeScript：熟练掌握TypeScript
snowball的博客
05-07 4431
注意：getElementById方法返回值的类型是HTMLElement，该类型只包含所有标签的属性或方法，不包含a标签特有的href等属性。2、继承后，Point3D 就有了Point2D的所有属性和方法（此时，Point3D同时有 x，y，z三个属性）。解释：| （竖线）在TS中叫做联合类型，由两个或多个其他类型组成的类型，表示可以是这些类型中的任意一种。3.5、 类型推断机制，不需要在代码中的每个地方都显示标注类型，让你在享受优势的同时，尽量降低了成本。方法采用方法名（）：返回值类型的形式。
前端知识分享——TypeScript 学习记录
sinat_43095140的博客
01-27 863
TypeScript 学习记录TypeScript 学习记录快速上手配置文件原始类型标准库声明中文错误消息作用域问题TypeScript Object 类型TypeScript 数组类型TypeScript 元组类型TypeScript 枚举类型TypeScript 函数类型TypeScript 任意类型TypeScript 隐式类型推断TypeScript 类型断言TypeScript 接口(Interfaces)TypeScript 接口补充TypeScript 类的基本使用TypeScript 类的访
"TypeScript 基础篇学习文档总结与完结
TypeScript 学习文档-基础篇（完结） 本文档为TypeScript初学者提供了全面的基础知识，从初识TypeScript，到为什么使用TypeScript，再到常用类型的介绍，都进行了详细的讲解。内容包括TypeScript的基本概念、特点、...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值