摘要

 搭建基础开发环境要准备的环境node.js 14.14以上 ，vs code最新，vs code TS开发插件

写给JS老鸟的TS速成教程

 

搭建基础开发环境

要准备的环境

node.js 14.14以上 ，vs code最新，vs code TS开发插件

开始开发

方式一：TS原生编译开发

补充知识：i是install的简写，-g是global的简写，除此外还有-D = --save-dev 、-S=  --save，现在新版npm cli好像会默认执行—save

 

npm i -g typescript && tsc -init

vs code创建 文件夹/index.ts，

手动编译 tsc+文件名，改一次编译一次

自动编译 Ctrl+shift+B —> 监视模式，文件变动时自动编译 或 如下：

①    tsc 文件名 -w，缺点是只能监视一个文件，除非开多个命令行。

②    创建tsconfig.json，只写一对{}，使其符合json规范，然后直接执行 tsc，即可监视所有ts文件的改动。

 

运行结果：创建index.html， script.import 编译好的index.js，用浏览器打开index.html

开箱即用见 附件【TS_ori】

 

编译控制

tsconfig.json是ts编译器的配置文件，可以对编译进行自定义

不知道可选值可以先给一个错误的值，编译器会列出所有可选的正确配置值

tsconfig.json可以写注释，因为其是ts编译器的配置文件。

{

  // 初步

 

  "include":[ //指定哪些目录的ts文件需要被编译，包含目录

    "./src/**/*" //.当前目录 src文件夹 **任意目录 *任意文件

  ],

  "exclude":[],//指定哪些ts文件不被编译，排除目录，有默认值，比如node_modules

  "extends":"./config/base",//继承某个配置文件，配置复用

  "files":[],//指定ts文件编译，包含文件，与include类似

 

  //进阶

  "compilerOptions":{

    "target":"ES6", //指定ts编译成何种js版本，即目标代码的版本

  //ES2015(ES6)，ES2016...ESNext(最新版ES)

  "module":"ES6",//指定模块化解决方案

   "lib":["dom"],//用来指定项目中使用到的库，一般不写此属性（有默认值），除非代码在nodejs中运行，缺少某些库，如dom。dom库为document

  "outDir":"./dist",//指定编译后文件所在目录。dist即distribution，发行版

  "outFile":"./dis/app.js",//将代码合并为一个文件，若需要把各模块合并为一个文件，只能支持amd and system模块方案

  "allowJs":false, //是否对js进行编译，默认否  - false                             //合并文件一般不用outFile，而是结合打包工具来实现

  "checkJs":false, //是否检查js代码是否符合语法规范

  "removeCommentss":true,//是否移除注释

  "noEmit":false,//执行编译但是不生成编译后的文件，场景是只用到ts编码和类型检查， 不须编译

  "noEmitOnError":false,//发送错误时不生成编后的译文件，默认为false，为的是让js程序员缓慢过渡到ts，建议改为true

 

  "strict":false,//以下三个检查的总开关，建议开发时设为true

  "alwaysStrict":false,//指定编译后的js文件是否使用严格模式。严格模式：语法严格，在browser性能好一些

  "noImplicitAny":false,//Implicit隐式的，开启隐式any的检查，不允许使用

  "noImplicitThis":false,//不允许不明确类型的this

  "strictNullChecks":false,//严格检查空值，若一个变量可能为null，则报错，除非先进行非空判断或box?.addEventListener()

 }

}

 

方式二：自动化开发

补充知识：webpack-cli是通过命令行来使用webpack、ts-loader是webpack加载器，是ts和webpack的桥梁

补充知识：webpack这东西就是会沿着你给定的一个入口文件去遍历所有关联的文件，然后按照一定规则重新整理、压缩成新的一批文件，我们的文件格式是无穷无尽的，webpack不可能认识和处理全部格式，所以我们通过加入各种loader，称加载器，来帮助webpack认识它们。

 

创建空文件夹，执行npm init -y（完成项目初始化）

npm i -D webpack webpack-cli typescript ts-loader

撰写webpack配置。要注意的是，webpack打包必须配合tsconfig.json使用，也就是你的ts代码处要有这个tsconfig.json文件，因为ts程序的具体编译的工作还是由ts本身提供，而ts编译本身要用到tsconfig.json，现在看来，ts-loader真的仅仅是个桥梁。

