扁平化手机网站模板提供网站设计服务商

环境搭建

以javascript为基础构建的语言，一个js的超集，可以在任何支持js的平台中执行，ts扩展了js并且添加了类型，但是ts不能被js解析器直接执行，需要编译器编译为js文件，然后引入到 html 页面使用。

ts增加了数据类型，支持es的新特性，添加了es不具备的新特性，丰富的配置选项，还有强大的开发工具。

全局安装ts（需要node环境）， 安装后 tsc 指令可以查看是否安装成功

npm i -g typescript

tsc xxx.ts  //编译ts文件为js

 基本类型

需要类型声明，指定ts中变量的类型，指定类型后，当变量赋值时，ts会自动检查值是否符合声明的类型，否则就报错。如果变量的声明和赋值是同时进行的，ts可以自动对变量进行类型检测；除了声明变量，也可添加类型给函数参数，对于返回的结果也可以设置类型。

let a = true //如果变量的声明和赋值是同时进行的，ts可以自动对变量进行类型检测。let b:number;function sum(a:number,b:number):number{return a+b;
}

类型	例子	描述
number	1,-33,2.5	任意数字
string	'hi'	任意字符串
boolean	true/false	布尔值
字面量	其本身 (let a:10，a的值只能是10，很少这么用）	限制变量的值就是该字面量的值
any	*	任意类型（相当于关闭了类型检测）
unknown	*	类型安全的any
void	空值（undefined）	没有值（或undefined）
never	没有值	不能是任何值
object	{name:'张三'}	任意的js对象
array	[1,2,3]	任意js数组
tuple	[4,5,'123']	元祖，ts新增类型，固定长度数组
enum	enum{A,B}	枚举，ts新增类型

number类型

let a:number = 6

string类型

let str:string = "hello!"

boolean类型

let str:boolean = true

字面量 类型

let a:10
a = 10 //a只能为10let b:'male'|'female' //b只能是 'male' 或者 'female'(联合类型) 其他值会报错
b = 'male'
b = 'female'let c:boolean|string //c可以是布尔类型或者字符串类型
c = true
c = 'hello'

any类型

可以是任意类型，相当于对该变量关闭了ts类型检测，不设置指定类型，默认为any类型，但是any类型的值可以赋值给任意变量，不报错，会影响其他变量类型。少用，一般多用unknown

let d:any; //可以是任意类型，相当于对该变量关闭了ts类型检测
d = 'hello'
d = 123
d = truelet e; //不设置指定类型，默认为any类型

unknown类型

未知类型，用法与any一致，但是不同的类型依旧不可以赋值。实际上就是一个安全类型的any，不能直接赋值给其他，可以采用类型断言的方式赋值。告诉解析器变量的实际类型。

let e:unknown;
e = 'hello'let s:string 
s = e //此时报错，因为e不是string类型//类型断言,两种方式都可以
s = e as string 
s = <string>e

void类型

主要用于函数的无返回值，表示函数无返回值

function fn():void{}

never类型

表示永远不会返回结果，比如调用下方的方法就会报错，代码执行立即结束，则没有返回值了

function fn():never{throw new Error('报错了')
}

 objec类型

比较鸡肋，万物皆是对象，可以是 {} ，可以是 function，也可以是[ ] 。

let a:object;
a = {}
a = function (){}//b是对象类型，并且要有一个name属性,age属性可有可无，再添加属性就会报错
let b:{name:string,age?:number};//任意字符串的属性名，对应的值为any任意类型，可以写多个属性，但是一定要有name属性
let c = {name:string,[propName:string]:any}
c = {name:'hello'age:18,gender:'男'}let d:(a:number,b:number)=>number //
d = function (a:number,b:number):number{return a + b
}

Array类型

let e:string[]; //表示字符串数组
e = ['a','b']let f:number[]; //数字数组，let g:Array<number>; // 数字数组，与上方的意义相同
g = [1,2,3,4]

元组类型

固定长度的数组，严格需要个数一致。

let h:[string,number]
h = ['abe',123]

enum 枚举

enum Gender{male = 0female = 1
}
let i:{name:string,gender:Gender }
i = {name:'hello',gender:Gender.male
}

& 表示同时

let j:{name:string} & {age:number};
j = {name:'hello',age:18
}

类型别名

type  myType = 1|2|3
let m:myType //起了别名

编译选项

自动编译文件

使用-w指令，ts会监听文件变化，并在变化时对文件重新编译。

tsc xxx.ts -w

自动编译整个项目

 需要配置tsconfig.json文件，添加配置文件后，执行 tsc 指令，可以完成对整个项目的编译

tsc -w 指令监听并编译整个项目文件 可以直接使用命令行来初始化配置文件

tsc -init

配置选项

include

用来指定哪些ts文件需要被编译

{"include":["./src/**/*" //src文件夹下所有文件 **表示任意目录，*表示任意文件]
}

exclude

用来指定哪些ts文件不需要被编译，默认值：["node_modules",'browser_components','jspm_packages']，也可以不配置。

{"exclude": ["./src/hello/**/*"],
}

extends

定义被继承的配置文件，另一个配置文件的配置选项和 tsconfig.json 一致。

{"extends":"./config.json",
}

files

指定被编译文件的列表，只有需要变异的文件少时才会用到。类似于include，这个仅限于文件。

{"files": ["./src/01.ts"]
}

compilerOptions 编译选项

target

指定ts被编译为ES的版本，默认是 ES3

//可取值为：'es3'， 'es5'，'es6'， 'es2015'，'es2016'，'es2017'， 'es2018'，'es2019'，'es2020'，'es2021'，‘es2022'，'esnext'
{"compilerOptions": {"target":"ES3"}
}

module

指定要使用的模块化的规范

//取值 'none', 'commonjs', 'amd', 'system', 'umd', 'es6', 'es2015', 'es2020', 'es2022', 'esnext', 'node16', 'nodenext'{"compilerOptions": {"module": "es6"}
}

lib

用来指定项目中要使用的第三方的库，是一个数组，但是一般情况下我们不会去改。

//可取值 'es5', 'es6', 'es2015', 'es7', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'es2021', 'es2022', 'es2023', 'esnext', 'dom', 'dom.iterable', 'webworker', 'webworker.importscripts', 'webworker.iterable', 'scripthost', 'es2015.core', 'es2015.collection', 'es2015.generator', 'es2015.iterable', 'es2015.promise', 'es2015.proxy', 'es2015.reflect', 'es2015.symbol', 'es2015.symbol.wellknown', 'es2016.array.include', 'es2017.object', 'es2017.sharedmemory', 'es2017.string', 'es2017.intl', 'es2017.typedarrays', 'es2018.asyncgenerator', 'es2018.asynciterable', 'es2018.intl', 'es2018.promise', 'es2018.regexp', 'es2019.array', 'es2019.object', 'es2019.string', 'es2019.symbol', 'es2019.intl', 'es2020.bigint', 'es2020.date', 'es2020.promise', 'es2020.sharedmemory', 'es2020.string', 'es2020.symbol.wellknown', 'es2020.intl', 'es2020.number', 'es2021.promise', 'es2021.string', 'es2021.weakref', 'es2021.intl', 'es2022.array', 'es2022.error', 'es2022.intl', 'es2022.object', 'es2022.sharedmemory', 'es2022.string', 'es2022.regexp', 'es2023.array', 'esnext.array', 'esnext.symbol', 'esnext.asynciterable', 'esnext.intl', 'esnext.bigint', 'esnext.string', 'esnext.promise', 'esnext.weakref', 'decorators', 'decorators.legacy'{"compilerOptions": {// "lib": ["es6"]}
}

