typescript初识

最新推荐文章于 2021-10-03 15:52:53 发布
最新推荐文章于 2021-10-03 15:52:53 发布
阅读量173 收藏 1
点赞数
分类专栏： TypeScript 文章标签： typescript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/mengshang529/article/details/82835739
版权

typescript

原始数据类型

  1. 布尔值

    let isDone: boolean = false;

  2. 数字

    let decLiteral: number = 6;

  3. 字符串

    let name: string = "bob";

  4. 数组

    • let list: number[] = [1, 2, 3];
    • let list: Array<number> = [1, 2, 3]; 泛型

  5. 元组

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

    • 访问越界的元素，会使用联合类型替代

      let x: [string, number];
x = ['hello', 10];
x[3] = 'world'; // OK, 字符串可以赋值给(string | number)类型

  6. 空值

    • 用 void 表示没有任何返回值的函数

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

    • void类型变量：undefined、null

      let unusable: void = undefined;

  7. Null 和 Undefined

    与 void 的区别是，undefined 和 null 是所有类型的子类型

    let u: undefined = undefined;
let n: null = null;
// 这样不会报错
let num: number = undefined;

任意值(any)

  • any 类型，允许被赋值为任意类型
  • 声明一个变量为任意值之后，对它的任何操作，返回的内容的类型都是任意值。
  • 变量在声明未指定其类型，会被识别为任意值类型

类型推论

  • TS会在没有明确的指定类型的时候推测出一个类型------类型推论。

    let myFavoriteNumber = 'seven';
myFavoriteNumber = 7;
//等价于
let myFavoriteNumber: string = 'seven';
myFavoriteNumber = 7;

  • 定义的时候没有赋值，都会被推断成 any 类型而完全不被类型检查

联合类型

联合类型: 取值可以为多种类型中的一种

let myFavoriteNumber: string | number;
myFavoriteNumber = 'seven';
myFavoriteNumber = 7;

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

    //error: Property 'length' does not exist on type 'number'.
function getLength(something: string | number): number {
    return something.length;
}

//success
function getString(something: string | number): string {
    return something.toString();
}

对象的类型——接口

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

let tom: Person = {
    name: 'Tom',
    age: 25
};
  • 接口一般首字母大写
  • 赋值的时候，变量的形状必须和接口的形状保持一致(不可多属性、少属性)

  1. 可选属性

    不完全匹配一个形状

    interface Person {
    name: string;
    age?: number;
}
let tom: Person = {
    name: 'Tom'
};

  2. 任意属性

    [propName: string]: any;

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

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

let tom: Person = {
    name: 'Tom',
    age: 25,
    gender: 'male'
};
//error 任意属性的值允许是 string，但是可选属性 age 的值却是 number，number 不是 string 的子属性

  3. 只读属性

    用 readonly 定义只读属性

    只读约束存在于第一次给对象赋值的时候，而不是第一次给只读属性赋值的时候

    interface Person {
    readonly id: number;
    name: string;
    age?: number;
    [propName: string]: any;
}
let tom: Person = {
    id: 89757,
    name: 'Tom',
    gender: 'male'
};
tom.id = 9527;
//error 使用 readonly 定义的属性 id 初始化后，又被赋值了，所以报错了数组的类型

数组类型

  1. 「类型 + 方括号」表示法

    • 数组的项中不允许出现其他的类型
    • 数组的一些方法的参数也会根据数组在定义时约定的类型进行限制
    let fibonacci: number[] = [1, 1, 2, 3, 5];

  2. 数组泛型

    let fibonacci: Array<number> = [1, 1, 2, 3, 5];

  3. 任意类型数组

    let list: any[] = ['Xcat Liu', 25, { website: 'http://xcatliu.com' }];

  4. 类数组

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

    详见内置对象

函数的类型

  1. 函数声明

    function sum(x: number, y: number): number {
    return x + y;
}
    • 输入多余的（或者少于要求的）参数，是不被允许的

  2. 函数表达式

    • 不要混淆了 TS 中的 => 和 ES6 中的 =>
    • 在 TS 的类型定义中，=> 用来表示函数的定义，左边是输入类型，需要用括号括起来，右边是输出类型。
    • 在 ES6 中，=> 叫做箭头函数
    let mySum: (x: number, y: number) => number = function (x: number, y: number): number {
    return x + y;
};

  3. 用接口定义函数的形状

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

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

  4. 可选参数

    用 ? 表示可选的参数

    • 可选参数后面不允许再出现必须参数 (可选参数必须接在必需参数后面 )

      function buildName(firstName: string, lastName?: string) {
    if (lastName) {
        return firstName + ' ' + lastName;
    } else {
        return firstName;
    }
}

  5. 参数默认值

    • TS 会将添加了默认值的参数识别为可选参数

    • 参数有默认值后，就不受「可选参数必须接在必需参数后面」的限制了

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

  6. 剩余参数

    • rest 参数只能是最后一个参数

      //items 是一个数组。所以我们可以用数组的类型来定义
