diff --git a/docs/uts/type-compatibility.md b/docs/uts/type-compatibility.md index fc4478e955eb5fa9c9c07fc8a35d58d5b9dac10c..4fcc6d19b26522fac53bd418b7bf3d460184e6b2 100644 --- a/docs/uts/type-compatibility.md +++ b/docs/uts/type-compatibility.md @@ -45,3 +45,77 @@ const person3: IPerson = { } } as PersonObject // 错误,PersonObject 类型与 IPerson 无关只是结构相同 ``` + +### 运行时类型保留 + +不同于ts编译后完全抹除类型,uts在运行时保留了部分类型信息。通常是定义type后,创建此type对应的实例时,会保留此实例的类型信息。 + +例如: + +```ts +type Obj = { + a: number +} +const obj = { + a: 1 +} as Obj +// 此时obj的类型为Obj,运行时可以使用 obj instanceof Obj +console.log(obj instanceof Obj) // true + +const result = JSON.parse(`{"a": 1}`) // 此时返回的对象类型为Obj +console.log(result instanceof Obj) // true +``` + +**注意** + +- 目前 web端`uni.request`传入泛型时不会创建对应类型的实例,会直接抹除类型信息,后续可能会调整为创建泛型类型对应的实例,请勿利用此特性。 +- web端仅项目内定义的类型可以被实例化,uni-app-x内部定义的类型无法被实例化,例如`const options = { url: 'xxx' } as RequestOptions`,并不会将此对象转化为RequestOptions的实例,运行时也没有`RequestOptions`对应的类型信息。 + +### any类型 + +不同于ts,uts中any类型不包含null类型。 + +例如定义可选参数时应使用下面的写法: + +```ts +function test(anything?: any | null) { // 注意带上问号 + console.log(anything) +} +``` + +### 可选属性 + +如果属性在类型中是可选值需要使用下面的写法,不要省略问号和`| null` + +```ts +type Options = { + num?: number | null +} +``` + +### void/undefined类型 + +为保证多端统一应尽量避免使用undefined、void类型,可以使用null代替。如果需要判断是否为null建议使用两个等号,不要使用三个等号(此处使用了js的特性`undefined == null`结果为true)。 + +### String、Number、Boolean类型 + +ts内string、number、boolean类型与String、Number、Boolean类型并不相同。 + +```ts +let str1: String = '1' +let str2: string = '2' + +str1 = str2 // 不报错 +str2 = str1 // 报错 Type 'String' is not assignable to type 'string' +``` + +尽量使用string、number、boolean类型替代String、Number、Boolean类型。 + +### import type@import-type + +由于uts会为as为某些类型的对象字面量创建这个类型对应的实例,所以经常会存在一些类型引入后是作为值使用而不是作为类型使用。应尽量不要使用`import type`用法,避免编译结果出错。 + +```ts +import type { TypeA } from './type' // 避免使用 +import { TypeA } from './type' // 推荐用法 +``` diff --git a/docs/web/README.md b/docs/web/README.md index a634af8ca78dbbb74c82a5bdec0f75de5be5daa9..1f507f7d8ed6f17a5b3ca600ca3a8fb9ec9e23f3 100644 --- a/docs/web/README.md +++ b/docs/web/README.md @@ -134,137 +134,7 @@ type XxxComponentPublicInstanceEmit = (event: 'change' | 'input', ...args: any[] ## uts -uts内编译到web端时可以使用任何ts特性。包括undefined、联合类型等。 - -### 运行时类型保留 - -不同于ts编译后完全抹除类型,uts在运行时保留了部分类型信息。通常是定义type后,创建此type对应的实例时,会保留此实例的类型信息。 - -例如: - -```ts -type Obj = { - a: number -} -const obj = { - a: 1 -} as Obj -// 此时obj的类型为Obj,运行时可以使用 obj instanceof Obj -console.log(obj instanceof Obj) // true - -const result = JSON.parse(`{"a": 1}`) // 此时返回的对象类型为Obj -console.log(result instanceof Obj) // true -``` - -**注意** - -- 目前`uni.request`传入泛型时不会创建对应类型的实例,会直接抹除类型信息,后续可能会调整为创建泛型类型对应的实例,请勿利用此特性。 -- 仅项目内定义的类型可以被实例化,uni-app-x内部定义的类型无法被实例化,例如`const options = { url: 'xxx' } as RequestOptions`,并不会将此对象转化为RequestOptions的实例,运行时也没有`RequestOptions`对应的类型信息。 - -### this指向问题 - -安卓端this只会指向其所在的类的实例,而编译到js后this的值取决于它出现的上下文:函数、类或全局。参考: [MDN this](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Operators/this) - -以下述代码为例 - -```vue - - -``` - -上述代码中的this在安卓端会指向页面/组件实例,在web端会指向uni.request的参数。为保证多端一致,建议在上面的场景使用this时搭配箭头函数。上述代码修改为下面的写法后即可兼容多端 - -```vue - - -``` - -### any类型 - -不同于ts,uts中any类型不包含null类型。 - -例如定义可选参数时应使用下面的写法: - -```ts -function test(anything?: any | null) { // 注意带上问号 - console.log(anything) -} -``` - -同样如果属性在类型中是可选值也需要使用下面的写法 - -```ts -type Options = { - num?: number | null -} -``` - -### void/undefined类型 - -为保证多端统一应尽量避免使用undefined、void类型,可以使用null代替。如果需要判断是否为null建议使用两个等号,不要使用三个等号(此处使用了js的特性`undefined == null`结果为true)。 - -### String、Number、Boolean类型 - -ts内string、number、boolean类型与String、Number、Boolean类型并不相同。 - -```ts -let str1: String = '1' -let str2: string = '2' - -str1 = str2 // 不报错 -str2 = str1 // 报错 Type 'String' is not assignable to type 'string' -``` - -尽量使用string、number、boolean类型替代String、Number、Boolean类型。 - -### import type@import-type - -由于uts会为as为某些类型的对象字面量创建这个类型对应的实例,所以经常会存在一些类型引入后是作为值使用而不是作为类型使用。应尽量不要使用`import type`用法,避免编译结果出错。 - -```ts -import type { TypeA } from './type' // 避免使用 -import { TypeA } from './type' // 推荐用法 -``` +参考:[类型兼容性](../uts/type-compatibility.md) ## css