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

$ node -v
v16.14.0
# 安装
$ pnpm install typescript
# 查看版本
$ npx tsc --version
Version 4.9.5

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

{
  "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"]
}

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

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

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,
  });
}

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,
  });
}

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

# 执行
$ $ npx tsc
# 查看输出的文件
$ ls ./dist
foo.js   index.js    user.js
# 执行
$ node ./dist/index.js 
Hello World!

export {};

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,
    });
}

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);
})();

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

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

"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' }