TypeScript | 第一章：环境搭建及基础数据类型

关注
发布于: 2020 年 12 月 21 日
TypeScript系列学习笔记
TypeScript | 第二章：类、接口和之间的关系
TypeScript | 第三章：函数、泛型和枚举
TypeScript | 第四章：命名空间和模块  
TypeScript | 第五章：高级类型  
TypeScript | 第六章：理解声明合并，以及编写声明文件
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);
};
至此我们完成typeScript的基础环境搭建。
三、基础数据类型3.1 数字
/*
 * 数字：
 * 1. 和JS一样，TypeScript里的所有数字都是浮点数，类型是number
 * 2. TypeScript支持ECMAScript 2015中引入的二进制和八进制字面量
 */
let num:number = 1;
let hexLiteral: number = 0xf00d;
let binaryLiteral: number = 0b1010;
let octalLiteral: number = 0o744;
3.2 字符串
/*
 * 字符串
 * 1. 和JS一样，可以使用双引号（ "）或单引号（'）表示字符串
 * 2. 可以使用模版字符串，定义多行文本和内嵌表达式
 */
let str:string = '1';
let name: string = `Gene`;
let sentence: string = `Hello, my name is ${ name }.`
3.3  布尔值
/*
 * 布尔值
 * true/false
 */
let flag:boolean = true;
3.4 数组
/*
 * 数组
 */
let arr1:number[] = [1,2,3]
let arr2:Array<number> = [1,2,3]; //泛型接口
let arr3:Array<number|string> = [1,2,3,'4']; //联合类型
3.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)类型
3.6 Any
//any:任意类型，不建议使用
let x;
x = 1;
x = [];
3.7 Void
/*
 * void
 * 1. 某种程度上来说，void类型像是与any类型相反，它表示没有任何类型
 * 2. 一种操作符，让任何表示式返回undefined
 */
let noReturn = ()=>{}
3.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;
3.9 Never
//never:永远不会有返回值
let error = ()=>{
    throw new Error('error');
}
let endless = ()=>{
    while(true){}
}
3.10 Symbol
//Symbol
let s1:Symbol = Symbol();
let s2 = Symbol();
s1===s2//false
3.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
3.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;
四、总结至此我们完成了ts基础数据类型的学习，下一章学习：类、接口和之间的关系