function push(array: any[], ...items: any[]) {
    items.forEach(function(item) {
        array.push(item);
    });
}

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

  7. 重载

    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('');
    }
}

类型断言

  1. 语法

    • <类型>值
    • 值 as 类型

  2. 将一个联合类型的变量指定为一个更加具体的类型

    function getLength(something: string | number): number {
    if ((<string>something).length) {
        return (<string>something).length;
    } else {
        return something.toString().length;
    }
}

  3. 类型断言不是类型转换，断言成一个联合类型中不存在的类型是不允许的

声明文件

内置对象

  1. ECMAScript 的内置对象

    let b: Boolean = new Boolean(1);
let e: Error = new Error('Error occurred');
let d: Date = new Date();
let r: RegExp = /[a-z]/;

  2. DOM 和 BOM 的内置对象

    Document、HTMLElement、Event、NodeList

    let body: HTMLElement = document.body;
let allDiv: NodeList = document.querySelectorAll('div');
document.addEventListener('click', function(e: MouseEvent) {
  // Do something
});

类型别名

使用 type 创建类型别名

type Name = string;
type NameResolver = () => string;
type NameOrResolver = Name | NameResolver;
function getName(n: NameOrResolver): Name {
    if (typeof n === 'string') {
        return n;
    } else {
        return n();
    }
}

字符串字面量类型

  • 字符串字面量类型用来约束取值只能是某几个字符串中的一个
  • 类型别名与字符串字面量类型都是使用type进行定义
type EventNames = 'click' | 'scroll' | 'mousemove';
function handleEvent(ele: Element, event: EventNames) {
    // do something
}

handleEvent(document.getElementById('hello'), 'scroll');  // 没问题
handleEvent(document.getElementById('world'), 'dbclick'); // 报错，event 不能为 'dbclick'

元祖

元组合并了不同类型的对象

  • 直接对元组类型的变量进行初始化或者赋值的时候，需要提供所有元组类型中指定的项

  • 先声明变量，可只赋值部分

  • 当添加越界的元素时，它的类型会被限制为元组中每个类型的联合类型

    let xcatliu: [string, number] = ['Xcat Liu'];//error

let xcatliu: [string, number];
xcatliu = ['Xcat Liu', 25];

枚举

枚举类型用于取值被限定在一定范围内的场景

  • 枚举成员会被赋值为从 0 开始递增的数字，同时也会对枚举值到枚举名进行反向映射

    enum Days {Sun, Mon, Tue, Wed, Thu, Fri, Sat};

console.log(Days["Sun"] === 0); // true
console.log(Days["Mon"] === 1); // true
console.log(Days["Tue"] === 2); // true
console.log(Days["Sat"] === 6); // true

console.log(Days[0] === "Sun"); // true
console.log(Days[1] === "Mon"); // true
console.log(Days[2] === "Tue"); // true
console.log(Days[6] === "Sat"); // true

  1. 手动赋值

    • 未手动赋值的枚举项会接着上一个枚举项递增

      enum Days {Sun = 7, Mon = 1, Tue, Wed, Thu, Fri, Sat};

console.log(Days["Sun"] === 7); // true
console.log(Days["Mon"] === 1); // true
console.log(Days["Tue"] === 2); // true
console.log(Days["Sat"] === 6); // true

    • 注意未手动赋值覆盖手动赋值情况

      enum Days {Sun = 3, Mon = 1, Tue, Wed, Thu, Fri, Sat};

console.log(Days["Sun"] === 3); // true
console.log(Days["Wed"] === 3); // true
console.log(Days[3] === "Sun"); // false
console.log(Days[3] === "Wed"); // true

    • 手动赋值的枚举项可以不是数字（使用类型断言）

      enum Days {Sun = 7, Mon, Tue, Wed, Thu, Fri, Sat = <any>"S"};

  2. 常数项和计算所得项

    • 计算所得项

      enum Color {Red, Green, Blue = "blue".length};

    • 未手动赋值的项不能在计算所得项后面

  3. 常数枚举

    常数枚举是使用 const enum 定义的枚举类型

    • 常数枚举与普通枚举的区别是，它会在编译阶段被删除，并且不能包含计算成员

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

  4. 外部枚举

    • 外部枚举是使用 declare enum 定义的枚举类型
    • declare 定义的类型只会用于编译时的检查，编译结果中会被删除

