# 数据 ## 类型声明 ```typescript let 变量: 数据类型 let 变量: 数据类型 = 值 // 简写为 let 变量 = 值 function fn (参数1: 数据类型, 参数2: 数据类型 ...): 返回数据类型 { ... return ... } ``` ## 数据类型 | 数据类型 | 说明 | 例子 | | -------- | ------------------------------ | -------------- | | number | 数字 | 1, -33, NaN | | string | 字符串 | 'h12', "h123", | | boolean | 布尔值 | true、false | | 字面量 | 限制变星的值就是该字面量的值 | 它本身 | | any | 任意类型，默认 | 1,'333' | | unknown | 类型安全的any | * | | void | 空(类似于undefined) | | | never | 不能是任何值 | 没有值 | | object | 任意JS对象 | {name: 'joe'} | | array | 任意JS数组 | [1,2,3,4] | | tuple | 元素，TS新增类型，固定长度数组 | [4,5] | | enum | 枚举，TS新增语法 | enum{A, B} | * any 与 unknown区别 ```typescript let a: any a = true let b: unknowm b = 'false' let c: string c = a // 不报错 c = b // 报错 // 不报错的赋值方式之一 if (typeof b === 'string') { c = b } // 不报错的赋值方式之二：类型断言 c = b as string c = <string> b ``` * object 属性设置 ```typescript // object: 无限制 let a: object a = { a: 123 } a = (): void => {} a = [] // 但不能是js简单类型 a = 12 // object: 有限制 let b: { name: string } b = { name: '猴子' } // 报错 b = { name: '猴子', age: 6000 } // 报错原因：字面量内部没有其他属性 // object: 选填向 let c: { name: string, age?: number } c = { name: '大象'， age: 30 } c = { name: '大象' } // object: 自定义 let d: { [propName: string]?: string } d = { a: 'a', b: 'b', c: 'c' } ``` * 函数设置 ```typescript let a: (a: number, b: number) => number a = (num1: number, num2: number) => { return num1 + num2 } ``` * 数组设置 ```typescript // 字符串数组 let a: string[] // 数字数组 let b: number[] // 自定义数组元素 let c: Array <{ name: string }> c = [ { name: '123' }, { name: '123', age: 12 } // 只能有name属性，报错 ] ``` * 枚举法 ```typescript enum Sex { male = '男' , female = '女' } const aaa = (sex: String): boolean => { if (sex === Sex.male) { return true } else if (sex === Sex.female) { return false } else { return false } } console.log(aaa('男')) ``` ## 类型别名 * type ```typescript type aaa = 1 | 2 | 3 | 4 | 5 let a: aaa a = 1 a = 5 a = 6 // 报错 ``` # typescript 配置 ## 转化成js 需要全局依赖 ```shell # 安装编译 npm i -g typescript ``` 编译 ```shell # 编译js tsc *.ts # 监视性编译js tsc *.ts -w ``` ## 编译文件配置 编译配置文件：`tsconfig.json` 例子： ```js // 文件是json格式，这里为了方便展示，采用js写法 { // 定义编译哪些文件 include: [ './src/**/*.ts' ], // 定义哪些文件 不 编译 exclude: [ './src/hello/**/*.ts' ], // 指定编译文件列表 files: [ 'test1.ts', 'test2.ts', 'test3.ts', 'test4.ts' ], compilerOptions: { // 设置ts代码编译的目标版本 // 值： 'ES5'(默认)、'ES6/ES2015'、'ES7/ES2016'、'ES2017'、'ES2018'、'ES2019'、'ES2020'、'ESNext'(js最新版本) target: 'ES5' } } ``` ### include属性 定义**编译**文件的路径 例： ```json { "include": [ "./src/**/*.ts" ] } ``` ### exclude属性 定义**不被编译**文件的路径 例： ```json { "exclude": [ "./src/hello/**/*.ts", "node_modules" ] } ``` ### files属性(不常用) 定义编译文件目录 例： ```json { "files": [ "test1.ts", "test2.ts", "test3.ts", "test4.ts" ] } ``` ### compilerOptions对象 配置 ts 相关对象 | 属性名称 | 说明 | 可选值/配置范围/类型 | 例子 | | ---------------- | ------------------------------------------------------------ | ------------------------------------------------------------ | --------------- | | **target** | 转换目标js的版本类型 | 'ES5'(默认)、'ES6/ES2015'、'ES7/ES2016'、<br />'ES2017'、'ES2018'、'ES2019'、'ES2020'、<br />'ESNext'(js最新版本) | "ES6" | | sourceMap | 是否生成js地图 | Boolean类型：true、false | true | | **module** | 模块化转换 | "none"、"commonjs"、"amd"、"system", <br />"umd"、"es6"、"es2015"、"es2020"、"esnext" | "es6" | | lib | 指定项目中要使用的库<br />若是空数组`[]`，<br />有些默认的库将**不会调用** | (部分展示)"es5"、"es6"、"dom"、"es2015" | "dom" | | **outDir** | 定义文件编译后存放目录 | String类型 | "./dist" | | outFile | 将代码合并为一个文件<br />建议在module属性为amd、system时使用 | String类型 | "./dist/app.js" | | allowJs | 是否编译js文件<br />与编译文件路径有关<br />如`"**/*.ts"`确定文件类型<br />就无法执行<br />而`**/*`未定义文件类型<br />可以执行 | Boolean类型：true、false(默认) | true | | checkJs | 检测编译js文件语法规范<br />按照ts常规标准<br />如改变数据类型就会出错 | Boolean类型：true、false(默认) | true | | removeComments | 是否移除注释 | Boolean类型：true(默认)、false | true | | noEmit | 是否停止生成编译文件 | Boolean类型：true、false(默认) | false | | noEmitOnError | 出现错误时是否生成编译文件 | Boolean类型：true(默认)、false | true | | alwaysStrict | 是否执行js严格模式 | Boolean类型：true(默认)、false | true | | noImplicitAny | 是否禁止使用隐性any类型<br />比如说函数参数之类 | Boolean类型：true、false(默认) | true | | noImplicitThis | 是否禁止使用不明确this<br />比如说函数内部this | Boolean类型：true、false(默认) | false | | strictNullChecks | 是否严格检查空值 | Boolean类型：true、false(默认) | false | | strict | 严格检查总开关 | Boolean类型：true、false(默认) | false | ``` lib全部属性 'es5', 'es6', 'es2015', 'es7', 'es2016', 'es2017', 'es2018', 'es2019', 'es2020', 'es2021', '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', 'es2020.bigint', 'es2020.promise', 'es2020.sharedmemory', 'es2020.string', 'es2020.symbol.wellknown', 'es2020.intl', 'es2021.promise', 'es2021.string', 'es2021.weakref', 'esnext.array', 'esnext.symbol', 'esnext.asynciterable', 'esnext.intl', 'esnext.bigint', 'esnext.string', 'esnext.promise', 'esnext.weakref' ``` # typescript 对象类 ```typescript class test {} ``` * 修饰词 | 修饰词 | 说明 | | -------- | -------- | | readonly | 只读状态 | | static | 静态类型 | | private | 私有状态 | | public | 公有状态 | ## 属性封装 在不使用`private`情况下，默认为`public`，若是属性采用`public`，外部可以直接手动修改属性，不安全 故要专门写get/set方法来封装属性，并且将属性私有化`private` ```typescript class test { private name: string private age: number setName (name: string): void { this.name = name } setAge (age: string): void { this.age = age } getName (): string { return name } getAge (): number { return age } } ``` ## 构造函数 创建一个对象时会调用构造函数 ```typescript class test { private name: string private age: number constructor (name: string, age: number) { this.name = name this.age = age } ...... } ``` ## 继承与super 类可以继承 ```typescript class animal { ...... } class dog extends animal { constructor () { super () } } ``` super 意思是调用父类，如调用父类**构造函数**、**调用方法**等 ```typescript class animal { ...... } class dog extends animal { constructor () { // 调用父类的构造函数 super () } sayHello () { // 调用父类的sayHello方法 super.sayHello() } } ``` ## 抽象类 可以参考<span class="external-link"><a class="no-external-link" href="https://www.runoob.com/design-pattern/factory-pattern.html" target="_blank"><i data-feather="external-link"></i>工厂模式</a></span>，将类抽象化，被抽象的类只会有相关的属性和方法名，但**不能具体化** 抽象类 Product ```typescript abstract class Product { abstract show (): void } export default Product ``` 抽象类 Factory ```typescript import Product from './Product' abstract class Factory { abstract getProduct (): Product } export default Factory ``` 可以通过**继承抽象类**，并完成抽象类对应的方法 实体类ProductA ```typescript import Product from './Product' class ProductA extends Product{ show(): void { console.log('这是产品A') } } export default ProductA ``` 实体类FactoryA ```typescript import Factory from './Factory' import ProductA from './ProductA' class FactoryA extends Factory { getProduct(): ProductA { return new ProductA() } } export default FactoryA ``` 调用时 ```typescript import FactoryA from './FactoryA' let factoryA = new FactoryA() factoryA.getProduct().show() // 这是产品A ``` ## 接口 特点1：接口可以重复声明，最后调用时会将之前声明的东西合并 特点2：接口内的数据只能声明数据类型，不能赋值，包括函数 特点3：创建接口对象时，必须将内部**必填部分补全**，不能填写**不存在部分** ```typescript interface myInter { name: string sayHello (): void } interface myInter { age: number } ``` 使用：对象使用 ```typescript interface personalInfo { name: string age: number } const obj = { name: '张三', age: 18 } ``` 使用：类使用 ```typescript interface test1 { name: string age: number setName (name: string): void setAge (age: number): void getName (): string getAge (): number } class tttttt implements test1 { // 内部定义的name、age不能用private来修饰 name: string age: number constructor(name: string, age: number) { this.name = name this.age = age } setName (name: string): void { this.name = name } setAge (age: number): void { this.age = age } getName (): string { return this.name } getAge (): number { return this.age } } const a = new tttttt('张三', 18) console.log(a) ``` # 泛型 一般用于函数/方法、类 ```typescript function fn <T> (a: T): T { return a } ``` 泛型一般是用于不清楚 传参 的数据类型，但使用`any`就会有**数据类型转换风险** * 在执行时规定其数据类型 ```typescript // <T> 代表创建泛型T， 函数内就可以调用泛型T function fn <T> (a: T): T { return a } fn <number> (11) fn <number> ('11') // 报错！ ``` * 这规定同样在class类中也通用 ```typescript class Test <T> { private id: string private attr1: T private attr2: T constructor(id: string, attr1: T, attr2: T) { this.id = id this.attr1 = attr1 this.attr2 = attr2 } } const aaa = new Test<number>('a111', 12, 22) const bbb = new Test<number>('a111', 12, '22') // 报错 ``` * 一次性可以创建多个泛型 ```typescript const fn = <T,K> (a: T, b: K): T | K => { if (parseInt(a.toString()) > parseInt(b.toString())) { return a } else { return b } } console.log(fn <number, string> (222, '33')) ``` * 还可以继承接口类 ```typescript interface myInter { length: number } const fn = <T extends myInter> (a: T): number => { return a.length } console.log(fn({length: 333, other: '555'})) ``` 最后修改：2023 年 04 月 04 日 © 允许规范转载 赞 0 如果觉得我的文章对你有用，请随意赞赏