TypeScript | 1

2021-11-01
1631字
4分钟

基础介绍

TypeScript——JavaScript 的超集

Typescript 是静态语言与动态语言 JavaScript 不同,TS 是和 JS 都是弱类型语言 (只是在编译时检查)

tsc ./...ts 可以编译生成.js 文件,然后node .js 执行

或者安装 ts-node 执行

变量和数据类型

声明变量并指定类型->变量赋值

let age: number; //变量的声明
age = 22; //变量的赋值
let Name: string = "Katre"; //变量的初始化

类型注解 (type annotation)

为变量添加类型约束的方式 : type

  • 一般简单的变量声明可以不写类型注解。能直接类型推断(type inference)。
  • 一般函数的参数需要类型注解,返回值可以不用写类型注解
let 变量: 类型;
let 变量: 类型 = 值;
function fn(变量: 类型): 类型{
    ···
}

数据类型分类

1 原始类型 2 对象类型

常见的基本数据类型:

number string boolean undefined null symbol void enum

字面量 & 联合类型

let a: 10;//10是字面量
a = 11;// error

let b = "male" | "female";//作为枚举使用
let c = boolean | string; //称为联合类型

有点像常量

any & unknown

any表示任意类型 ,相当于对该变量关闭了类型检查 不建议使用

let a;//隐式的any
let a: any;//显式的any

unknown表示安全的任意类型 ,不能直接赋值给其他类型变量,可以赋值给任意变量

let a: any = "ss";//类型any可以赋值给任意变量
let b: unknown = "ss";//类型unknown不能直接赋值给其他类型变量
let s: number;
s = a;
s = b;//error
//先执行类型检查
if(typeof b === "number"){
    s = b;
}
s = b as number;//类型断言
s = <number>b;

类型断言 :可以用来告诉编译器变量的实际类型

变量 = 变量 as 类型;
变量 = <类型>变量;

void & nerver

主要用于函数的返回值 void 用于没有返回值的函数,不能分配给null,可以分配给undefined, never 表示没有值,是一个特殊类型,比如函数errorFuncforever

function fn(): void{}
function fn2(): never{
    throw new Error("err!");
}

object

对象,挺少直接写object 采用类似字面量的赋值方式

let a: {age?: number, name: string};
//?表示是可选属性

let b: {name: string, [propName: string]: ang};
let c: (a: number, b: number)=>number;

array

let a: string[];
let b: Array<number>;

tuple & enum

元组——固定长度的数组 枚举——和C语言差不多

let a: [string, string];
enum Gender{
    Female,
    Male
}
let b: {name: string, gender: Gender};

类型别名

comme typedefined

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

let k: 1|2|3|4|5;//类型复用
let l: myType;

编译选项

自动编译文件

-w 选项

tsc xxx.ts -w

编译配置

tsconfig.json ,直接tsc 编译所以项目文件

  • 可以写注释

  • include:定义编译的文件范围

    **表示任意目录,*表示任意文件

  • exclude:定义编译排除的范围 默认值:["node_modules","bower_components","jspm_packages"]

  • extends:定义被继承的配置文件

  • files:指定被编译的文件列表(编译的文件比较少)

compilerOptions

  • target:指定编译为ES的版本

  • module:指定模块化的规范

  • lib:指定项目使用的库

  • outDir:指定编译后文件所在的目录./dist

  • outFile:将代码合并为一个文件

  • allowJs:是否编译js文件(默认为false)

  • checkJs:是否检查js代码(默认为false)

  • removeComments:是否移除注释

  • noEmit:不生成编译后的文件

  • noEmitOnError:有错误时不生成编译的文件(默认为false)

  • alwaysStrict:执行严格模式(有模块时自动进入)

  • noImplicitAny:不允许隐式的any类型

  • noImplicitThis:不允许不明确类型的this

  • strictNullChecks :严格检查空值

    ES2020的可选链

    let box1 = document.getElementById('box1');
    box1?.addEventListener('click', function(){
        alert('hello!')
    });
    
  • strict:严格检查的总开关(建议打开)

使用webpack打包ts代码

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

webpack 的配置信息webpack.config.js

const path = require('path');

module.exports = {
    //指定入口文件
    entry: "./src/index.ts"
    //指定打包文件所在的目录
    output: {
        path: path.resolve(__dirname, 'dist'),
        filename: "bundle.js"
    },
    module:{
        rules:[
            {
                //指定规则生效的文件
                test: /\.ts$/,
                use: 'ts-loader'
                exclude: /node-modules/
            }
        ]
    }
}

添加tsconfig.json

在package.json 中添加script

"script":{
    "build": "webpack"
}

运算符

在字符串前面添加+ 号,可以将 string 类型转化为 number 类型

语句

TypeScript 支持 三元运算符 ?:

Avatar
Zhang.Mathias 巧者劳而智者忧,无能者无所求,饱食而遨游,泛若不系之舟