typescript必备基础

时间 2019-11-21

标签 typescript 必备基础繁體版

原文原文链接

1、使用TS前准备

安装TS (sudo) npm i typescript -g
新建TS项目文件夹，在文件夹下执行 tsc --init 和npm init -y后生成tsconfig.json和package.json
测试TS运行是否正常，新增测试文件src/index.ts

const hello = '可待'console.log(hello);复制代码

进行编译 tsc ./src/index.ts成功生成index.js文件

var hello = '可待';console.log(hello);复制代码

为了方便使用，不用每次编写都使用tsc手动编译，咱们要将项目工程化javascript

2、工程化

2.1 安装工程化包

webpack:统一编译html

webpack-cli:为了使用webpack的一些命令java

webpack-dev-server:更新后不用刷新，自动刷新node

ts-loader:ts编译规则webpack

typescript:使用typescript语言特性web

html-webpack-plugin:打包的文件直接输出HTML文件typescript

npm i webpack webpack-cli webpack-dev-server ts-loader typescript 
html-webpack-plugin -D
复制代码

2.2 配置build/webpack.config.js

const HtmlWebpackPlugin = require('html-webpack-plugin')
module.exports = {
    //入口
    entry: './src/index.ts',
    //出口
    output: {
        filename: 'app.js'
    },
    resolve: {
        extensions: ['.js', '.ts', '.tsx']
    },
    devtool: 'cheap-module-eval-source-map',
    module: {
        rules: [{
            test: /\.tsx?$/i,
            use: [{
                loader: 'ts-loader'
            }],
            exclude: /node_modules/
        },
        ]
    },
    plugins: [
        new HtmlWebpackPlugin({
            template: './public/index.html' //须要添加宿主文件
        })
    ]
}复制代码

记得添加宿主文件 /public/index.html

<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>Ts使用</title> </head> <body> <div id='app'></div> </body> </html> 复制代码

2.3 修改 package.json 添加项目启动命令

"scripts": {
    "dev": "webpack-dev-server --config ./build/webpack.config.js"
  },复制代码

2.4 启动项目 npm run dev

启动成功，后访问http://localhost:8080/npm

3、TS语法

3.1 类型语法

类型注解

类型推断，若是有初始值则根据原始类型推断类型原始类型：string、boolean、number、symbol、undefined、null

数组类型约束

函数约束(参数约束):返回值约束

无返回值void的使用json

对象参数约束
数组

可以使用自定义类型写对象参数

//类型别名type:自定义类型,对类型的结构定义
type Prop = { prop: number }
//加强可读性
function fn3(o: Prop) { }
复制代码

任意类型(此类型多用于数组)

类型断言as语法,无错误类型提示

联合类型(能够是...也能够是...)

交叉类型(能够复用自定义类型)

3.2 函数语法

函数必选参数

function good(person: string): string {    return person + '好棒!'}复制代码

函数可选参数 ?

function good(person: string, msg?: string): string {    return person + '好棒!'}复制代码

函数的重载

3.3 Class

class Parent {
    private _dong = "dong"; // 私有属性，不能在类的外部访问 
    protected bar = "bar"; // 保护属性，能够在子类中访问
    // 构造函数参数加修饰符，可以定义为成员属性 
    constructor(public tua = "tua") { }
    // 方法也有修饰符
    private someMethod() { }
    // 存取器:属性方式访问，可添加额外逻辑，控制读写性 
    get dong() {
        return this._dong;
    }
    set dong(val) {
        this._dong = val;
    }
}
class Child extends Parent {
    baz() {
        this.dong;
        this.bar;
        this.tua
    }
}复制代码

3.4 接口

接口和type区别:https://www.cnblogs.com/EnSnail/p/11233592.html

3.5 泛型(动态约定类型)

泛型(Generics)是指在定义函数、接口或类的时候，不预先指定具体的类型，而在使用的时候再指定类型的一种特性。以此增长代码通用性。

// 不用泛型
// interface Result {
// ok:0|1;
//   data: Feature[];
// }
// 使用泛型
interface Result<T> {
    ok: 0 | 1;
    data: T;
}
// 泛型方法
function getResult<T>(data: T): Result<T> {
    return { ok: 1, data };
}
// 用尖括号方式指定T为string 
getResult<string>('hello') // 用类型推断指定T为number 
getResult(1)
// 进一步约束类型变量 
interface Foo {
    foo: string
}
// 约束T必须兼容Foo
function getResult2<T extends Foo>(data: T): Result<T> {
    return { ok: 1, data };
}
getResult2({ foo: 'foo', bar: 'bar' })
复制代码

拓展Vue中使用TypeScript
juejin.im/editor/draf…