![\"1716476306\"](\"https:\/\/zhuxinyong.com\/wp-content\/uploads\/2024\/05\/1716476306.png\")
<\/p>\n<\/p>\n
\u5728 TypeScript \u4e2d\uff0c \u5f53\u4f60\u4f7f\u7528 \u5728\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\uff0c \u5728\u8fd9\u4e2a\u4f8b\u5b50\u4e2d\uff0c \u5728\u8fd9\u4e2a\u793a\u4f8b\u4e2d\uff0c \u5e38\u91cf\u5bf9\u8c61\uff1a<\/strong> \u5c06\u5bf9\u8c61\u5b57\u9762\u91cf\u65ad\u8a00\u4e3a\u53ea\u8bfb\u7684\u5b57\u9762\u91cf\u7c7b\u578b\uff0c\u4ee5\u786e\u4fdd\u5b83\u4eec\u5728\u540e\u7eed\u4ee3\u7801\u4e2d\u4e0d\u88ab\u4fee\u6539\u3002<\/p>\n<\/li>\n \u5e38\u91cf\u6570\u7ec4\uff1a<\/strong> \u5c06\u6570\u7ec4\u5b57\u9762\u91cf\u65ad\u8a00\u4e3a\u53ea\u8bfb\u7684\u5b57\u9762\u91cf\u7c7b\u578b\uff0c\u4ee5\u786e\u4fdd\u6570\u7ec4\u5143\u7d20\u4e0d\u88ab\u4fee\u6539\u3002<\/p>\n<\/li>\nas const<\/code> \u662f\u4e00\u79cd\u7c7b\u578b\u65ad\u8a00\u7684\u7528\u6cd5\uff0c\u5b83\u7528\u4e8e\u544a\u8bc9\u7f16\u8bd1\u5668\u5c06\u67d0\u4e2a\u4f4d\u7f6e\u7684\u7c7b\u578b\u89c6\u4e3a\u4e00\u4e2a\u5e38\u91cf\uff08const<\/code>\uff09\u7c7b\u578b\u3002\u8fd9\u5728 TypeScript \u7684\u7c7b\u578b\u5b88\u536b\u548c\u7c7b\u578b\u7ec6\u5316\u4e2d\u975e\u5e38\u6709\u7528\uff0c\u5c24\u5176\u662f\u5728\u5904\u7406\u5b57\u9762\u91cf\u7c7b\u578b\u6216\u786e\u4fdd\u67d0\u4e2a\u4f4d\u7f6e\u7684\u503c\u4e0d\u4f1a\u88ab\u4fee\u6539\u65f6\u3002<\/p>\n<\/span><\/a>\u57fa\u672c\u7528\u6cd5<\/h3>\n
as const<\/code> \u65f6\uff0c\u4f60\u544a\u8bc9 TypeScript \u7f16\u8bd1\u5668\uff0c\u67d0\u4e2a\u4f4d\u7f6e\u7684\u503c\u662f\u5e38\u91cf\uff0c\u4e0d\u5e94\u8be5\u88ab\u91cd\u65b0\u8d4b\u503c\u3002<\/p>\nconst config = {\n apiEndpoint: "https:\/\/api.example.com",\n timeout: 5000,\n} as const;\n\n\/\/ \u4e0b\u9762\u7684\u4ee3\u7801\u5c06\u5bfc\u81f4 TypeScript \u7f16\u8bd1\u9519\u8bef\uff0c\u56e0\u4e3a\u6839\u636e as const\uff0cconfig \u88ab\u89c6\u4e3a\u53ea\u8bfb\u7684\n\/\/ config.apiEndpoint = "https:\/\/new-api.example.com";\n<\/code><\/pre>\nconfig<\/code> \u5bf9\u8c61\u88ab\u65ad\u8a00\u4e3a as const<\/code>\uff0c\u8fd9\u610f\u5473\u7740\u5b83\u7684\u5c5e\u6027 apiEndpoint<\/code> \u548c timeout<\/code> \u88ab\u63a8\u65ad\u4e3a\u53ea\u8bfb\u5c5e\u6027\u3002<\/p>\n<\/span><\/a>\u5728\u7c7b\u578b\u5b88\u536b\u4e2d\u4f7f\u7528<\/h3>\n
as const<\/code> \u5728\u7c7b\u578b\u5b88\u536b\u4e2d\u7279\u522b\u6709\u7528\uff0c\u56e0\u4e3a\u5b83\u53ef\u4ee5\u5e2e\u52a9\u786e\u4fdd\u67d0\u4e2a\u4f4d\u7f6e\u7684\u503c\u662f\u5b57\u9762\u91cf\u7c7b\u578b\u3002<\/p>\nfunction isStringLiteral(value: any): value is string {\n return typeof value === "string" && value !== __VUE_OPTIONS_API__;\n}\n\nfunction processValue(value: string | number | boolean) {\n if (isStringLiteral(value)) {\n \/\/ \u5728\u8fd9\u4e2a\u5757\u5185\uff0cTypeScript \u77e5\u9053 value \u662f\u4e00\u4e2a\u5b57\u7b26\u4e32\u5b57\u9762\u91cf\n value.toLowerCase(); \/\/ \u6ca1\u6709\u9519\u8bef\n }\n}\n<\/code><\/pre>\n<\/span><\/a>\u5728\u6cdb\u578b\u4e2d\u4f7f\u7528<\/h3>\n
as const<\/code> \u4e5f\u53ef\u4ee5\u4e0e\u6cdb\u578b\u7ed3\u5408\u4f7f\u7528\uff0c\u4ee5\u786e\u4fdd\u6cdb\u578b\u53c2\u6570\u662f\u5e38\u91cf\u7c7b\u578b\u3002<\/p>\ntype Constify<T> = T extends object ? { [K in keyof T]: T[K] as const } : T;\n\nconst config = {\n apiEndpoint: "https:\/\/api.example.com",\n timeout: 5000,\n} as Constify<typeof config>;\n\n\/\/ \u540c\u4e0a\uff0c\u8fd9\u5c06\u5bfc\u81f4\u7f16\u8bd1\u9519\u8bef\n\/\/ config.apiEndpoint = "https:\/\/new-api.example.com";\n<\/code><\/pre>\nConstify<\/code> \u6cdb\u578b\u786e\u4fdd\u4e86 config<\/code> \u5bf9\u8c61\u7684\u6bcf\u4e2a\u5c5e\u6027\u90fd\u88ab\u63a8\u65ad\u4e3a\u5e38\u91cf\u3002<\/p>\n<\/span><\/a>\u4f7f\u7528
as const<\/code> \u7684\u597d\u5904<\/h3>\n\n
as const<\/code> \u589e\u52a0\u4e86\u4ee3\u7801\u7684\u7c7b\u578b\u5b89\u5168\u6027\uff0c\u56e0\u4e3a\u5b83\u786e\u4fdd\u4e86\u503c\u4e0d\u4f1a\u88ab\u610f\u5916\u4fee\u6539\u3002<\/li>\nas const<\/code> \u53ef\u4ee5\u5e2e\u52a9\u7f16\u8bd1\u5668\u7406\u89e3\u67d0\u4e2a\u4f4d\u7f6e\u7684\u503c\u662f\u4e0d\u53ef\u53d8\u7684\u3002<\/li>\n<\/ul>\nas const<\/code> \u662f TypeScript \u4e2d\u4e00\u4e2a\u76f8\u5bf9\u8f83\u65b0\u7684\u529f\u80fd\uff0c\u5b83\u5728 TypeScript 3.4 \u53ca\u66f4\u9ad8\u7248\u672c\u4e2d\u53ef\u7528\u3002\u901a\u8fc7\u4f7f\u7528 as const<\/code>\uff0c\u4f60\u53ef\u4ee5\u7f16\u5199\u51fa\u66f4\u5b89\u5168\u3001\u66f4\u53ef\u9884\u6d4b\u7684\u7c7b\u578b\u4ee3\u7801\u3002<\/p>\nas const<\/code> \u662f TypeScript \u4e2d\u7684\u4e00\u79cd\u7c7b\u578b\u65ad\u8a00\u8bed\u6cd5\uff0c\u7528\u4e8e\u5c06\u8868\u8fbe\u5f0f\u65ad\u8a00\u4e3a\u53ea\u8bfb\uff08readonly\uff09\u7684\u5b57\u9762\u91cf\u7c7b\u578b\u3002\u5b83\u7684\u4e3b\u8981\u4f5c\u7528\u662f\u544a\u8bc9 TypeScript \u7f16\u8bd1\u5668\uff0c\u67d0\u4e2a\u8868\u8fbe\u5f0f\u5e94\u8be5\u88ab\u89c6\u4e3a\u4e00\u4e2a\u4e0d\u53ef\u53d8\u7684\u5e38\u91cf\u503c\uff0c\u800c\u4e0d\u662f\u53ef\u53d8\u7684\u53d8\u91cf\u3002<\/p>\n<\/span><\/a>\u793a\u4f8b\uff1a<\/h3>\n
const person = {\n name: 'Alice',\n age: 30,\n} as const;\n\n\/\/ person \u53d8\u91cf\u88ab\u65ad\u8a00\u4e3a\u53ea\u8bfb\u7684\u5b57\u9762\u91cf\u7c7b\u578b\n\/\/ \u56e0\u6b64\uff0c\u5c1d\u8bd5\u4fee\u6539\u5176\u5c5e\u6027\u4f1a\u5bfc\u81f4\u7f16\u8bd1\u9519\u8bef\n\/\/ person.name = 'Bob'; \/\/ Error: Cannot assign to 'name' because it is a read-only property\n\/\/ person.age = 31; \/\/ Error: Cannot assign to 'age' because it is a read-only property\n\nconsole.log(person); \/\/ Output: { name: 'Alice', age: 30 }\n<\/code><\/pre>\nperson<\/code> \u88ab\u65ad\u8a00\u4e3a\u53ea\u8bfb\u7684\u5b57\u9762\u91cf\u7c7b\u578b\uff0c\u6240\u4ee5\u6211\u4eec\u65e0\u6cd5\u4fee\u6539\u5b83\u7684\u5c5e\u6027\u3002\u8fd9\u4e2a\u7279\u6027\u5bf9\u4e8e\u786e\u4fdd\u4e00\u4e9b\u5e38\u91cf\u503c\u5728\u7a0b\u5e8f\u4e2d\u4e0d\u88ab\u610f\u5916\u4fee\u6539\u975e\u5e38\u6709\u7528\u3002<\/p>\n<\/span><\/a>\u7528\u9014\uff1a<\/h3>\n
\n