TypeScript基本使用方法

916 阅读4分钟

下面是TypeScript的基本使用方式,

1.TypeScript的全局安装

首先进行全局安装Typescript(也可以局部安装,看个人喜好)。

npm install -g typescript

安装完成后可使用命令行工具tsc,可用来编译单个文件。

tsc helloworld.ts

需要注意的是,使用tsc编译单个文件时不会寻找项目下的tsconfig.json文件,而是使用默认配置,如果需要修改配置必须在在命令行中修改。

tsc helloworld.ts  --allowJs --allowSyntheticDefaultImports

2.tsconfig.json的配置

tsconfig.json有许多配置项,要完全熟悉每一项不是个容易的事,当你在代码中使用了某些需要开启配置项的行为,TypeScript会提醒你去打开它,因此,只需要知道常用的几个就好了,其他的可以遇到问题的时候再去了解他的作用。

// 生成一个tsconfig.json初始文件
tsc --init
{
  "compilerOptions": {
    /* 基本选项 */
    "incremental": true,                   /* 增量编译,第一次编译后会在项目下生成一个tsconfig.tsbuildinfo文件,以后编译可以提高速度*/
    "target": "es5",                       /* 指定编译后生成的ECMAScript版本: 'ES3' (default), 'ES5', 'ES2015', 'ES2016', 'ES2017', 'ES2018', 'ES2019', 'ES2020', or 'ESNEXT'. */
    "module": "commonjs",                  /* 指定编译后生成哪种模块: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', 'es2020', or 'ESNext'. */
    "lib": [],                             /* 指定包含哪些库文件 */
    "allowJs": true,                       /* 允许编译 JS 文件(js、jsx) */
    "checkJs": true,                       /* 允许指出在 JS 文件中的报错信息,通常与 allowJs 一起使用 */
    "jsx": "preserve",                     /* 指定jsx代码用于的开发环境:'preserve'、'react-native' 或 'react'*/
    "declaration": true,                   /* 编译后生成(.d.ts)声明文件 */
    "declarationMap": true,                /* 为每个对应的“.d.ts”文件生成一个源映射。 */
    "sourceMap": true,                     /* 生成相应的“.map”文件。 */
    "outFile": "./ss.js",                  /* 当moudle 为 amd时,编译时会将多个 ts 文件合并打包成一个 js 文件 */
    "outDir": "./dist",                    /* 指定输出目录 */
    "rootDir": "./src",                    /* 指定编译根目录 */
    "composite": true,                     /* 启用项目编译 */
    "tsBuildInfoFile": "./",               /* 指定增量文件存储位置 */
    "removeComments": true,                /* 不在输出文件中产生注释 */
    "noEmit": true,                        /* 编译后不生成文件(只编译不生成) */
    "importHelpers": true,                 /* Import emit helpers from 'tslib'. */
    "downlevelIteration": true,            /* 面向 ES5 和 ES3 时,将 for..of, spread and destructuring  降级 */
    "isolatedModules": true,               /* 将每个文件转换为一个单独的模块(类似于 'ts.transpileModule')。 */

    /* 严格类型检查选项 */
    "strict": true,                        /* 开启所有的严格类型选项,此时下面的选项全部开启 */
    "noImplicitAny": true,                 /* 不允许隐式的 any 类型 */
    "strictNullChecks": true,              /* 严格空检查,不允许把 null、undefined 赋值给其它类型变量 */
    "strictFunctionTypes": true,           /* 启用函数类型的严格检查。 */
    "strictBindCallApply": true,           /* 在函数上启用严格的 'bind'、'call' 和 'apply' 方法。 */
    "strictPropertyInitialization": true,  /* 类的实例属性必须初始化 */
    "noImplicitThis": true,                /* 不允许 this 有隐式的 any 类型 */
    "alwaysStrict": true,                  /* 在代码中注入 "use strict" */

    /* 附加检查 */
    "noUnusedLocals": true,                /* 报告只声明,未使用的局部变量 */
    "noUnusedParameters": true,            /* 报告未使用的函数参数 */
    "noImplicitReturns": true,             /* 函数中每个分支都要有返回值,如 if else 中都要有返回值 */
    "noFallthroughCasesInSwitch": true,    /* 防止 switch 语句贯穿(如果某一个分支没有 break,下面的分支将会依次执行) */

    /* 模块解析选项 */
    "moduleResolution": "node",            /* 指定模块解析策略:'node' (Node.js) 或 'classic'  */
    "baseUrl": "./",                       /* 解析非相对模块名称的基本目录 */
    "paths": {},                           /* 路径映射,相当于别名,相对于 baseUrl. */
    "rootDirs": [],                        /* 将多个编译目录放在一个虚拟目录下,用于运行时 */
    "typeRoots": [],                       /* 声明文件目录,默认 node_modules/@types */
    "types": [],                           /* 指定需要加载的声明文件的包,如果指定了某一个包,就会只加载这个包的声明文件 */
    "allowSyntheticDefaultImports": true,  /* 打开sModuleInterop后,默认会打开 */
    "esModuleInterop": true,               /* 如果一个模块用 export = 导出, 既可以用 import from 导入,也可以用 import = 导入 */
    "preserveSymlinks": true,              /* Do not resolve the real path of symlinks. */
    "allowUmdGlobalAccess": true,          /* Allow accessing UMD globals from modules. */

    /* 源映射选项 */
    "sourceRoot": "",                      /* 指定调试器应该定位 TypeScript 文件而不是源位置的位置 */
    "mapRoot": "",                         /* 指定调试器应该定位map文件而不是生成文件的位置 */
    "inlineSourceMap": true,               /* 指定是否将map文件的内容和js文件编译在同一个js文件中 */
    "inlineSources": true,                 /* 在单个文件中与源映射一起发出源;需要设置“--inlineSourceMap”或“--sourceMap” */

    /* 实验性选项 */
    "experimentalDecorators": true,        /* 指定是否启用实验性的装饰器特性 */
    "emitDecoratorMetadata": true,         /* 用于指定是否为装饰器提供元数据支持 */

    /* 高级选项 */
    "skipLibCheck": true,                     /*跳过声明文件的类型检查 */
    "forceConsistentCasingInFileNames": true  /* 禁止对同一文件的大小写不一致的引用 */
  }
}