Typescript的基本理解-一一网

前言: Typescript的一些基本概念层级理解，理解了该语言本身约定俗成的东西，后续进一步学习才有方向。如果有错误，欢迎指出。不喜勿喷哦！

Typescript学习

1. 快速上手Typescript;

2. Typescript配置文件;

3. Typescript标准库声明;

4. Typescript中文错误消息提示;

5. Typescript的隐式类型推断;

6. Typescript的类型断言;

7. Typescript的类型声明;

8. Typescript的泛性;

9. Typescript的抽象类;

1. 快速上手Typescript

npm init -y 初始化一个npm的项目
安装typescript
- npm install -g typescript 全局安装
- npm install typescript -D 局部安装
构建你的第一个TypeScript文件 greeter.ts

function greeter(person: string) {
    return "Hello, " + person;
}

let user = '123';

greeter(user);
复制代码

编译代码
- 在命令行上，运行TypeScript编译器：tsc greeter.ts
- 如果是局部安装的typescript在运行编译命令需要前面添加npx 例如: npx tsc greeter.ts
编译后的结果

function greeter(person) {
    return "Hello, " + person;
}
var user = '123';
greeter(user);

复制代码

2. Typescript配置文件

Typescript的项目的配置文件 — tsconfig.json
- 生成配置文件 npx tsc –init
打开tsconfig.json文件，查看配置文件。
- target 编译后的js代码是es哪个版本 es5 || es6(es2015) || …
  - 如果target是es5，只会引用es5所对应的声明文件lib.es5.d.ts
- module 编译之后的js代码遵循哪个模块化规范
- rootDir 指定要编译的代码的ts源代码文件
- outDir 指定编译后要输出的javascript代码目录
- strict 开启严格模式
- …
使用tsconfig.json配置文件。
- 直接运行在项目根目录中运行 tsc 命令才能使配置文件生效 – 编译整个项目
- tsc greeter.ts, 配置文件不生效

3. Typescript标准库声明

标准库就是对应内置对象所对应的声明文件，我们在代码中使用到内置对象就必须引入对应的标准库，否则ts就找不到对应的类型，报错。
查看标准库: 鼠标放在内置对象上, 右键点击转到定义进入小窗口, 双击内置对象接口名称进入。
如果标准库中没有对应的类型声明，找不到名称“Symbol”。报错提示: 是否需要更改目标库? 请尝试将 lib 编译器选项更改为 es2015 或更高版本。ts(2583)

// 内置对象
const h: symbol = Symbol()

// const arr = new Array(1, 2)
// console.log(arr)
// lib.es5.d.ts 类型声明文件 es5标准库所对应的声明文件， Ts中对内置对象的所有类型声明
// 查看类型声明: 右键点击查看声明进入小窗口，左键双击进入。

复制代码

4. Typescript中文错误消息提示

编辑JS代码类型出现了错误，我们希望输出到控制台的错误为中文（error TS2345: Argument of type ‘number’ is not assignable to parameter of type ‘string’.）使用命令: npx tsc –locale zh-CN
在编辑器vscode中的语法类型错误(popup中文提示)，打开工作区设置, 搜索typescript-locale, 选择 zh-CN。

5. Typescript的隐式类型推断

let num = 10; // let num: number | typescript帮助程序推断出来了 num变量是一个number类型
num = 'andy' // 报错 error TS2322: Type 'string' is not assignable to type 'number'

let num1 // let num1: any ｜ 如果typescript无法准确推断出类型，会把类型推断为any
复制代码

6. Typescript的类型断言


const arr = [1, 2, 3];
const result = arr.find( num => num > 0); // 这里一定会返回 1

// const num1 = result * result // 参与运算会报错，找不到result

const num2 = result as number // 方式一: 告诉typescript，result就是一个number类型
console.log(num2 * num2)

const num3 = <number>result // 方式二: 告诉typescript，result就是一个number类型
console.log(num3 * num3)

复制代码

7. Typescript的类型声明

引入的第三方模块，需要手动安装类型声明文件


const lodash = require('lodash'); // 找不到名称 "require"。是否需要为节点安装类型定义? 请尝试使用 `npm i --save-dev @types/node`。ts(2580)

const fun = lodash.curry(function (num: number) {
    console.log(num)
})
fun(10)

// 终端执行命令 npm i --save-dev @types/node

复制代码

如果没有手动使用declare语句声明


import { camelCase } from 'lodash';
// 使用declare声明
declare function camelCase(params: string): string;

const str = camelCase("andy-type");

复制代码

8. Typescript的泛性


// 创建一个number类型的数组
function createNumArray(len: number, value: number): number[] {
    return Array<number>(len).fill(value)
}

console.log(createNumArray(2, 100))



// 创建一个string类型的数组
function createStringArray(len: number, value: string): string[] {
    return Array<string>(len).fill(value)
}

console.log(createStringArray(2, 'andy'))


// 泛型的使用 把类型当作参数传递, 替换上述做法

function createArray<T>(len: number, value: T): T[] {
    return Array<T>(len).fill(value)
}

console.log(createArray<number>(2, 100))

console.log(createArray<string>(2, 'andy'))

复制代码

9. Typescript的抽象类

// 这就是一个抽象类
abstract class Animal {
    // 动物都有会叫的行为
    public abstract cry(call: string): void; // 不确定动物怎么叫的。定义成抽象方法，来解决父类方法的不确定性。抽象方法在父类中不能实现，所以没有函数体。但在后续在继承时，要具体实现此方法。
}

class Dog extends Animal {
    cry() {
        console.log('汪汪汪的叫')
    }
}

class Cat extends Animal {
    cry() {
        console.log('喵喵喵的叫');
    }
}

new Dog().cry()
new Cat().cry()
复制代码