typeScript从入门到进阶-基础篇(一)

Javascript 已经很好了，我真的需要学习 Typescript 么？严格意义上讲，你不需要通过学习 Typescript 去变成一个好的程序员，大部分人没有使用 Typescript 依然很优秀。当然，使用 Typescript 编程也有一些显而易见的好处：

• 因为 Typescript 类型是固定的，用 Typescript 写的代码更加容易把控，也更易于调试。
• 得益于模块，命名空间和更好的面向对象编程的支持，使得 Typescript 更容易去构建大型和复杂的 apps。
• 因为 Typescript 有编译成 Javascript 的过程，使其可以在项目上线运行和发生错误之前可以捕获到不同类型的错误。
• Angular2 是用 Typescript 写的，它也推荐开发人员使用 Typescript 去开发项目

最后也很主要的一点，对于大部分人去学 Typescript。 Angular 2 是现在一个很火的编程语言，尽管开发者可以继续使用 Javascript 去开发，但是很多教程和例子都是用 Typescript 写的。随着 Angular 2 社区的扩展，自然越来越多的人会选择 Typescript.（现在react,vue,babel都支持了 Typescript）

强类型与弱类型

在强类型语言中，当一个对象从调用函数传递到被调用函数时，其类型必须与被调用函数中声明的类型兼容

    A(){
        B(x)
    }
    B(y){
        // y可以赋值x，程序运行良好
    }

• 强类型语言定义：不允许改变变量的数据类型，除非进行强制类型转换
• 弱类型语言定义：变量可以被赋予不同的数据类型
• 静态类型语言：在编译阶段确定所有变量的类型
• 动态类型语言：在执行阶段确定所有变量的类型

静态类型语言	动态类型语言
对类型极度严格	对类型非常宽松
立即发现错误	bug可能隐藏很长时间
运行时性能好	运行时性能好
子文档化	可读性差

第一个ts程序

ts在线编译工具 www.typescriptlang.org/play/index.html

- npm init -y
- npm i typescript -g
- tsc --init  // 创建tsconfig.json
- npm i webpack webpack-cli webpack-dev-server -D
- npm i ts-loader typescript -D
- npm i html-webpack-plugin -D
- npm i clean-webpack-plugin  webpack-merge -D

let hello: string = 'hello ts'

build > webpack.base.config.js

const HtmlWebpackPlugin = require('html-webapck-plugin')
module.exports = {
    entry: './src/index.ts',
    output:{
        filename: 'app.js'
    },
    resolve:{
        extensions: ['.js','.jsx','.tsx']
    },
    module:{
        rules:[
            {
                test: /\.tsx?$/i,
                use:[
                    {
                        loader:'ts-loader'
                    }
                ],
                exclude: /node_modules/
            }
        ]
    },
    plugins:[
        new HtmlWebpackPlugin({
            template:'/src/tpl/index.html'
        })
    ]
}

build > webpack.dev.config.js

module.exports = {
    devtool: 'cheap-module-eval-source-map'
    // cheap: 忽略列信息
    // module: 定位到ts源码
    // eval-source-map: 会以dataUrl的形式将sourceMap打包到文件中，重编译速度很快，不必担心性能问题
}

build > webapck.config.js

const merge = require('webapack-merge')
const baseConfig = require('./webapack.base.config.js')
const devConfig = require('./webapack.dev.config.js')
const proConfig = require('./webapack.pro.config.js')

let config = process.NODE_ENV === 'development' ?
devConfig: proConfig

moduel.exports = merge(baseConfig,config)

package.json

{
    "name": "ts_pro",
    "version": "1.0.0",
    "main": "./src/index.ts",
    "script": {
        "start": "webapck-dev-server --mode=development --config ./build/webpack.config.js",
        "build": "webpack --mode=production --config ./build/webpack.config.js"
    }
}

转载于:https://my.oschina.net/u/3150996/blog/3080247