# TS&JS处理

# TypeScript

TypeScript (opens new window) 是微软公司提出来的一个 JavaScript 的超集语言，主要作用是为 JavaScript 增加静态类型检测系统和 ECMAScript 语法的扩展。

# `tsconfig.json`

TypeScript 代码不能直接在浏览器执行，所以需要编译器将 TypeScript 文件转换成可以在浏览器执行的 JavaScript。

NPM 安装编译器方法：

npm i -g typescript

这时候新建一个 ts 文件（TypeScript 文件扩展名是ts）：

// hello.ts
function sayHello(name: string) {
    return 'Hello, ' + name;
}

let webpack = 'Webpack';

console.log(sayHello(webpack));

然后使用 tsc hello.tc，执行编译后hello.ts被编译成了hello.js：

function sayHello(name) {
    return 'Hello, ' + name;
}
var webpack = 'Webpack';
console.log(sayHello(webpack));

为了方便编译器和编辑器识别 TypeScript 项目，TypeScript 约定了tsconfig.json文件来存储项目配置，如果运行 tsc 时不指定输入文件，编译器则会查找项目目录中的这个文件，如果找不到则会依次向父级目录查找。比如这样：

{
    "compilerOptions": {
        "outFile": "dist/main.js",
        "sourceMap": true
    },
    "files": ["src/index.ts", "src/source.ts"]
}

关于tsconfig.json更多配置，可以继续浏览：

# ts-loader

如果要让 Webpack 来识别ts文件，需要配合 TypeScript 的 loader，使用ts-loader可以方便地构建浏览器可以运行的 JS 代码。

安装ts-loader的命令为：npm i ts-loader --save-dev，

然后配置项目目录中的 webpack.config.js:

module.exports = {
    entry: './src/app.ts',
    output: {
        filename: 'app.js',
        path: './dist'
    },
    resolve: {
        extensions: ['', '.webpack.js', '.web.js', '.ts', '.js']
    },
    module: {
        loaders: [{test: /\.ts$/, loader: 'ts-loader'}]
    }
};

为了方便配置 TypeScript 项目，还可以在 Webpack 的项目根目录创建一个tsconfig.json文件。

← 模块化 CSS处理 →

# TS&JS处理

# TypeScript

# tsconfig.json

# ts-loader

# `tsconfig.json`