typescript难学吗？前端有必要学？该怎么学typescript

| 对比项目 | typescript | javascript | 注意 | 
| --------| --- | --- | --- | 
| 基本类型 |  boolean number string array tuple enum any void null undefined never object | string number boolean null undefined symbol | typescript 中 object 表示的是不是 javascript 基本类型的类型| 
| 变量声明 | let const var| let const var | 基本一致 | 
| 接口 | interface | 无 |  typescript 的核心是类型检查，因此接口充当了命名这些类型的角色 | 
| 类 | class abstract class  readonly … | class 无 abstract class | 基本一致，但不同的可能发生在未来，typescript 使用 private 来定义私有，而 javascript 未来极有可能将 #.xx 来定义私有写入标准。typescript  支持抽象类，只读等等。| 
| 函数 | n | n | 基本一致，参数赋默认值，剩余参数等等，唯一不同的是 typescript 支持?可选参数 | 
| 泛型 | generics | 无 | 泛型是一个特别灵活的可重用指定不同类型来控制具体类型的类型，typescript 支持 | 
| 枚举 | enums | 无 | typescript 支持的枚举不仅可以默认从 0 开始，也可以赋值具体的字符串，它的操作空间非常大 | 
| 类型推断 | 支持 | 无 |  let x = 3; typescript 可以通过 3 来推断 x 的类型是 number | 
| 高阶类型 | & typeof  instanceof … | 无 | typescript 独有 | 
| symbols | n | n | symbol 一样 | 
| 迭代器 | n | n | 如果实现了 symbol.iterator ，那么就被视为可迭代的，术语上和 javascript 定义的一样 | 
| generators | n | n | 一样 |
| 模块系统 | n | export import | 事实上 typescript 支持多种多样的模块系统，既有 esmodule 也有 commonjs 规范，甚至还有 amd umd 等 |
| 其他 | n | n | 由于 typescript 是 javascript 的超集，因此 es2016 之后以及 esnext 定义的  api 都可以直接在 typescript 中使用 并不需要语言支持，至于其他一些比如 jsx mixins 等等，由于这些不属于 javascript 标准因此这里不再复述 。|

$ npm install -g typescript
$ tsc --version

let helloworld = "";

console.log(helloworld);
$ tsc helloworld.ts

let helloworld = "";

helloworld = 1;

$ tsc helloworld.ts
helloworld.ts:5:1 - error ts2322: type '1' is not assignable to type 'string'.

5 helloworld = 1;

found 1 error.

