| Warren's

[toc]

引用 npm 包，先装对应types/*，再装包

// 1. 没有第三方typescript包时： 在根目录下创建 types 文件夹，创建 模块名+d.ts 文件，文件内容为
declare module 'co-busboy' {
  const content: any
  export = content
}

// 2. 在 tsconfig.json 的 include 中加上 types 文件夹

@types/node 可以引入node相关所有包
安装 yarn add typescript -D
TS 文件如果使用export导出，文件中的变量会被当做内部变量(闭包)，不会认为与其它文件下的变量重名
export/import Sometype 表示Sometype只是一个类型, 在编译的时候把这段代码删除掉

数据类型

string number boolean null undefined any

不设置就默认初始赋值的类型

never 返回 never 的函数，表示函数无法执行到最后，比如中途有抛出错误，或出现死循环

结构制定类型

const { xxx: { } }: any  = data

({a, b, c}: {a: boolean, b: string, c:string}) => {}

interface Keys {
    [key: string]: any
}

泛型

function test<T>(arg: T):T{ // 传入什么类型返回什么类型，T可以改为任意字母就是泛指代表
    return arg
}

混合类型

const a:(string|number) =  ''
{ name?:string  }

数组

let list: number[] = [1, 2, 3];
let list: Array<number> = [1, 2, 3]; // 使用数组泛型

元组

固定长度不能用push 不能改变小标长度

const arr:[number, string,boolean] = [1, '2', true]
const arr:Array<number> = [1,2,3]
const arr:number[] = [1,2,3]

函数

默认返回 void

定义了返回类型必须加 return

fn(p1?:string, p2?: number)  
const fn = (p: (string | number)[]) => {}

枚举

前端一般用于定义错误码

enum ErrorCode {
    Success= 200
}
ErrorCode.Success

接口 Interface

interface User {
    name: string,
    [props:string]:any,
    readonly age: number
}

interface Func {
    (name:string): string
}

interface A {}
interface B {}

type person = A | B  // 既可以是 A 也可以是 B

类型断言

类似类型转换

let strLength: number = (<string>someValue).length;
let strLength: number = (someValue as string).length; // 使用JSX时，只有 as语法断言是被允许的

联合类型

https://www.tslang.cn/docs/handbook/advanced-types.html 表示一个值可以是几种类型之一。用竖线（|）分隔每个类型

定义变量

const a:(string|number)[] = [1,'ko']

// 对象
interface obj {
	[propName: string]: any; // 任意属性
}
const o: obj = {}

Function

function fn(v: number): boolean {}

类

静态属性，存在于类本身上面而不是类的实例上

const obj:object = {}  // 泛对象

class Obj { // 有良好的类型提示
    name: string
    age: number
    other?:string
    constructor(name:string) {
        this.name = name
    }
}

配置文件

tsconfig.json 是项目的主要 TypeScript 配置文件，它引用了其他两个配置文件, tsconfig.node.json 和 tsconfig.app.json 分别是用于 Node.js(比如启动本地node服务，会执行的文件) 和应用程序的 TypeScript 配置文件。它们的作用是为不同的构建目标提供不同的 TypeScript 编译选项。

npx tsc --init 初始化一个配置文件如果先安装了 typescript 直接运行 tsc --init
tsc --watch 监控ts文件变化实时生成 js 文件

运行 tsc 时会默认在根目录下找 tsconfig.json 可以用 --project -p 指定包含配置文件的目录

tsconfig.json 文件修改后不用重启服务

// 常规必要配置
{
    "include": [  // 使用"include"引入的文件可以使用"exclude"属性过滤
        "src/**/*" // 包含文件夹
        "crossProjectModule/**/*", // 如果有不在src的目录需要单独添加 
    ],
    "exclude": [ // 默认情况下会排除node_modules，bower_components，jspm_packages和<outDir>目录
        "node_modules",
    ],
    "compilerOptions": {  // 编译选项 https://www.typescriptlang.org/tsconfig  https://www.tslang.cn/docs/handbook/compiler-options.html
        "target": "ESNext",  // 将ts代码编译为哪个版本的js  1.如果是node执行，用最新的 ESNext 即可 值代表你的 TypeScript 所支持的最高版本 es5 es6
        "module": "es6",  // 用那种模块系统；target 为 ES5或ES3 默认 CommonJs 模块标准;  node 运行 commonjs； 浏览器用  es6 或 es2015
        "removeComments": true,  // 删除注释
        "paths": {                           
            "@cross/*": [ // 自定义别名
                "./crossProjectModule/*"
            ]
        },
    }
}