outDir

指定编译后的文件所在的路径，默认编译是和原ts文件在同一目录下。

{"compilerOptions": {"outDir": "./dist"}
}

outFile

指定将ts代码编译后合并为一个js文件（默认合并的是全局作用域中的代码），如果涉及到模块化（export / import）会报错，需要更改 module 为 amd 或者是 system，一般不常用。

{"compilerOptions": {"outFile": "./dist/app.js"}
}

allowJs

是否对js文件进行编译，默认是false

{"compilerOptions": {"allowJs": false}
}

checkJs

检查js代码是否符合语法规范，默认是false

{"compilerOptions": {"checkJs": false}
}

 removeComments

是否移除编译后js中的注释。

{"compilerOptions": {"removeComments": true}
}

 noEmit

是否生成编译后的文件，默认为false

{"compilerOptions": {"noEmit": false,}
}

noEmitOnError

当有错误的时候，不生成编译文件，默认为false

{"compilerOptions": {"noEmitOnError": false,}
}

 alwaysStrict

设置编译后的文件是否使用严格模式，默认为false

{"compilerOptions": {"alwaysStrict": false,}
}

 noImplicitAny

不允许 ts 中隐式 any 的类型出现，比如忘记给函数形参指定数据类型

{"compilerOptions": {"alwaysStrict": true,}
}

 noImplicitThis