{
  "compileroptions": {
    /* basic options */
    "target": "es5",                          /* specify ecmascript target version: 'es3' (default), 'es5', 'es2015', 'es2016', 'es2017','es2018' or 'esnext'. */
    "module": "commonjs",                     /* specify module code generation: 'none', 'commonjs', 'amd', 'system', 'umd', 'es2015', or 'esnext'. */
    // "lib": [],                             /* specify library files to be included in the compilation. */
    // "allowjs": true,                       /* allow javascript files to be compiled. */
    // "checkjs": true,                       /* report errors in .js files. */
    // "jsx": "preserve",                     /* specify jsx code generation: 'preserve', 'react-native', or 'react'. */
    // "declaration": true,                   /* generates corresponding '.d.ts' file. */
    // "declarationmap": true,                /* generates a sourcemap for each corresponding '.d.ts' file. */
    // "sourcemap": true,                     /* generates corresponding '.map' file. */
    // "outfile": "./",                       /* concatenate and emit output to single file. */
    // "outdir": "./",                        /* redirect output structure to the directory. */
    // "rootdir": "./",                       /* specify the root directory of input files. use to control the output directory structure with --outdir. */
    // "composite": true,                     /* enable project compilation */
    // "removecomments": true,                /* do not emit comments to output. */
    // "noemit": true,                        /* do not emit outputs. */
    // "importhelpers": true,                 /* import emit helpers from 'tslib'. */
    // "downleveliteration": true,            /* provide full support for iterables in 'for-of', spread, and destructuring when targeting 'es5' or 'es3'. */
    // "isolatedmodules": true,               /* transpile each file as a separate module (similar to 'ts.transpilemodule'). */

    /* strict type-checking options */
    "strict": true,                           /* enable all strict type-checking options. */
    // "noimplicitany": true,                 /* raise error on expressions and declarations with an implied 'any' type. */
    // "strictnullchecks": true,              /* enable strict null checks. */
    // "strictfunctiontypes": true,           /* enable strict checking of function types. */
    // "strictbindcallapply": true,           /* enable strict 'bind', 'call', and 'apply' methods on functions. */
    // "strictpropertyinitialization": true,  /* enable strict checking of property initialization in classes. */
    // "noimplicitthis": true,                /* raise error on 'this' expressions with an implied 'any' type. */
    // "alwaysstrict": true,                  /* parse in strict mode and emit "use strict" for each source file. */

    /* additional checks */
    // "nounusedlocals": true,                /* report errors on unused locals. */
    // "nounusedparameters": true,            /* report errors on unused parameters. */
    // "noimplicitreturns": true,             /* report error when not all code paths in function return a value. */
    // "nofallthroughcasesinswitch": true,    /* report errors for fallthrough cases in switch statement. */

    /* module resolution options */
    // "moduleresolution": "node",            /* specify module resolution strategy: 'node' (node.js) or 'classic' (typescript pre-1.6). */
    // "baseurl": "./",                       /* base directory to resolve non-absolute module names. */
    // "paths": {},                           /* a series of entries which re-map imports to lookup locations relative to the 'baseurl'. */
    // "rootdirs": [],                        /* list of root folders whose combined content represents the structure of the project at runtime. */
    // "typeroots": [],                       /* list of folders to include type definitions from. */
    // "types": [],                           /* type declaration files to be included in compilation. */
    // "allowsyntheticdefaultimports": true,  /* allow default imports from modules with no default export. this does not affect code emit, just typechecking. */
    "esmoduleinterop": true                   /* enables emit interoperability between commonjs and es modules via creation of namespace objects for all imports. implies 'allowsyntheticdefaultimports'. */
    // "preservesymlinks": true,              /* do not resolve the real path of symlinks. */

    /* source map options */
    // "sourceroot": "",                      /* specify the location where debugger should locate typescript files instead of source locations. */
    // "maproot": "",                         /* specify the location where debugger should locate map files instead of generated locations. */
    // "inlinesourcemap": true,               /* emit a single file with source maps instead of having a separate file. */
    // "inlinesources": true,                 /* emit the source alongside the sourcemaps within a single file; requires '--inlinesourcemap' or '--sourcemap' to be set. */

    /* experimental options */
    // "experimentaldecorators": true,        /* enables experimental support for es7 decorators. */
    // "emitdecoratormetadata": true,         /* enables experimental support for emitting type metadata for decorators. */
  }
}

$ yarn add typescript awesome-typescript-loader source-map-loader --dev

var fs = require('fs')
var path = require('path')
var webpack = require('webpack')
const { checkerplugin } = require('awesome-typescript-loader');
var root = path.resolve(__dirname)

module.exports = {
  entry: './src/index.tsx',
  devtool: 'inline-source-map',
  output: {
    path: root + '/dist',
    filename: '[name].bundle.js',
    sourcemapfilename: '[name].bundle.map.js',
    publicpath: '//localhost:8889/dist/',
  },
  devserver: {
    inline: true,
    quiet: true,
    contentbase: "./",
    port: 8889
  },
  module: {
    rules: [
      { test: /\.ts[x]?$/, loader: "awesome-typescript-loader" },
      { enforce: "pre", test: /\.ts[x]$/, loader: "source-map-loader" },
    ]
  },
  resolve: {
    extensions: [".ts", ".tsx"],
    alias: {
      '@': path.resolve(root,'src')
    }
  },
  plugins: [
    new checkerplugin(),
  ]
}