文档


文章

介绍

被称之为加强版JS, JS为动态语言 只在运行执行时才能明确知道变量 / 参数的类型, 而 TS 在编写编译前就已经将类型固定, 等到有错误时提早发现以便不会在运行时出错

安装

使用 npm 全局安装 typescript 解析

  1. npm install -g typescript

安装后需要对**TS**文件进行编译解析时需要配置 **tsconfig.json** 文件 可以通过 **tsc --init** 初始化配置

# 在目录文件下初始化 tsconfig.json 配置文件
tsc --init
npx tsc --init

# 查看其它帮助
tsc --help || tsc -h

# 监听文件修改实时编译, 在监视模式下运行编译器。会监视输出文件，在它们改变时重新编译
tsc --watch || tsc -w

参考 :How can I generate a tsconfig.json file?
构建第一个TS 文件以及添加 类型注释

function greeter(person) {
    return 'Hello' + person;
}

let user = 'Jane User';
document.body.textContent = greeter(user);

// 对参数添加类型注释
function greeter(person: string) {
    return 'Hello' + person;
}

编译运行代码
虽然以上第一段代码中显示为 JS, 仍旧可以使用 TS 编译器编译为何原本JS代码一样的代码, 第二段代码就已经添加了参数类型注释, 当在调用时, 传递的参数不是 string 类型时, 即报错

tsc greeter.ts

定义接口: 目前没有找到更合理更合适的解释, 理解为当单个参数使用参数注释定义时是可以的, 但假设涉及了比较复杂的参数或单个对象内无法自定义指定时 或者 多个参数时, 使用注释方法就不靠谱了, 这才有了接口就是按照指定的格式及类型定义的”模板”

interface Person {
    firstName: string;
  lastName: string;
}

// 此处定义了 Person 接口, 指定了 必须要包含有 firstName(string 类型) 以及 lastName(string 类型)
function greeter(person: Person) {
    return 'Hello' + person.firstName + ' '  + person.lastName;
}

let user = { firstName: 'Jane', lastName: 'User' };

document.body.textContent = greeter(user);

手册

声明

在没有提供函数实现的情况下, 有两种声明函数类型的方式

// 返回类型注解
interface Foo {
    foo: string;
}

function foo(sample: Foo): Foo {
    return sample
}

function foo(sample: Foo) {
    return sample; // 可以不手动添加注解, 编译器推断
}

// 可选参数, 通常情况下个人喜欢超过三个及以上参数时使用对象来接收, 不需要考虑到顺序问题
interface Foo {
    width: number;
  height?: number;
}

function foo(width: number, height?: number) {
    return width + height;
}

声明

全局声明文件

无论是你使用TS来书写你的项目或者发布NPM包时, 通常都会在某一个地方声明类型接口等之类的文件, 当一个项目足够大或者复杂时会出现比较多的重复的声明, 你可以在全局管理一些比较通用的模块声明, 通过使用 declare 关键词, 告诉 Typescript 来表述一个其他地方已经存在了声明, 在实际项目里, 可以使用 globals.d.ts 或者 vendor.d.ts 文件, 如果一个文件扩展名是 .d.ts 这意味着每个顶级的声明都必须以 declare 关键字作为前缀, 例如 node.d.ts
例如: 

declare var foo: any // 声明一个全局的 foo 类型的定义
declare type $FIXME = any;

类型系统

第三方代码

例如将JS项目改成TS项目, 某些第三方文件或者模块是没有指定类型的, 此时你需要使用声明文件将其导入可以检测类型, 更多的参考(DefinitelyTyped)

非JS资源

可以参考 ant-design 中的自定义声明文件

declare module '*.css';

declare module '*.html';

使用

通过配置 tsconfig.json 中的 compilerOptions.types引入有意义的类型

{
    "compilerOptions": {
      "types": [
        "jquery",
    ],
  },
}

FAQ