在Typescript中使用"as const“而不添加"readonly”修饰符？
在Typescript中使用"as const"而不添加"readonly"修饰符的作用是将一个变量声明为只读的字面量类型。通过使用"as const"，可以确保变量的值在声明后不会被修改，从而提供更严格的类型检查和更好的代码可读性。
具体来说，"as const"用于将一个变量的类型推断为其字面量值的类型。例如，如果我们有一个变量声明如下：
const colors = ["red", "green", "blue"] as const;使用"as const"将会将colors的类型推断为readonly ["red", "green", "blue"]，即一个只读的元组类型。这意味着我们不能对colors进行修改或重新赋值。
使用"as const"的优势在于它提供了更严格的类型检查。在上述例子中，如果我们尝试修改colors的值，TypeScript编译器会报错：
colors[0] = "yellow"; // Error: Index signature in type 'readonly ["red", "green", "blue"]' only permits reading这样的类型检查可以帮助我们避免意外的修改，提高代码的可靠性和可维护性。
此外，"as const"还可以用于更复杂的对象字面量类型。例如：
const person = {
name: "John",
age: 30,
address: {
street: "123 Main St",
city: "New York"
}
} as const;使用"as const"将会将person的类型推断为：
{
readonly name: "John";
readonly age: 30;
readonly address: {
readonly street: "123 Main St";
readonly city: "New York";
};
}这样，我们可以确保person对象及其嵌套属性的值不会被修改。
在实际应用中，使用"as const"可以帮助我们更好地定义和使用只读的字面量类型，提高代码的可靠性和可读性。
腾讯云相关产品和产品介绍链接地址：
相关·内容
在我的项目中，我不时地创建带有构造函数的类，这些构造函数缓存它们创建的对象，这样如果构造函数被多次以相同的参数调用，它每次都会返回相同的实例，而不是创建一个与已经创建的实例相同的新实例。
下面是一个很小的例子：
class X {
private static __cache: Record<string, X> = Object.create(null);
readonly name: string; // The compilation error happens on this line.
constructor(name: string) {
浏览 0提问于2018-02-03得票数 3
我有一家名为TypeScript的Pinia + user.ts商店，如下所示：
import { User } from 'firebase/auth';
import { defineStore } from 'pinia';
export const useUserStore = defineStore('user', {
state: () =>
({
displayName: null,
email: null,
emailVerified: null,
isAnonym
浏览 9提问于2022-02-07得票数 1
回答已采纳
有人能向我澄清，TypeScript中的两个符号之间有什么区别吗？
class Test {
readonly ANSWER = 42;
}
和
class Test {
ANSWER = 42 as const;
}
第一个是，第二个是。这两个概念在多个地方都有详细的记录和解释，但它们似乎都对我做了同样的事情，至少在这个简单的例子中，即使属性不可变。甚至它们的组合似乎也是有效的：
class Test {
readonly ANSWER = 42 as const;
}
那么，为什么它们都被允许使用语法，并且使用一种比另一种更好还是更不利呢？
为了进一步澄清:我完全了解常规之间的
浏览 4提问于2022-06-07得票数 4
回答已采纳
当使用减号映射类型时，它似乎要从属性中移除修饰符。我认为这是由排除型造成的，但我不知道原因。
我期望减号只是从T中移除U的键，而不改变T的属性修饰符。
type Minus<T, U> = { [P in Exclude<keyof T, keyof U>]: T[P] }
type Noop<T> = { [P in keyof T]: T[P] }
interface Student {
readonly gpa: number
hobby?: string
name: string
}
interface Person {
name
浏览 1提问于2018-07-29得票数 2
回答已采纳
我只读了typescript和一个clone函数中的数据：
class Data {
readonly foo: string;
}
const ro: Data = {
foo: 'bar'
}
// how to declare clone so that it returns writable data?
declare function clone<T>(val: T): T;
const rw = clone(ro);
// how to make the properties of rw writable?
rw.foo = '
浏览 58提问于2017-02-14得票数 9
回答已采纳
假设我在A中有两种类型: TypeScript和B，而--not--希望将A类型的值分配给B。
我想要强制这样做，如果其中一种(或两种)类型被意外修改以允许分配，我们就会得到编译错误或测试失败。有办法在TypeScript中实现这一点吗？
当然，简单地通过在测试中执行赋值，可以很容易地强制执行一项分配是合法的。但我无法立即找到一种方法来强制执行一段特定的代码不会通过类型记录的类型检查。
这是关于我为什么要这么做的更多背景。我希望强制执行特定类型的不可变性，如下所示：
interface MyImmutableThing {
readonly myfield: string;
}
但是，
浏览 0提问于2020-07-12得票数 2
回答已采纳
我经常遇到这个问题()：
const arr = [1,2,3] as const
const doSomethingWithNumbers = <T extends number[]>(numbers: T) => {}
doSomethingWithNumbers(arr)
// ^
// Argument of type 'readonly [1, 2, 3]' is not assignable to parameter of type 'number[]'.
// The type
浏览 1提问于2022-04-28得票数 0
在一个用Javascript编写的web应用程序中，我允许自己通过使用以下代码添加一个“静态方法”(我使用引号，因为它是一个非常近似的描述)来“增强”DOM中的Event“类”：
Event.stop = function(event) {
if(event) {
event.stopPropagation();
event.preventDefault();
}
};
这样做效果很好。下面是一个示例：
document.getElementById('xxx').addEventListener('click',
浏览 24提问于2018-07-18得票数 1
回答已采纳
我正在尝试复制一个对象并使用Rambda的mergeRight函数更改属性。问题是它允许我合并接口定义中不存在的属性。
import {mergeRight} from "ramda";
export interface User {
readonly userId: string
readonly username: string
}
const user: User = {
userId: "12345",
username: "SomeUser"
}
//I want this to be a comp
浏览 34提问于2020-05-19得票数 0
回答已采纳
我想要一个返回Array的函数，但是我希望返回的Array是只读的，所以当我试图更改它的内容时，我应该得到一个警告/错误。
function getList(): readonly number[] {
return [1,2,3];
}
const list = getList();
list[2] = 5; // This should result in a compile error, the returned list should never be changed
这能在TypeScript中实现吗？
浏览 0提问于2018-04-24得票数 30
回答已采纳
我有以下数据设置(不声明为enum，因为它在TypeScript服务器代码和非TypeScript客户端代码之间共享)： import { enumType } from 'nexus';
export const TYPE_ENUM = Object.freeze({
H: 'H',
S: 'S',
});
export const TYPES = Object.freeze(Object.values(TYPE_ENUM));
export const MyType = enumType({
name: 'MyTyp
浏览 32提问于2020-06-20得票数 0
回答已采纳
在TypeScript中，我声明了如下接口：
export default interface MyDTO {
readonly num: string;
readonly entitle: string;
readonly trb: string;
readonly ucr: string;
readonly dcr: string;
readonly udm?: string;
readonly ddm?: string;
}
对于函数，我想访问一个属性值，其名称包含在一个变量中。
private doSomething(dto: M
浏览 5提问于2020-07-06得票数 9
回答已采纳
作为typescript的新手，我很难弄清楚这一点。 当我试图从redux存储中解构一个可选属性(它是一个对象)时，我得到了TS2339错误 这是typescript声明 export interface CoreState {
// readonly confirm?: CoreConfirm;
readonly confirm?: {
title: string
readonly content: string | React.ReactNode
readonly confirmText: string
readonly declineText:
浏览 52提问于2019-05-16得票数 0
回答已采纳
我使用类型记录来确保队列满足IQueue接口：
export interface IQueue {
id: string;
handler: () => void;
}
const queues:IQueue[] = [
{ id: 'a', handler: () => { } },
{ id: 'b' }, // handler is missing, should be an error
];
我还想要一个QueueId类型，它是所有ids的联合：
const queues = [
{ id: 'a', h
浏览 2提问于2022-02-28得票数 4
回答已采纳
1回答
为什么下面的代码是这样的呢？是TypeScript编译器中的错误还是缺少功能？
class MyType {
constructor(public readonly value1: string, public readonly value2: number) {
}
}
function myFunction(props: Partial<MyType>): void {
// Do something here
}
myFunction({ }); // Compiles
myFunction({ value1: 'string',
浏览 5提问于2017-02-20得票数 0
回答已采纳
我在一个产品页面上工作，有一个侧栏，其中有一些产品排序链接。 我所写的似乎可以工作，但我得到了一些TypeScript错误，我不确定如何修复。 const SORT_KEYS = {
BEST_SELLING: "Best selling",
CREATED_AT: "Created at",
PRICE: "Price",
PRODUCT_TYPE: "Product type",
RELEVANCE: "Relevance",
TITLE: "Title",
UPD
浏览 33提问于2021-10-17得票数 1
回答已采纳
我刚刚使用类星体CLI设置了一个新的Vue 3 项目。
我创建了一个新的src/firebase/config.ts文件来存储我的防火墙配置，如下所示：
// Import the functions you need from the SDKs you need
import { initializeApp } from 'firebase/app';
// TODO: Add SDKs for Firebase products that you want to use
// https://firebase.google.com/docs/web/setup#availa
浏览 13提问于2022-01-02得票数 2
回答已采纳
我正在尝试使用React属性作为访问对象的关键字。根据属性type是“实体”还是“大纲”，将决定我使用的是什么数据。嵌套的"solid“和"outline”对象中的对象键是不同的，因此Typescript会报错，因为它说它可能无法访问该键。如何让typescript变得快乐？ 代码在功能上工作，但不确定如何消除错误。 const icons = {
outline: {
default: "x1",
icon1: "icon1"
},
solid: {
default: "x2",
i
浏览 19提问于2021-09-26得票数 1
回答已采纳
4回答
在TypeScript中，const关键字不能用于声明类属性。这样做会导致编译器出现“类成员不能有'const‘关键字”的错误。
我发现自己需要在代码中明确指出属性不应该被更改。如果我试图在属性被声明后为它赋一个新值，我希望IDE或编译器出错。你们是如何做到这一点的？
我目前使用的是只读属性，但我不熟悉Typescript (和JavaScript)，不知道是否有更好的方法：
get MY_CONSTANT():number {return 10};
我使用的是typescript 1.8。有什么建议吗？
PS:我现在使用的是typescript 2.0.3，所以我接受了
浏览 70提问于2016-05-17得票数 551
回答已采纳
在下面的类型脚本代码中，无论name是"public“还是"private”，生成的java脚本代码都是相同的。
所以我的问题是，如何决定构造函数参数应该是公有的还是私有的？
// typescript code
class Animal {
constructor( public name: string) {
}
}
// generated JS code
var Animal = (function () {
function Animal(name) {
this.name = name;
}
return Animal;
}());
浏览 2提问于2016-08-02得票数 16
回答已采纳
我想创建一个接口来描述这样的结构...
const myObject: MyInterface = {
keys: ['a', 'b', 'c'], //Arbitrary length and string literals, array is readonly
props: {
a: null //OK
b: null //OK
c: null //OK
d: null //Invalid, 'd' is not in keys tuple
}
}
从我收集的信息来看，TypeScr
浏览 0提问于2021-02-28得票数 1
class __Constants__ {
[key: string]: string;
constructor(values: string[]) {
values.forEach((key) => {
this[key] = key;
});
}
}
const Constants = __Constants__ as {
new <T extends readonly string[]>(values: T): { [k in T[number]]: k };
};
const __colors__ = ["BLU
浏览 4提问于2021-02-26得票数 0
考虑下面的类： Class Coordinate {
public readonly latitude: number;
public readonly longitude: number;
constructor(latitude: number, longitude: number) {
this.latitude = latitude;
this.longitude = longitude;
} 现在，假设我有另一个名为CoordinateDto的类，它目前与class类完全相似，但它表示一个Dto对象。它的字段名依赖于其他一些可能会更改的代码，
浏览 26提问于2021-01-16得票数 0
2回答
我想知道是否有一种方法可以修改TypeScript中的函数并访问其中的原始函数。这是我如何让它工作的一个例子：
let obj = {
shout: () => {
console.log("AHHHHH!");
},
};
let s = obj.shout;
obj.shout = () => {
console.log("I'm going to shout.");
s();
};
obj.shout(); //-> "I'm going to shout", "AHH
浏览 9提问于2020-08-26得票数 2
我正在尝试设置一个typescript-react-eslint项目，但是无法避免这个样板组件的eslint错误：
import * as React from "react";
interface ButtonProps {
children?: React.ReactNode,
onClick?: (e: any) => void,
}
const styles = {
border: "1px solid #eee",
borderRadius: 3,
backgroundColor: "#FFFFFF",
浏览 6提问于2019-12-15得票数 23
回答已采纳
下面的regex模式有问题：
m).*?^([^n]*)(modified)([^n]*)$.*
我想把剪贴板换成
Clipboard := RegExReplace(Clipboard, "m).*?^([^n]*)(modified)([^n]*)$.*" ,"" )
消息来源如下：
Ask Question Interesting 326 Featured
Hot Week Month 1 vote 0 answers 12 views
Type Guard for empty object
浏览 1提问于2018-09-04得票数 1
回答已采纳
1回答
有人知道我为什么会犯这些错误吗？
修饰符“静态”对此项无效。
修饰符“readonly”对此项无效。
在以下代码的第3行：
public class YYY
{
private static readonly struct ZZZ
{
private int x = 0;
private int y = 0;
private int z = 0;
}
}
当我研究这个问题时，我只找到了接口的答案，我并不是很清楚，但我只想在我的课堂上创建一个静态的只读结构字段。
浏览 3提问于2013-02-26得票数 2
回答已采纳
我们正在将一个大型的项目转换为TypeScript。
我们有定义React类的现有文件：
// foo.js
class Foo extends React.Component { ... }
module.exports = Foo
我们希望在新的TypeScript文件中使用这些组件：
// bar.tsx
import Foo from "./foo"
export default class Bar extends React.Component<any, any> {
render() { return <Foo baz="buz
浏览 3提问于2017-08-05得票数 1
有人能建议在使用static之前还是之后使用readonly哪个语句更好吗？
private readonly static string s_profileFilename = "";
或
private static readonly string s_profileFilename = "";
浏览 0提问于2018-04-02得票数 3
回答已采纳
1回答
目前typescript具有此功能
class Param {
constructor(private a : string, readonly b : number) {}
}
当使用destructure参数时，需要手动赋值
class Option {
private a: string;
readonly b: number;
constructor({a, b} : {a : string, b : number}) {
this.a = a;
this.b = b;
}
}
有没有办法混合上面的例子，因
浏览 1提问于2021-10-20得票数 0
我有这样的代码：
interface Ev<K extends keyof WindowEventMap> {
readonly name: K;
readonly once?: boolean;
readonly callback: (ev: WindowEventMap[K]) => void;
}
function createEventListener<K extends keyof WindowEventMap>({ name, once = false, callback }: Ev<K>): Ev<K> {
浏览 4提问于2021-08-17得票数 1
回答已采纳
在TypeScript中禁止具有相同名称的公共getter和私有设置器，这一点在这里的各种问题中已经讨论过。
我的主要编程语言是C#，它非常好。我还认为它是一个有用的构造，老实说，我也不认为在TypeScript中允许这样做会有什么问题。
为什么TypeScript禁止这样做？这个问题不是关于解决办法或类似的问题，我只是想知道这个设计的原因。。
编辑:代码示例可以在上找到。
浏览 0提问于2016-02-16得票数 10
我试图将一个类型记录文件转换为js，使用的是一饮而尽的类型记录。
好像没翻译出来。
吞咽文件：
var ts = require('gulp-typescript');
gulp.task('tsToJs', function () {
return gulp.src('./config.ts')
.pipe(ts({
moduleResolution: 'node',
target:'es5',
allowJs:true
浏览 3提问于2017-02-03得票数 0
回答已采纳
我有一个基于类的React组件，它接受函数作为支柱。
该组件最初是一个无状态函数组件，它接受相同的函数，没有任何TypeScript错误。
既然我已经将它转换为类组件，那么当我调用函数：Property 'onRouteChange' does not exist on type 'Readonly<{}> & Readonly<{ children?: ReactNode; }>'时，会得到一个错误
以及当我在道具：Property 'onRouteChange' is missing in type '
浏览 1提问于2020-07-17得票数 1
回答已采纳
因此，基本上，以下是我正在努力(到目前为止失败)实现的目标：
我希望eslint同时链接我的.vue文件和.ts文件，对两者使用相同的TypeScript规则(我的每个组件都使用<script lang="ts" setup>)，使用my tsconfig.json作为两者的基本TS配置。
现在我发现的困难就在这里。据我所知，当您为eslint添加类型记录插件时，需要显式地告诉您的tsconfig.json在哪里。它向展示了如何做到这一点：
module.exports = {
root: true,
parser: '@typescript-esl
浏览 13提问于2022-08-28得票数 1
我正在尝试创建一个具有以下结构的小型库：
library('input').method()
这是代码( addQuotes方法向string输入添加引号)：
const library = function (text: string) {
interface ValueObject {
addQuotes?: Function
} // Without this, I get "Property 'to' does not exist on type '{}'."
浏览 0提问于2021-08-04得票数 2
回答已采纳
如果我在typescript中有以下接口
interface Member {
readonly id: number;
readonly name: string;
readonly email: string;
groups: <ReadonlyArray>Group
}
interface Group {
readonly id: number;
readonly name: string;
readonly active: boolean;
}
数据应该是这样的
member {
id: 1,
name: 'J
浏览 0提问于2020-08-01得票数 1
在TypeScript中，我可以创建一个函数buildOptions(options, default)，其中options是任何东西的数组，default是必须来自选项数组的值。我相信，这是因为和。
const buildOptions = <T, K extends T[][number]>(
options: Readonly<T[]>,
defaultOption: K
) => ({
options,
default: options.findIndex(x => x === defaultOption),
});
// work
浏览 0提问于2019-08-21得票数 1
回答已采纳
我正在使用TypeScript的TypeScript库。它为TypeScript提供了类型绑定，但所有示例都在JavaScript中，我对TypeScript非常陌生。
设置代码如下所示：
<GoogleLogin
clientId="client-id-value"
onSuccess={successResponseGoogle}
onFailure={failureResponseGoogle}
cookiePolicy={'single_host_origin'}
/>
在TypeScript中，onS
浏览 1提问于2020-04-18得票数 4
回答已采纳
我想把typescript升级到4.1版本，因为它是adds support to template literal types的。 但是，当我在functions目录中运行npm i typescript时，它没有升级到"^3.9.10“以上。 package.json： {
"name": "functions",
"scripts": {
"lint": "eslint \"src/**/*\"",
"build": "tsc"
浏览 11提问于2021-10-10得票数 0
回答已采纳
我在TypeScript中有以下DTO接口：
interface ProductDto {
readonly productId: number;
readonly name : string;
}
interface FirstPartyProductDto extends ProductDto {
readonly foo: string;
readonly bar: number;
}
我的应用程序主要使用服务器端呈现，但行为像SPA (此项目不使用任何SPA框架，如角，Vue等)。为了帮助在浏览器加载页面时进行补液处理，额外的数据将呈现给dat
浏览 3提问于2020-09-06得票数 1
回答已采纳
我一直在和Inferring types of deeply nested object in Typescript玩。 原始代码 const theme = {
button: { margin: { sm: "sm" } },
form: { padding: { sm: "sm1" } }
} as const;
type Theme = typeof theme;
const getStyle = <
K extends keyof Theme,
S extends keyof Theme[K],
M
浏览 16提问于2021-03-26得票数 2
回答已采纳
我刚刚检查了一些代码，注意到有人将member标记为readonly private。这与private readonly有什么不同吗？
示例：
readonly private MyClass myInstance = new MyClass();
我以前从未见过这种情况。我总是先用private，再用readonly。我在MSDN (甚至在C#规范)上找不到任何东西。这提到了访问修饰符可以按什么顺序出现。有没有什么文章/参考资料？
浏览 0提问于2012-08-13得票数 4
回答已采纳
我试图获得react-hooks规则，但它似乎不适用于我的设置(VSCode，CRA，airbnb，tslint，更漂亮)。
这是我的.eslintrc.json在崩溃前的情况：
{
"env": {
"browser": true,
"es6": true,
"jest": true
},
"extends": ["plugin:react/recommended", "airbnb", "prettier"],
"g
浏览 0提问于2020-04-29得票数 0
回答已采纳
在回答这个问题时，Promise.all throwing type error when calling multiple async functions with different return types我可以解决这个难题。 我们有以下三个函数： const func1 = (): RegExp => { throw new Error(); }
const func2 = (): number => { throw new Error(); }
const func3 = (): Date => { throw new Error(); }
const func
浏览 24提问于2019-05-16得票数 1
回答已采纳
这个问题：
询问如何创建一个需要两个相同长度的数组的函数。
这是我的解决方案。
type ArrayOfFixedLength<T extends any, N extends number> = readonly T[] & { length: N };
const a1: ArrayOfFixedLength<number, 2> = [1] as const; //expected error
const a2: ArrayOfFixedLength<number, 2> = [1, 2] as const;
function my
浏览 0提问于2020-06-05得票数 1
回答已采纳
2回答
对只读修饰符抛出错误
、、、
我刚刚升级了我的应用程序，以使用Angular 2 rc.6和Angular Material 2 alpha 8-1。这些包依赖于typescript 2，后者使用新的readonly修饰符。
我使用gulp-typescript编译我的.ts文件，现在我从使用readonly修饰符的文件中得到了很多错误。例如，这一行：
readonly change: Observable<MdButtonToggleChange>;
在编译期间抛出这些错误：
错误TS1005：'=‘预期。
错误TS1005：';‘预期。
错误TS1005：‘’预期。
我认为这可能是因
浏览 4提问于2016-09-03得票数 1
回答已采纳
这是Infer shape of result of Object.fromEntries() in TypeScript的延续，尽管您可能不需要阅读它就能知道发生了什么。 我正在尝试扩展Array原型，以便在Object.fromEntries()周围添加一个快捷方式，前提是数组的形状适合它。 // the aforementioned question uses this signature for Object.fromEntries() replacing `this`
// with a parameter `array`
interface Array<T> {
浏览 52提问于2020-07-24得票数 1
回答已采纳
我在TypeScript中使用ESLint。当我尝试使用一些必需的参数创建函数类型时，ESLint显示错误eslint: no-unused-vars。 type Func = (paramA: number) => void这里，根据ESLint，paramA是未使用的变量。 我的.eslintrc.json文件 {
"env": {
"browser": true,
"es6": true
},
"extends": [
"eslint:r
浏览 220提问于2020-10-01得票数 2
回答已采纳
2回答
我在下面的TypeScript代码中得到了Eslint警告： “在function.eslint(@typescript-eslint/explicit-function-return-type)”上缺少返回类型警告引用了map函数中的λ。 private headerSelectionChanged(event): void {
const { checked } = event.syntheticEvent.target;
const newGridData = this.props.gridData.map(item => Object.assign(item,
浏览 28提问于2019-05-15得票数 1
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
实时音视频
即时通信 IM活动推荐
腾讯云开发者