其它配置项说明

/* 具体配置 参考 https://juejin.cn/post/6844904109976322061#heading-10 */
{
    "include": [  // 使用"include"引入的文件可以使用"exclude"属性过滤
        "src/**/*" // 包含文件夹
    ],
    "exclude": [ // 默认情况下会排除node_modules，bower_components，jspm_packages和<outDir>目录
        "node_modules",
        "**/*.spec.ts"
    ],
    "files": [ // 指定文件  通过 "files"属性明确指定的文件却总是会被包含在内，不管"exclude"如何设置
        "xx.ts"
    ],
    "compilerOptions": {   // 编译选项 https://www.typescriptlang.org/tsconfig  https://www.tslang.cn/docs/handbook/compiler-options.html
        "paths": {                             // 路径映射，相对于 baseUrl
            "jquery": ["node_modules/jquery/dist/jquery.slim.min.js"]
        },
        "rootDir": "./",           // ts源文件目录 Specify what module code is generated. */
        "outDir": "out|./out", // 指定输出目录 会在根目录下创建 /out 文件夹
        "experimentalDecorators": true,     // 使用装饰器，vscode也要打开ts插件的配置
        "incremental": true,                // 增量编译
        "tsBuildInfoFile": "./buildFile",   // 增量编译文件的存储位置
        "diagnostics": true,                // 打印编译信息
        "outFile": "./app.js",     // 将多个相互依赖的文件生成一个文件，可以用在 AMD 模块中
        "lib": [],                 // TS 需要引用的库，即声明文件，es5 默认 "dom", "es5", "scripthost"
        "allowJs": true,           // 允许编译 JS 文件（js、jsx）
        "checkJs": true,           // 允许在JS 文件中报错，通常与 allowJS 一起使用
        "declaration": true,         // 生成声明文件
        "declarationDir": "./d",     // 声明文件的路径
        "emitDeclarationOnly": true, // 只生成声明文件
        "sourceMap": true,           // 生成目标文件的 sourceMap / 生成相应的 .map文件
        "inlineSourceMap": true,     // 生成目标文件的 inline sourceMap
        "declarationMap": true,      // 生成声明文件的 sourceMap
        "typeRoots": [],             // 声明文件目录，默认 node_modules/@types
        "types": [],                 // 声明文件包
        "preserveConstEnums": true,  // 保留 const 和 enum 声明
        "noEmit": true,            // 不输出文件
        "noEmitOnError": true,     // 发生错误时不输出文件
        "noEmitHelpers": true,     // 不生成 helper 函数，需额外安装 ts-helpers
        "importHelpers": true,     // 通过 tslib 引入 helper 函数，文件必须是模块
        "downlevelIteration": true,    // 降级遍历器的实现（es3/5）
        "strict": true,                        // 开启所有严格的类型检查
        "alwaysStrict": false,                 // 在代码中注入 "use strict";
        "noImplicitAny": false,                // 不允许隐式的 any 类型
        "strictNullChecks": false,             // 不允许把 null、undefined 赋值给其他类型变量
        "strictFunctionTypes": false,          // 不允许函数参数双向协变
        "strictPropertyInitialization": false, // 类的实例属性必须初始化
        "strictBindCallApply": false,          // 严格的 bind/call/apply 检查
        "noImplicitThis": false,               // 不允许 this 有隐式的 any 类型
        "noUnusedLocals": true,                // 检查只声明，未使用的局部变量
        "noUnusedParameters": true,            // 检查未使用的函数参数
        "noFallthroughCasesInSwitch": true,    // 防止 switch 语句贯穿
        "noImplicitReturns": true,             // 每个分支都要有返回值
        "esModuleInterop": true,               // 允许 export = 导出，由import from 导入
        "allowUmdGlobalAccess": true,          // 允许在模块中访问 UMD 全局变量
        "moduleResolution": "node",            // 模块解析策略
        "baseUrl": "./",                       // 解析非相对模块的基地址
        "rootDirs": ["src", "util"],           // 将多个目录放在一个虚拟目录下，用于运行时
        "listEmittedFiles": true,        // 打印输出的文件
        "listFiles": true,               // 打印编译的文件（包括引用的声明文件）
    }
}

# 数据类型

# 结构制定类型

# 泛型

# 混合类型

# 数组

# 元组

# 函数

# 枚举

# 接口 Interface

# 类型断言

# 联合类型

# 定义变量

# Function

# 类

# 配置文件