zoukankan      html  css  js  c++  java
  • 安装 TypeScript

    TypeScript 概述

    编译器

    编写的代码(文本) 由 一个特殊的程序(编译器)解析,转换成抽象句法树(abstract syntax tree, AST).

    AST 是去掉了空白、注释和缩进用的制表符或空格之后的数据结构。

    编译器把 AST 转换成一种字节码(bytecode) 的低(底?)层表示。

    字节码再传给运行时程序计算,最终得到结果。

    • 综上
    1. 把程序解析成AST
    2. 把AST编译成字节码
    3. 运行时计算字节码

    TS 的特殊之处在于,它不直接编译成字节码,而是编译成JS代码

    • TS
    1. TS 源码 => TS AST
    2. 类型检查器检查AST
    3. TS AST => JS 源码
    • JS
    1. JS 源码 => JS AST
    2. AST => 字节码
    3. 运行时计算字节码

    在这个过程中,第1-2 步骤中使用程序的类型,第三步不使用。就是说 TS TS 编译成 JS 时,不会考虑类型。

    这意味着,程序中的类型对程序生成的输出没有任何影响,类型只在类型检查这一步使用。

    类型系统

    • 一般的有两种类型系统
    1. 通过显示句法告诉编译器所有值的类型(注解)
    2. 自动推导类型
    • TS 身兼两种类型系统
    // 建议
    一般来说,最好让TS 推导类型,少数情况下才显式注解类型。(Why?)
    

    安装等

    初始化npm 项目

    npm init --yes
    

    安装 TSC、TSLint 和 NodeJS 的类型声明

    npm install --save-dev typescript tslint @types/node
    

    初始化 tsconfig.json tslint.json

    npx tsc/tslint --init
    

    初始化 手动

    // 新建 tsconfig.json 
    {
        "compilerOptions": {
            "lib": ["ES2015"],
            "module": "commonjs",
    		"outDir": "dist",                              /* Redirect output structure to the directory. */
            "sourceMap": true,
            "strict": true,                                 /* Enable all strict type-checking options. */
            "target": "es5", 
        },
        "include": [
        "src"
      ]
    }
    // tslint.json 
    {
        "defaultSeverity": "error",
        "extends": [
            "tslint:recommended"
        ],
        "jsRules": {},
        "rules": {
            "semicolon": false,
            "trailing-comma": false
        },
        "rulesDirectory": []
    }
    

    运行第一个ts 代码

    mkdir src
    touch src/index.ts
    在文件中写 conole.log('hello TS')
    

    npx tsc 编译成 JS 代码

    node ./dist/index.js 运行js 代码
    

    # 安装 ts-node , 编译和运行一步到位

    npm i --save-dev ts-node
    

    快速 创建 TS 项目 脚手架工具

    npx typescript-node-starter [projectname]
    
  • 相关阅读:
    docker中安装ssh服务
    JStorm第一个程序WordCount详解
    centos6.7 安装Docker
    mysql 自连接查询数据
    display属性
    如何书写高效的css样式
    link和@import的区别
    div+css命名规则
    MATLAB的一些小技巧
    高等工程数学 线性规划部分 作业
  • 原文地址:https://www.cnblogs.com/duoban/p/14719933.html
Copyright © 2011-2022 走看看