类

  1. public private 和 protected

    • public 修饰的属性或方法是公有的，可以在任何地方被访问到，默认所有的属性和方法都是 public 的
    • private 修饰的属性或方法是私有的，不能在声明它的类的外部访问
    • protected 修饰的属性或方法是受保护的，它和 private 类似，区别是它在子类中也是允许被访问的

  2. 抽象类

    • abstract 用于定义抽象类和其中的抽象方法
    • 抽象类是不允许被实例化
    • 抽象类中的抽象方法必须被子类实现
    abstract class Animal {
    public name;
    public constructor(name) {
        this.name = name;
    }
    public abstract sayHi();
}

class Cat extends Animal {
    public sayHi() {
        console.log(`Meow, My name is ${this.name}`);
    }
}

let cat = new Cat('Tom');

  3. 类的类型

    class Animal {
    name: string;
    constructor(name: string) {
        this.name = name;
    }
    sayHi(): string {
      return `My name is ${this.name}`;
    }
}

let a: Animal = new Animal('Jack');
console.log(a.sayHi()); // My name is Jack

类与接口

接口的用途：

  • 接口（Interfaces）可以用于对「对象的形状（Shape）」进行描述。
  • 接口可以对类的一部分行为进行抽象

  1. 类实现接口

    • 一个类只能继承自另一个类，有时候不同类之间可以有一些共有的特性，这时候就可以把特性提取成接口（interfaces），用 implements 关键字来实现
    • 一个类可以实现多个接口
    interface Alarm {
    alert();
}

interface Light {
    lightOn();
    lightOff();
}

class Car implements Alarm, Light {
    alert() {
        console.log('Car alert');
    }
    lightOn() {
        console.log('Car light on');
    }
    lightOff() {
        console.log('Car light off');
    }
}
//Car 实现了 Alarm 和 Light 接口，既能报警，也能开关车灯

  2. 接口继承接口

    interface Alarm {
    alert();
}

interface LightableAlarm extends Alarm {
    lightOn();
    lightOff();
}

  3. 接口继承类

    class Point {
    x: number;
    y: number;
}

interface Point3d extends Point {
    z: number;
}

let point3d: Point3d = {x: 1, y: 2, z: 3};

  4. 混合类型

泛型

泛型（Generics）是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性

//在函数名后添加了 <T>，其中 T 用来指代任意输入的类型，在后面的输入 value: T 和输出 Array<T> 中即可使用了。
function createArray<T>(length: number, value: T): Array<T> {
    let result: T[] = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}
//接着在调用的时候，可以指定它具体的类型为 string
createArray<string>(3, 'x'); // ['x', 'x', 'x']

  1. 多个类型参数

    定义泛型的时候，可以一次定义多个类型参数

    function swap<T, U>(tuple: [T, U]): [U, T] {
    return [tuple[1], tuple[0]];
}

swap([7, 'seven']); // ['seven', 7]

  2. 泛型约束

    在函数内部使用泛型变量的时候，由于事先不知道它是哪种类型，所以不能随意的操作它的属性或方法 ，可以对泛型进行约束，只允许这个函数传入那些包含 length 属性的变量。这就是泛型约束

    • 使用了 extends 约束了泛型 T 必须符合接口 的形状

      interface Lengthwise {
    length: number;
}

function loggingIdentity<T extends Lengthwise>(arg: T): T {
    console.log(arg.length);
    return arg;
}
//使用了 extends 约束了泛型 T 必须符合接口 Lengthwise 的形状，也就是必须包含 length 属性

    • 多个类型参数之间也可以互相约束

      function copyFields<T extends U, U>(target: T, source: U): T {
    for (let id in source) {
        target[id] = (<T>source)[id];
    }
    return target;
}

let x = { a: 1, b: 2, c: 3, d: 4 };

copyFields(x, { b: 10, d: 20 });
//使用了两个类型参数，其中要求 T 继承 U，这样就保证了 U 上不会出现 T 中不存在的字段

  3. 泛型接口

    使用含有泛型的接口来定义函数的形状

    //可以把泛型参数提前到接口名上