在package.json中加入打包命令build:webpack，执行npm run build。

撰写配置

使用chrome来查看ts程序的运行结果

补充知识：webpack可以支持自动生成html文件并引入打包好的资源，以演示代码效果，这比自己手动写个html方便多了，生成这个html文件有两种方式，配置式，如传个title参数，其他由webpack自己决定，或者自己拟定一个html模板交给插件。

cnpm i -D html-webpack-plugin

 

自动化构建--所写即所见

cnpm i -D webpack-dev-server ，package.json 加入 "start":"webpack serve --open" ，npm run start

清楚旧的打包文件

打包默认模式是用新文件覆盖旧文件，可能存在残留问题，解决方法：clean-webpack-plugin

 

指定可引入的文件

指定哪些文件可以被其他文件作为模块来引入，这里的引入是代码文件之间的引入，这样我们就可以愉快地使用ESM（ES Module）了

解决目标代码的兼容性问题

补充知识：前端常见兼容性问题有两种，一种是浏览器内核类，一种是规范版本类。前者主要表现为在Chrome能运行的代码，在Firefox却出现问题，在iPhone默认浏览器能运行的代码在华为默认浏览器却有问题；后者主要表现为ES6的代码在浏览器中报错，因为ES6对比ES5变化是较大的，现在ES规范每年一个版本，浏览器跟进也比以前快了，这个问题正变得越来越不是问题。

TS的tsc仅仅能够实现把ts源码编译成不同ES规范版本的js代码而已。

babel/core是babel的核心库、present-env是预置环境，预置不同浏览器环境，帮助代码兼容不同浏览器，babel-loader是结合webpack和babel的桥梁、core-js（Modular standard library ）可以使老版本的浏览器使用到新版本的js的一些技术，如promises等，由于这个库比较庞大，内含很多小库，且是模块化的，我们应按需使用，按需使用我们直接通过webpack来实现

webpack rules的use执行顺序是从下往上执行，我们先用ts-loader把ts转换为js，然后用babel-loader把新版本的js转换为老版本/兼容性高的js

1. cnpm i -D @babel/core @babel/preset-env babel-loader core-js

 

关于兼容性打包后仍报错

补充知识：设置了targets.ie==11后，打包的代码拿到ie11运行依然报错，原因在于webpack打包后的代码用了一个箭头函数实现的自执行函数包裹，作用是创造一个代码作用域，防止全局变量污染等，它实际是webpack自动生成的，与babel无关，babel只能源文件内的箭头函数起作用，实际上，这可能是webpack故意为之，其本身就是不想兼容某些低版本浏览器，解决方法，out加上environment：{arrowFunction:false}，取消箭头函数。

 

TS语言

报错信息，assign：赋值、指派、指定，resolve：解析、决定、解决

默认ts代码有错误，仍然可以编译生成js，在tsconfig中可更改

ts可编译成任意版本js

若赋初值，ts会根据值类型推算变量类型，这会使变量声明加上类型变得多此一举，没错，实际上，类型检测更多是用给函数传参（形参）和返回值的。

 

类型

补充知识：可用字面量代替类型名，如10，以后只能赋值10，有点常量的意思。除此之外，还有联合类型、任意类型等

 

talk is cheap，show me the code

 

export const zex: number = 1;

 

{

    let a: number = 10;

    let b: number = 20;

    console.log(a, b)

 

    //计算变量类型

    let c = true;

 

    //计算函数返回值类型

    function sum(a: number, b: number): string {

        return a + b + "";

    }

    let result = sum(a, b);

}

 

 

const zex:number=1;

