TypeScript实践入门和tsconfig.json配置文件

TypeScript相比JavaScript，可以很好的享受类型标注带来的代码提示，可以在编码阶段就解决大部分语法错误，极大的提升代码阅读体验和编码体验

安装TypeScript

$ node -v
v16.14.0

# 安装
$ pnpm install typescript

# 查看版本
$ npx tsc --version
Version 4.9.5

使用tsconfig.json

# 初始化 tsconfig.json 文件
$ npx tsc --init

自动生成的配置文件

tsconfig.json

{
  "compilerOptions": {
    "target": "es2016",
    "module": "commonjs", 
    "esModuleInterop": true, 
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  }
}

修改如下

{
  "compilerOptions": {
    "target": "ES5",
    "module": "ES6", 
    "outDir": "./dist",
    "removeComments": true,
    "esModuleInterop": true, 
    "forceConsistentCasingInFileNames": true,
    "strict": true,
    "skipLibCheck": true
  },
  "include": ["src/**/*.ts"]
}

我们指定了输出目录，并且移除注释

TypeScript使用示例

项目结构

$ tree
.
├── package.json
├── src
│   ├── foo.ts
│   ├── index.ts
│   └── user.ts
└── tsconfig.json

package.json

{
  "type": "module",
  "dependencies": {
    "typescript": "^4.9.5"
  }
}

foo.ts

import { User } from "./user";


/**
 * 类型标注示例：打印字符串
 * @param name
 */
export function echo(name: string) {
  console.log(name);
}


/**
 * 泛型示例：原样返回
 * @param a
 * @returns
 */
export function func<T>(a: T): T {
  return a;
}

/**
 * 打印User对象
 * @param user 
 */
export function echoUser(user: User) {
  console.log({
    id: user.id,
    age: user.age,
    name: user.name,
  });
}

user.ts

export interface User {
  id: number;
  name: string;
  age: number;
}

index.ts

// 注意：
// 此处需要写扩展名，否则执行时会报错
// 如果使用webpack则不需要后缀名
import { echo, func, echoUser } from "./foo.js";

var msg: string = "Hello World!";

(() => {
  // 调用函数
  echo(msg);

  // 调用泛型函数
  func<string>("a");

  // 传入接口参数
  let user = {
    id: 1,
    name: "Tom",
    age: 20,
  };
  echoUser(user);
})();

编译执行

# 执行
$ $ npx tsc

# 查看输出的文件
$ ls ./dist
foo.js   index.js    user.js

# 执行
$ node ./dist/index.js 
Hello World!

输出的文件
user.js

export {};

foo.js

export function echo(name) {
    console.log(name);
}
export function func(a) {
    return a;
}
export function echoUser(user) {
    console.log({
        id: user.id,
        age: user.age,
        name: user.name,
    });
}

index.js

import { echo, func, echoUser } from "./foo.js";
var msg = "Hello World!";
(function () {
    echo(msg);
    func("a");
    var user = {
        id: 1,
        name: "Tom",
        age: 20,
    };
    echoUser(user);
})();

使用webpack

项目结构

$ tree
.
├── package-lock.json
├── package.json
├── pnpm-lock.yaml
├── src
│   ├── foo.ts
│   ├── index.ts
│   └── user.ts
├── tsconfig.json
└── webpack.config.cjs

package.json

{
  "type": "module",
  "dependencies": {
    "ts-loader": "^9.4.2",
    "typescript": "^4.9.5",
    "webpack": "^5.75.0",
    "webpack-cli": "^5.0.1"
  }
}

webpack.config.cjs

"use strict";

const path = require("path");

module.exports = {
  mode: "development",

  entry: "./src/index.ts",

  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, "dist"),
  },

  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: "ts-loader",
        exclude: /node_modules/,
      },
    ],
  },
  resolve: {
    extensions: [".tsx", ".ts", ".js"],
  },
};

# 编译
$ npx webpack

$ node ./dist/bundle.js 
Hello World!
{ id: 1, age: 20, name: 'Tom' }

参考文档

• https://www.typescriptlang.org/zh/tsconfig
• 了不起的 tsconfig.json 指南
• TypeScript 使用指南手册tsconfig.json
• TypeScript速成教程（2小时速成）
• TypeScript 声明文件

这篇好文章是转载于：学新通技术网