不允许不明确类型的 this，默认值false

{"compilerOptions": {"noImplicitThis": true,}
}

 strictNullChecks

严格检查空值 null 并且报错，默认值为false

{"compilerOptions": {"strictNullChecks": true,}
}

 其余配置选项参考：tsconfig.json · TypeScript中文网 · TypeScript——JavaScript的超集

 

---

使用webpack来配置ts的打包编译

npm init
npm i -D webpack webpack-cli typescript ts-loader html-webpack-plugin clean-webpack-plugin webpack-dev-server

webpack.config.js

const path = require('path')
const HTMLWebpackPlugin = require("html-webpack-plugin")
const { CleanWebpackPlugin } = require("clean-webpack-plugin")
module.exports = {//指定入口文件entry: "./src/index.ts",//指定打包文件的所在目录output: {//指定打包文件目录path: path.resolve(__dirname, 'dist'),//打包后文件名称filename: "bunndle.js",clean: true,environment:{arrowFunction:false}},module: {rules: [//指定ts文件的loader{test: /\.ts$/,use: [{loader: "babel-loader",options: {presets: [["@babel/preset-env", {targets: { "chrome": "88","ie":"11"},"corejs": "3","useBuiltIns": "usage"}]]}},],//要排除的文件exclude: /node-modules/}]},plugins: [new HTMLWebpackPlugin({template: "./public/index.html"}),new CleanWebpackPlugin()],resolve: {extensions: [".ts", ".js"]},mode: "production"
}

//tsconfig.json{"compilerOptions":{"module": "es2015","target": "es2015","strict": true}
}

//package.json"scripts": {"test": "echo \"Error: no test specified\" && exit 1","build": "webpack","start": "webpack serve --open chrome.exe "},

Class类的一点总结

super函数调用：当子类继承父类后，有了自己的构造函数，那么相当于父类的构造函数被重写，那么将不会调用父类的构造函数会报错，此时需要调用super函数来执行父类的构造函数。

abstact类：当一个类只用于继承时，那么使用抽象类，且不能用来创建对象，抽象父类的公共方法，需要子类必须重写抽象方法，不用写函数体，抽象方法只能写在抽象类中。

abstract class Parent{abstract test():void;
}class Child extends Parent{constructor(){super()}test(){console.log('test')}}

接口interface

用来定义一个类的结构，应该包含哪些属性和方法，同时也可以当做是类型声明，但是接口可以重复定义，最终是将相同接口的内容合并在一起。

接口可以在定义类的时候去限制类的结构，接口内的所有属性不能有实际的值，方法也是抽象方法，可以看做是一个抽象类，通过  implements 进行实现。

interface myInterface{name:string;age:number;test():void;
}const obj:myInterface = {name:'sss',age:111}class Test implements myInterface{name:string,construcror(name:string){this.name = name}test(){}
}

属性修饰符

public：修饰的属性可以在任意位置访问修改。

private：私有属性，只能在类内部修改，如果要修改private属性可以添加 getter setter 的方法，外部可以直接通过 . 的方式进行访问和修改属性。

class Test implements myInterface{private _name:stringpivate _age:numberget name(){return this._name}set name(value){this._name = value}
}let test = new Test()
let name = test.name

protected：受保护的属性，只能在当前的类和子类中（内部）访问，外部不能访问。

泛型

在定义函数或类时，如果遇到类型不明确就可以使用泛型，泛型可以同时指定多个，

function fn<T>(a:T):T{return a
}
let a = fn(10) //不指定类型，ts会自动对类型进行推断，此时T为number
let str = fn<string> ('hello') // 指定泛型function fn2<T,K>(a:T,b:K):T{return a
}
let num = fn2<number,string>(123,'hello')interface Inter{length:number
}
function fn3<T extends Inter>(a:T):number{ //继承Inter接口，是Inter的子类return a.length
}
fne({length:10})class MyClass<T>{name:T;constructor(name:T){this.name = name}
}
const mc = new MyClass<string>('jerry')

其他参考文档：文档简介 · TypeScript中文网 · TypeScript——JavaScript的超集