interface CreateArrayFunc<T> {
    (length: number, value: T): Array<T>;
}
//此时在使用泛型接口的时候，需要定义泛型的类型
let createArray: CreateArrayFunc<any>;
createArray = function<T>(length: number, value: T): Array<T> {
    let result: T[] = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}

createArray(3, 'x'); // ['x', 'x', 'x']

  4. 泛型类

    class GenericNumber<T> {
    zeroValue: T;
    add: (x: T, y: T) => T;
}

let myGenericNumber = new GenericNumber<number>();
myGenericNumber.zeroValue = 0;
myGenericNumber.add = function(x, y) { return x + y; };

  5. 泛型参数的默认类型

    当使用泛型时没有在代码中直接指定类型参数，从实际值参数中也无法推测出时，这个默认类型就会起作用

    function createArray<T = string>(length: number, value: T): Array<T> {
    let result: T[] = [];
    for (let i = 0; i < length; i++) {
        result[i] = value;
    }
    return result;
}

声明合并

如果定义了两个相同名字的函数、接口或类，那么它们会合并成一个类型

  1. 函数的合并

    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('');
    }
}

  2. 接口的合并

    • 接口中的属性在合并时会简单的合并到一个接口

      • 合并的属性的类型必须是唯一的

        interface Alarm {
    price: number;
}
interface Alarm {
    weight: number;
}
//相当于
interface Alarm {
    price: number;
    weight: number;
}

      • 若不唯一，类型必须相同，否则会报错

        interface Alarm {
    price: number;
}
interface Alarm {
    price: number;  // 虽然重复了，但是类型都是 `number`，所以不会报错
    weight: number;
}

    • 接口中方法的合并，与函数的合并一样

      interface Alarm {
    price: number;
    alert(s: string): string;
}
interface Alarm {
    weight: number;
    alert(s: string, n: number): string;
}
//相当于
interface Alarm {
    price: number;
    weight: number;
    alert(s: string): string;
    alert(s: string, n: number): string;
}

  3. 类的合并

    类的合并与接口的合并规则一致