{

// 字面量赋值

let a:10;

let a1:number;

let b:10=10;

a=10;

a1=10;

 

// 用 或符号 构成 联合类型

let c:"male"|"female";

c="male";

c="female";

 

let d:string|number;

d=10;

d="hello";

 

// 任意类型 - 关闭类型检测

let e:any;

e=10;

e="female";

e=true;

 

// 隐式any

let f;

f=10;

f="female";

f=true;

 

// 赋值

// 以下不报错，这导致a的类型检测失效

a1=e;

 

// unknown同any差不多，但是可解决以上问题，是一个类型安全的any

let g:unknown;

// a=g;报错，应改为

 

if(typeof g == "number"){

    a1=g;

}

 

//断言：判断的语言，根据实际情况，把某个变量人为（自己）地断定为某种类型，跳过编译

a1 = g as number;

a1 = <number>g;

 

//函数的返回值

 

//返回值为number|string型

function sum(a:number,b:number){

    if(a>b){

        return a+b;

    }else{

        return a+b+"";

    }

}

 

function sum2(a:number,b:number):number|string{

    if(a>b){

        return a+b;

    }else{

        return a+b+"";

    }

}

 

// 空返回

function sum3(a:number,b:number):void{

    return;

}

function sum4(a:number,b:number):void{}

function sum5(a:number,b:number):void{

    return undefined;

}

 

// never：永远不会返回结果

// 没有返回值也是一种返回值，而never是空空

// 在程序报错时，代码立即停止执行，程序结束，函数结束，所以永远不会有值返回，事情不会发生

function err():never{

    throw new Error("err");

}

 

}

 

{

// object其实是无用的，因为ts一且皆对象，并没有起到类型限制的作用

let a:object;

a={};

a=function(){};

//以下有效

let b:{name:string};

b={name:"John"};

// b={name:"John",age:12}结构不一致报错

// ？-可选属性

let c:{name:string,age?:number};

c={name:"John",age:12};

c={name:"John"}

 

// 任意属性：自由添加属性，新属性未知

// 新属性名为字符串，属性值为任意类型，propName命名随意

let d:{name:string,[propName:string]:any}

d={name:"John",str:123}

let d1:{name:string,[propName:string|number]:any}

d1={name:"John",str:123}

d1={name:"John",123:123}

 

// 限制函数，单Function无意义

let e:(a:number,b:number)=>number

 

// 数组

let f:string[];

f=["John"]

let f1:Array<number>;

f1=[123];

 

// 元组：固定长度的数组

let g:[String,String];

// 必须符合给定，不多不少

g=["Hello","Hello"];

 

//考虑数据存储与表示分离，数据库存储应简短、非字符串，此时Object并不满足要求

// 枚举，默认从0开始

enum Gender{

    male=0,

    female=1

};

let h:{name:string,gender:Gender};

h={name:"Jhon",gender:Gender.female};

console.log(h.gender,h.gender==Gender.female)

 

// & - 与，类型组合

let i:number&string //无意义

let i1:{name:string}&{age:number};

i1={name:"John",age:18};

 

// 类型的复用-别名

let j1:number;

let j2:1|2|3|4|5;

let j3:1|2|3|4|5|6;

 

type myType=number;

type myType2=1|2|3|4|5;

let k1:myType;

let k2:myType2;

let k3:myType2|6;

 

k3=3

k3=6

// k3=7 报错

 

}

 

 

// 类

 

class Person {

    // 实例属性，通过实例访问

    readonly name: string = "默认名字";

    age: number = 18;

 

    // 类属性，通过类访问

    static avgAge: number = 18;

    //只读属性

    static readonly baseName: string = "张"

 

    // 类方法

    sayHello(name: string): string {

        return "Hello";

    }

    static sayHi(name: string): string {

        return "Hi";

    }

};

 

const per = new Person();

Person.avgAge = 19;

per.age = 20;

// Person.name="三三"; // 报错

// Person.baseName="李"; // 报错

console.log(Person.avgAge, per.age);

// 构造器与this

class Dog {

    name: string;

    age: number;

    constructor(name: string, age: number) {

        // this表示当前实例

        this.name = name;

        this.age = age;

    }

    bark() {

        // 当前调用方法的对象，如dog1.bark()，this为dog1

        console.log(this, "旺旺旺");

    }

}

 

const dog: Dog = new Dog("旺财", 3);

 

// 继承

