TypeScript ｜第一章：环境搭建和基础数据类型TypeScript入门到实战系列文章连载中。本文带你了解typ

这是我参与更文挑战的第1天，活动详情查看：更文挑战

TypeScript入门文章连载中....

一、概述

TypeScript 是 JavaScript 的超集，支持ES6标准，扩展了 JavaScript 的语法，因此现有的 JavaScript 代码可与 TypeScript 一起工作无需任何修改，TypeScript 通过类型注解提供编译时的静态类型检查。

新增的功能包括：

类型批注和编译时类型检查
类型擦除
接口
枚举
Mixin
泛型编程
名字空间
元祖
Await

以下功能是从ES5反向移植而来:

类
模块
lambda函数的箭头语法
可选参数及其默认参数

二、基础环境搭建

2.1 基础环境搭建

// npm全局安装TypeScript
npm install typescript -g

// 查看typescript版本
tsc -v 

// 编译ts文件，
tsc app.ts   // app.ts--> TS编译编译器 --> app.js

当然我们日常学习使用TS，还是需要通过webpack的能力来提成学习效率。

2.2 Webpack搭建TS学习环境

2.2.1 项目依赖

创建初始项目

mkdir tsDemo
cd tsDemo
npm init

安装依赖直接上例子的package.json的关键信息，可以直接拷贝devDependencies依赖到自己项目，执行npm install安装相关依赖包。

{
  "scripts": { // 此处构建详细构建脚本，参考下章节
    "start": "webpack-dev-server --mode=development --config ./build/webpack.config.js",
    "build": "webpack --mode=production --config ./build/webpack.config.js"
  },
  "devDependencies": {
    "@babel/core": "^7.5.5",
    "@babel/plugin-proposal-class-properties": "^7.5.5",
    "@babel/plugin-proposal-object-rest-spread": "^7.5.5",
    "@babel/preset-env": "^7.5.5",
    "@babel/preset-react": "^7.0.0",
    "babel-loader": "^8.0.6",
    "clean-webpack-plugin": "^3.0.0",
    "html-webpack-plugin": "^3.2.0",
    "ts-loader": "^8.0.1",
    "typescript": "^3.9.7",
    "webpack": "^4.44.1",
    "webpack-cli": "^3.3.12",
    "webpack-dev-server": "^3.11.0",
    "webpack-merge": "^4.2.1"
  },
}

构建项目结构

tsDemo/
    build/
        webpack.config.js
        webpack.base.config.js
        webpack.dev.config.js
    src/
        index.ts
    package.json
    tsconfig.json  // 安装typescript自动创建的配置文件

2.2.2 编写简易构建脚本

webpack.base.config

const path = require('path')
const HtmlWebpackPlugin = require('html-webpack-plugin')

module.exports = {
    entry: {
        'app': path.resolve(__dirname,'../src/index.ts')
    },
    output: {
        filename: '[name].[chunkhash:8].js'
    },
    resolve: {
        extensions: ['.js','.ts']
    },
    module: {
        rules: [
            {
                test:/\.ts$/,
                use:[{
                    loader:'ts-loader'
                }],
                exclude: /node_modules/
            }
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './src/tpl/index.html'
        })
    ],
    optimization: {
        splitChunks: {
            chunks: 'all'
        }
    }
}

webpack.dev.config

//cheap:source-map会忽略文件列的信息，调试的时候列的信息没有用
//module:定义到ts源码，而不是loader转译后的js源码
//eval-source-map:将soruce-map以data-url的方式打包到文件中，重编译编译速度很快  
module.exports = {
    devtool: 'cheap-module-eval-source-map',
    devServer: {
        port: 8080
    }
}

webpack.prod.config

const { CleanWebpackPlugin } = require('clean-webpack-plugin')
module.exports = {
    plugins: [
        new CleanWebpackPlugin()
    ]
}

webpack.config

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

module.exports = (env, argv) => {
    let config = argv.mode === 'development' ? devConfig : proConfig;
    return merge(baseConfig, config);
};

基础数据类型

1. number

/*
 * 数字：
 * 1. 和JS一样，TypeScript里的所有数字都是浮点数，类型是number
 * 2. TypeScript支持ECMAScript 2015中引入的二进制和八进制字面量
 */
let num:number = 1;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;

2. string

/*
 * 字符串
 * 1. 和JS一样，可以使用双引号（ "）或单引号（'）表示字符串
 * 2. 可以使用模版字符串，定义多行文本和内嵌表达式
 */
let str:string = '1';
let name: string = `Gene`;
let sentence: string = `Hello, my name is ${ name }.`

3. boolean

/*
 * 布尔值
 * true/false
 */
let flag:boolean = true;

4. 数组

/*
 * 数组
 */
let arr1:number[] = [1,2,3]
let arr2:Array<number> = [1,2,3]; //泛型接口
let arr3:Array<number|string> = [1,2,3,'4']; //联合类型

5. 元祖

/*
 * 元祖 Tuple
 * 1. 表示一个已知元素数量和类型的数组，各元素的类型不必相同,限定数组的类型和个数
 * 2. 访问一个已知索引的元素，会得到正确的类型
 * 3. 访问一个越界的元素，会使用联合类型代替
 */
let tuple:[number,string]
tuple = [1,'a'] // 正确
tuple = ['a',1] // Error-> Initialize it incorrectly
// 2. 访问一个已知索引的元素，会得到正确的类型
tuple[0].substr(1)  // Error，'number' does not have 'substr'
tuple[1].substr(1)  // 正确
// 3. 访问一个越界的元素，会使用联合类型代替
tuple[3] = 'b'  // 正确，字符串可以赋值给(string| number)类型
tuple[4] = true // 错误，boolean不是(string|number)类型

6. Any

//any:任意类型，不建议使用
let x;
x = 1;
x = [];

7. Void

/*
 * void
 * 1. 某种程度上来说，void类型像是与any类型相反，它表示没有任何类型
 * 2. 一种操作符，让任何表示式返回undefined
 */
let noReturn = ()=>{}

8. null 和 undefined

/*
 * undefined,null
 * 1. undefined非保留字，可以自定义一个undefined去覆盖原本的
 */
let un:undefined = undefined; //只能赋值本身，不能赋其他值
let nu:null = null;
//undefined,null是任何类型的字类型，可以在tsconfig.json将strictNullChecks设置为false，
//则可以将null/undefined赋值给其他类型，否则不行
num = un;

9. Never

//never:永远不会有返回值
let error = ()=>{
    throw new Error('error');
}
let endless = ()=>{
    while(true){}
}

10. Symbol

//Symbol
let s1:Symbol = Symbol();
let s2 = Symbol();
s1===s2//false

11. Object

//对象
let obj:{x:number,y:number} = {x:1,y:2};

declare function create(o: object | null): void;
create({ prop: 0 }); // OK
create(null); // OK
create(42); // Error

12. 类型断言

通过类型断言这种方式可以告诉编译器，“相信我，我知道自己在干什么”。类型断言好比其它语言里的类型转换，但是不进行特殊的数据检查和解构。它没有运行时的影响，只是在编译阶段起作用。 TypeScript会假设你，程序员，已经进行了必须的检查。

// 方式一：
let someValue: any = "this is a string";
let strLength: number = (<string>someValue).length;
// 方式二： JSX 语法里，只有as是被允许的
let someValue: any = "this is a string";
let strLength: number = (someValue as string).length;

三. 总结

至此便完成了基础类型的入门啦。

TypeScript ｜ 第一章：环境搭建和基础数据类型