梦殇918
关注
  • 0
    点赞
  • 踩
  • 1
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
一、TypeScript 初体验
weixin_46261309的博客
07-14 259
TypeScript 初体验1. TypeScript 概述1.1 什么是JavaScript1.2 TypeScript 是什么1.3 TypeScript 相比 JS 的优势2. 开发工具准备2.1 开发工具介绍2.2 安装 VSCode2.3 安装 Node.js2.4 安装解析 TS 的工具包3. 第一个 TS 文件3.1 步骤3.2 简化执行TS的步骤4. 注释和输出语句4.1 注释4.2 输出语句 从今天开始，我们来正式学习typescript。首先我们来认识和体验一下typescript，本次
TypeScrippt知识
最新发布
weixin_51040108的博客
10-28 1525
TypeScrippt知识
TypeScript 程序设计.pptx
05-08
TypeScript 程序设计教学PPT，从基础到实践，一步一步的引入，最后会实战开发一个小游戏，下载地址：https://gitee.com/dolayout/Snake-for-TypeScript，让更多的朋友了解并掌握TypeScript，体会TypeScript更多的魅力！
typescript分享.pptx
06-19
现在前端的技术发展日新月异，从最开始的es5到es6,再到现在的typescript。本课件着重介绍了typescript的使用场景以及如何在项目中配置使用typescript，非常适合新人和想了解ts的人哦。
Typescript类型脚本课件.pptx
06-19
Typescript类型脚本课件.pptx
first-TypeScript
04-09
"first-TypeScript" 这个标题暗示了我们正在探讨的是一个关于TypeScript的初识或入门项目。"first"通常代表初级或初始阶段，意味着我们将要学习的是TypeScript的基础知识和核心概念。 **TypeScript概述** ...
TypeScript学习文档-基础篇（完结）.doc
07-08
第一章：TypeScript 初识 * 1.1 TypeScript 学习初见：TypeScript 是什么，它的优点和缺点是什么？ * 1.2 TypeScript 介绍：TypeScript 的特点、应用场景和发展历史。 * 1.3 JS 、TS 和 ES 之间的关系：TypeScript ...
打字稿：Primeiros passos com打字稿名GoStack-RocketSeat
02-16
这篇打字稿是关于在GoStack培训课程中由RocketSeat提供的初识TypeScript的教程。GoStack是一个知名的在线教育平台，专注于培养全栈开发者，而RocketSeat作为该平台的一部分，提供了一系列高质量的编程课程，其中就...
iniciando后端
02-15
《初识后端开发：基于TypeScript的探索》 在当今的互联网世界中，后端开发扮演着至关重要的角色，它是构建强大、高效且可扩展的Web应用的基础。本篇文章将带您一起“iniciando后端”，即开启后端开发之旅，特别关注...
vuepress-starter
04-19
7. `/chapter1/01_初识TS`: 这可能是文档结构的一部分，代表第一章的第一个子章节，主题是“初识TypeScript”。 从【标签】中，虽然没有提供具体标签，但我们可以推断这个项目可能关注VuePress的使用，特别是与...
一节课掌握TypeScript.pptx
08-14
记录一次技术分享
PPTist：基于Vue3.x + TypeScript的在线演示文稿应用
02-09
PPTist 一个基于Vue3.x + TypeScript的在线演示文稿应用，还原了大部分PPT常用功能，支持文字，图片，形状，线条，图表，表格6种最常用的元素类型，每一种元素都拥有高度可编辑能力，同时支持丰富的快捷键和快捷菜单，重新还原本地桌面应用的使用体验。 您可以对它进行二次开发，打造属于自己的在线演示文稿应用或在线设计工具（二次开发文档正在编写中）。 在线体验地址（优先更新）： : 如果网络状态不佳，可以访问国内实体： ://pptist.gitee.io/ Github仓库： : 项目运行 npm install npm run serve 功能列表 通用功能 历史记录 快捷键 快捷菜单 主题设置 幻灯片页面编辑 页面添加，删除 页面顺序调整 页面复制粘贴 背景设置（纯色，渐变，图片） 网格线 幻灯片元素编辑 元素添加，删除 元素复制粘贴 元素拖拽移动 元素旋转 元
《TypeScript》电子pdf版.zip
08-19
《TypeScript》电子pdf版.zip
typescript 笔记.xmind
07-01
typescript 基础语法 环境搭建 数据类型 Array(数组) 元组
TypeScript_1.4_VS2013
08-27
TypeScript_1.4_VS2013
TypeScript概论
写一封信
05-10 227
为什么会出现？ 　　第一次看到 TypeScript ，小编第一反应就是它的名字和 JavaScript有相同的地方。事实证明，它们二者有紧密的关系。那么为什么有了JavaScript 还会出现 TypeScript 呢？ 　　JavaScript 有个典型的特征是，它是一种自由语言，它的语法规则并不是那么严格，因此，我们容易犯错，难发现错。 TypeScript 很好的解决了这个问题，它是 ...
转载：《TypeScript 中文入门教程》
weixin_33701564的博客
12-03 361
缘由 事情是这样的，我想搜索 TypeScript 中文教程，结果在 https://www.baidu.com ， https://cn.bing.com ，上都找不到官方的翻译，也没有一个像样的翻译（搜索的时间是2015-12-02），可怜我们无法使用google，所以就想去自己翻译官方的 TypeScript-Handbook。 于是我Fork了官方的库 https://github.c...
TypeScript 超详细入门讲解
橘导的博客
10-03 493
TypeScript 超详细入门讲解 ???? 这篇文章是学习TypeScript的学习笔记 ???? 非常感谢你的阅读，不对的地方欢迎指正 ???? ????愿你忠于自己，热爱生活 1. 搭建环境 全局安装typesctipt npm i -g typescript 复制代码 创建一个TS文件 console.log('Hello Ts'); 复制代码 通过命令转化TS tsc '文件名' 复制代码 2. 基本类型 js 是动态类型语言，所以有很多时候都不会报错，但是会
typescript学习笔记（一）
weixin_43015194的博客
03-16 117
TypeScript 是一种由微软开发的自由和开源的编程语言，它是JavaScript的一个超集，扩展了JavaScript的语法。TypeScript 通过类型注解提供编译时的静态类型检查，可处理已有的 JavaScript 代码，并只对其中的 TypeScript 代码进行编译，另外TypeScript可以在任何浏览器、任何计算机和任何操作系统上运行。 1.typescript的数据类型 ty...
深入探索TypeScript
"Pro TypeScript" 本书"Pro TypeScript"深入探讨了TypeScript这门强大的静态类型语言。TypeScript是由微软开发的，旨在提供JavaScript的超集，它添加了强类型系统和其他高级编程特性，如类、接口和模块，以提高代码...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值