5-3 TypeScript 的打包配置

// index.ts
// There are quite a few ways to declare a function in
// JavaScript. Let's look at a function which adds two
// numbers together:

// Creates a function in global scope called addOldSchool
function addOldSchool(x, y) {
    return x + y;
}

// You can move the name of the function to a variable
// name also
const anonymousOldSchoolFunction = function(x, y) {
    return x + y;
};

// You can also use fat-arrow shorthand for a function
const addFunction = (x, y) => {
    return x + y;
};

// We're going to focus on the last one, but everything
// applies to all three formats.

// TypeScript provides additional syntax which adds to a
// function definition and offers hints on what types
// are expected by this function.
//
// Up next is the most open version of the add function, it
// says that add takes two inputs of any type: this could
// be strings, numbers or objects which you've made.

const add1 = (x: any, y: any) => {
    return x + y;
};
add1("Hello", 23);

// This is legitimate JavaScript (strings can be added
// like this for example) but isn't optimal for our function
// which we know is for numbers, so we'll convert the x and
// y to only be numbers.

const add2 = (x: number, y: number) => {
    return x + y;
};
add2(16, 23);
add2("Hello", 23);

// Great. We get an error when anything other than a number
// is passed in. If you hover over the word add2 above,
// you'll see that TypeScript describes it as:
//
//   const add2: (x: number, y: number) => number
//
// Where it has inferred that when the two inputs are
// numbers the only possible return type is a number.
// This is great, you don't have to write extra syntax.
// Let's look at what it takes to do that:

const add3 = (x: number, y: number): string => {
    return x + y;
};

// This function fails because we told TypeScript that it
// should expect a string to be returned but the function
// didn't live up to that promise.

const add4 = (x: number, y: number): number => {
    return x + y;
};

// This is a very explicit version of add2 - there are
// cases when you want to use the explicit return type
// syntax to give yourself a space to work within before
// you get started. A bit like how test-driven development
// recommends starting with a failing test, but in this case
// it's with a failing shape of a function instead.

// This example is only a primer, you can learn a lot more
// about how functions work in TypeScript in the handbook and
// inside the Functional JavaScript section of the examples:
//
// https://www.typescriptlang.org/docs/handbook/functions.html
// example:function-chaining

// And to continue our tour of JavaScript essentials,
// we'll look at how code flow affects the TypeScript types:
// example:code-flow

npm i ts-loader typescript -D

// webpack.config.js
const path = require('path');

module.exports = {
  entry: './src/index.ts',
  output: {
    filename: "bundle.js",
    path: path.resolve(__dirname, 'dist')
  },
  module: {
    rules: [
      {
        test: /\.tsx?$/,
        use: 'ts-loader',
        exclude: /node_modules/
      }
    ]
  }
};

"build": "webpack"

npm run build

{
  "compilerOptions": {
    "module": "CommonJS",
    "target": "ES5",
    "allowJs": true
  }
}

// index.ts
const add4 = (x: number, y: number): number => {
    return x + y;
};

npm i lodash -S

// index.ts
import _ from 'lodash';

const join1 = (x: string, y: string): string => {
    return _.join([x, y], '-');
};

const join2 = (x: string, y: string): string => {
    return _.join(x, y, '  ');
};

cnpm i @types/lodash -D