TypeScript

Concept

https://www.typescriptlang.org/index.html

弥补弱类型语言 JS 的缺陷， 出现类型定义。

可以翻译成ES3标准语言，兼容node和浏览器。

Starts and ends with JavaScript

TypeScript starts from the same syntax and semantics that millions of JavaScript developers know today. Use existing JavaScript code, incorporate popular JavaScript libraries, and call TypeScript code from JavaScript.

TypeScript compiles to clean, simple JavaScript code which runs on any browser, in Node.js, or in any JavaScript engine that supports ECMAScript 3 (or newer).

Strong tools for large apps

Types enable JavaScript developers to use highly-productive development tools and practices like static checking and code refactoring when developing JavaScript applications.

Types are optional, and type inference allows a few type annotations to make a big difference to the static verification of your code. Types let you define interfaces between software components and gain insights into the behavior of existing JavaScript libraries.

State of the art JavaScript

TypeScript offers support for the latest and evolving JavaScript features, including those from ECMAScript 2015 and future proposals, like async functions and decorators, to help build robust components.

These features are available at development time for high-confidence app development, but are compiled into simple JavaScript that targets ECMAScript 3 (or newer) environments.

https://www.typescriptlang.org/docs/handbook/typescript-in-5-minutes.html

Now we can start taking advantage of some of the new tools TypeScript offers. Add a

: string

type annotation to the ‘person’ function argument as shown here:

function greeter(person: string) {
    return "Hello, " + person;
}

let user = "Jane User";

document.body.textContent = greeter(user);
           

Type annotations #

Type annotations in TypeScript are lightweight ways to record the intended contract of the function or variable. In this case, we intend the greeter function to be called with a single string parameter. We can try changing the call greeter to pass an array instead:

function greeter(person: string) {
    return "Hello, " + person;
}

let user = [0, 1, 2];

document.body.textContent = greeter(user);
           

Re-compiling, you’ll now see an error:

error TS2345: Argument of type 'number[]' is not assignable to parameter of type 'string'.
           

支持能力

https://www.typescriptlang.org/docs/handbook/basic-types.html

1. Introduction
2. Boolean
3. Number
4. String
5. Array
6. Tuple
7. Enum
8. Any
9. Void
10. Null and Undefined
11. Never
12. Object
13. Type assertions
14. A note about ‘let’

• Basic Types
• Variable Declarations
• Interfaces
• Classes
• Functions
• Generics
• Enums
• Type Inference
• Type Compatibility
• Advanced Types
• Symbols
• Iterators and Generators
• Modules
• Namespaces
• Namespaces and Modules
• Module Resolution
• Declaration Merging
• JSX
• Decorators
• Mixins
• Triple-Slash Directives
• Type Checking JavaScript Files
• Utility Types

Webpack集成

https://www.typescriptlang.org/docs/handbook/react-&-webpack.html

npm install --save-dev typescript ts-loader source-map-loader           

Add a TypeScript configuration file #

You’ll want to bring your TypeScript files together - both the code you’ll be writing as well as any necessary declaration files.

To do this, you’ll need to create a

tsconfig.json

which contains a list of your input files as well as all your compilation settings. Simply create a new file in your project root named

tsconfig.json

and fill it with the following contents:

{
    "compilerOptions": {
        "outDir": "./dist/",
        "sourceMap": true,
        "noImplicitAny": true,
        "module": "commonjs",
        "target": "es6",
        "jsx": "react"
    }
}
           

You can learn more about

tsconfig.json

files here.

Create a webpack configuration file #

Create a

webpack.config.js

file at the root of the project directory.

module.exports = {
    mode: "production",

    // Enable sourcemaps for debugging webpack's output.
    devtool: "source-map",

    resolve: {
        // Add '.ts' and '.tsx' as resolvable extensions.
        extensions: [".ts", ".tsx"]
    },

    module: {
        rules: [
            {
                test: /.ts(x?)$/,
                exclude: /node_modules/,
                use: [
                    {
                        loader: "ts-loader"
                    }
                ]
            },
            // All output '.js' files will have any sourcemaps re-processed by 'source-map-loader'.
            {
                enforce: "pre",
                test: /.js$/,
                loader: "source-map-loader"
            }
        ]
    },

    // When importing a module whose path matches one of the following, just
    // assume a corresponding global variable exists and use that instead.
    // This is important because it allows us to avoid bundling all of our
    // dependencies, which allows browsers to cache those libraries between builds.
    externals: {
        "react": "React",
        "react-dom": "ReactDOM"
    }
};
           

Playground

https://www.typescriptlang.org/play/index.html