一、ts 开发环境安装
用 nodejs 安装 ts 的开发环境: npm i -g typescript
与npm i -g ts-node
编写 ts 文件后执行tsc
即可编译 ts 文件为 js 文件。通过tsc -init
可生成配置文件。
二、ts 中的类型声明
1 2 3 4 5
| let 变量: 类型; let 变量: 类型 = 值; function fn(参数: 类型,参数: 类型): 返回类型{ ... }
|
若值类型与变量类型不相同,则会报错。与 js 相比,ts 增加了为变量声明类型的功能,在开发中可以避免很多麻烦。
三、ts 中的类型
类型 | 例 | 描述 |
---|
number | 1,-1,22 | 数字 |
string | ‘hello’,“hello”,`hello` | 字符串 |
boolean | true,false | 布尔值 |
字面量 | 本身 | 变量值就是限制类型 |
any | * | 任意类型 |
unknown | * | 类型安全的 any |
void | 空值(undefined) | 无值 |
never | 没有值 | 不为任何值 |
object | {age:20} | 任意 js 对象 |
array | [1,2,3] | 任意 js 数组 |
tuple | [1,2] | 元素,定长数组 |
enum | enum{A,B} | 枚举 |
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44
| let a: 10; a = 10; a = 20;
let b: "male" | "female"; b = "male"; b = "female" b = "hello" let c: number | string;
let d: any;
let e: unknown = "hi";
let f:string = "hello"; f = e as string;
function fun():never{ throw new Error('出错'); }
let g: {name:string,age?:age};
let h: {name:string,[propName:string]?:any};
let i:(a: number,b: string)=>boolean;
enum Gender{ Male = 1, Female = 2 } let j :{name:string,gender:Gender}; j={ name:"张三", gender:Gender.Male }
|
四、ts 编译选项
tsc 文件名 -w
监视某文件,当改变时就重新编译
要监视全部文件,需要执行tsc -init
生成tsconfig.json
文件,运行tsc -w
即可监视全部文件。
配置属性
1 2 3 4
| { "include": ["./src/**/*"] }
|
1 2 3
| { "extends": "./路径/xxx.json" }
|
1 2 3 4
| { "files": ["xx.ts", "xx.ts", "xx.ts"] }
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19
| { "compilerOptions": { "target": "ES6", "module": "commonjs", "lib": ["dom", "es6"], "outDir": "./dist", "outFile": "./dist/app.js", "allowJs": false, "checkJs": false, "removeComments": false, "noEmit": false, "noEmitOnError": false, "alwaysStrict": false, "noImplicitAny": false, "noImplicitThis": false, "strictNullChecks": false, "strict": false } }
|
五、ts 的类
1 2 3 4 5 6 7 8 9
| class Person { readonly name: string = "张三"; static age: number = 20; static hello() { } } const p = new Person(); p.hello();
|
六、ts 的构造函数和 this
创建构造函数
1 2 3 4 5 6 7
| class Dog { constructor(name: string, age: number) { this.name = name; this.age = age; } } const dog = new Dog("狗1", 2);
|
this 代表 Dog 的每个实例对象,对象是谁 this 就是谁。
七、继承
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27
| class Animal { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } call() { console.log("call"); } } class Dog extends Animal { run() { console.log("狗跑"); } call() { console.log("狗叫"); } } class Cat extends Animal { run() { console.log("猫跑"); } call() { console.log("猫叫"); } }
|
继承将多个类中共有的代码写道一个父类中,供其他子类继承。
八、super 关键字
super 用于在子类中调用父类的方法或属性。
1 2 3 4 5 6 7 8
| class Cat extends Animal { run() { console.log("猫跑"); } call() { super.call(); } }
|
在子类构造函数中默认会调用 super(),并传入值。
1 2 3 4 5 6 7 8 9 10 11
| class Cat extends Animal { constructor(name: string, age: number) { super(name, age); } run() { console.log("猫跑"); } call() { super.call(); } }
|
九、抽象类
抽象类以 abstract 开头,不能用于创建对象,只能用于继承。
1 2 3 4 5 6 7 8 9
| abstract class Animal { name: string; age: number; constructor(name: string, age: number) { this.name = name; this.age = age; } abstract call(); }
|
十、接口
1 2 3 4 5 6 7 8 9 10 11 12 13
| interface MyCode{ name: string; age: number; hello():string; } interface MyCode{ hobby: string; } const obj: MyCode={ name:'张三'; age:20; hobby:'打球'; }
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15
| interface MyCode { name: string; hello(): string; }
class MyClass implements MyCode { name: string; constructor(name: string) { this.name = name; } hello(): string { return "hello"; } }
|
十一、属性的封装
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20
| class Cat { private _name: string; private _age: number; constructor(name: string, age: number) { this._name = name; this._age = age; } get name(): string { return this._name; } set name(value: string) { this._name = value; } get age(): number { return this._age; } set age(value: number) { this._age = value; } }
|
十二、泛型
在定义函数或类时,如果遇到类型不明确就可以使用泛型
1 2 3 4 5
| function fn<T>(a: T): T { return a; } fn(10); fn<string>("hello");
|
1 2 3 4 5
| function fn2<T, K>(a: T, b: K): T { return a; } fn2(123, "123"); fn2<string>(123, "123");
|
1 2 3 4 5 6 7
| interface Inter{ length: number; } function fn3<T extend Inter>(a:T):number{ return a.length; } fn3('123');
|
十三、webpack 打包 ts
初始化项目
npm init -y
安装 webpack
npm i -D webpack webpack-cli typescript ts-loader
新建 webpack 配置文件webpack.config.js
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17
| cosnt path = require('path'); module.exports = { entry: "./src/index.ts", output: { path: path.resolve(__dirname,'dir'), filename: "bundle.js" }, module: { rules:[ { test: /\.ts$/, use: 'ts-loader', exclude: /node-modules/ } ] } }
|
在 package.json 的 scripts 属性中添加
打包可执行npm run build