{

    class Animal {

        name: string;

        age: number;

        constructor(name: string, age: number) {

            this.name = name;

            this.age = age;

        }

        bark() {

        }

    }

 

    class Dog extends Animal {

        bark() {

            console.log(this.name + this.age + "旺旺旺");

        }

 

        run() {

            console.log("蹦蹦跳跳");

        }

    }

 

    class Cat extends Animal {

        sex: string;

 

        constructor(name: string, age: number, sex: string) {

            // 调用父类构造器

            super(name, age);

            this.sex = sex;

        }

 

        bark() {

            // 引用父类的方法

            super.bark();

        }

    }

 

    const cat = new Cat("小喵", 3, "母");

 

    //抽象类

    //对于某些类，由于本身拿来实例化是不合适的，且我们也不希望被这样做

    //因此我们就把他设为抽象类，只可以继承，不可以实例化

 

    abstract class Food {

        name: string;

        color: string;

 

        //  抽象类须有构造器

        constructor(name: string, color: string) {

            this.name = name;

            this.color = color;

        }

 

        abstract eat(name: string): void;

        abstract cook(name: string): number | string;

    }

 

    /**

     * 在限制对象的类型上，以下两种方式功能一致

     * 接口，定义了类的结构（属性、方法）

     * 此接口非彼接口，它与Java的接口有点不同

     */

 

    type myType = {

        name: string,

        age: number

    };

 

    interface myInterface {

        name: string;

        age: number;

    }

 

    // 接口可以重复定义，实际效果是同名接口的总和

    interface myInterface {

        sex: string;

    }

 

    const man: myInterface = {

        name: "张三",

        age: 18,

        sex: "男"

    }

 

    // 限制类的结构

    interface myInterface2 {

        name: string;

 

        sayHi(): void;

    }

    interface myInterface3 { }

 

    class People implements myInterface2, myInterface3 {

        name: string;

 

        constructor(name: string) {

            this.name = name;

        }

 

        sayHi(): void {

            console.log(this.name);

        }

    }

 

    /**

     * 抽象类和接口

     * 抽象类：

     * 1、可以普通方法，也可以抽象方法

     * 2、通过继承来使用，TS 类的设计为单继承

     *

     * 接口：

     * 1、只有抽象方法

     * 2、通过实现来使用，支持多继承

     */

}

 

// 属性的封装 - 保护类的属性

 

// 属性可被随意修改将导致对象中的数据变得不安全

// 通过类修饰符解决这个问题

 

// 默认为public，属性可被随意修改

{

    class Person {

        name: string;

        public sex: string;

        public age: number;

 

        constructor(name: string, sex: string, age: number) {

            this.name = name;

            this.sex = sex;

            this.age = age;

        }

 

    }

 

    // 最强安全性

    // private修饰的属性，只有两种修改方式：

    // 1、构造器传入

    // 2、调用实例方法修改，这种方法在java中被称为setter

    // 此外，这种方式也给属性的访问带来麻烦，我们同样只能通过方法return该属性来访问，在java中称为getter

    // 这种setter和getter模式在C#中被吸收为语法:

    /**

     * get{

             return _name;

        }

        set{

            _name = value;

        }

     */

    class Person2 {

        private name: string;

        private sex: string;

        private age: number;

        protected height: number;

 

        constructor(name: string, sex: string, age: number, height: number) {

            this.name = name;

            this.sex = sex;

            this.age = age;

            this.height = height;

        }

 

        setName(name: string): void {

            this.name = name;

        }

        getName(): string {

            return this.name;

        }

    }

 

    // 此外，private属性也不可以被子类访问，protected可以

    class Person3 extends Person2 {

        showName(): void {

            // 无法访问name，可以访问height

            // console.log(this.name);

            console.log(this.height);

        }

    }

 

    // 泛型

    // 当一种类型是什么要在实际中才能确定是，我们使用泛型

    // 泛型就是类型的抽象表示（代表）

 

    // 当以下函数的参数与返回值类型一致，但是无法确定是什么具体类型时，用泛型

    function fn(a: number): number {

        return a;

    }

 

    // 能否使用any？不行，一是关掉了类型检查，这将埋下隐患，二是无法体现两者类型一致

 

    function fn2<T>(a: T): T {

        return a;

    }

    function fn3<T, K, I>(a: T, b: K, c: I): T {

        return a;

    }

    function fn4<T, K>(a: T, b: K, c: number): number {

        return c;

    }

 

    // 在调用含泛型函数时，一般会自动推定泛型的类型，我们也可手动指定

    fn2(1);

    fn4(1, "2", 3);

    fn4<number, string>(1, "2", 3);

}

 

【附件】

https://github.com/heytheww/TSLenrning