{"id":4384,"date":"2024-07-29T11:03:08","date_gmt":"2024-07-29T03:03:08","guid":{"rendered":"https:\/\/www.zeroheart.xyz\/wordpress\/?p=4384"},"modified":"2024-07-29T11:03:08","modified_gmt":"2024-07-29T03:03:08","slug":"typescript-%e5%bf%ab%e9%80%9f%e5%85%a5%e9%97%a8","status":"publish","type":"post","link":"https:\/\/www.zeroheart.xyz\/wordpress\/?p=4384","title":{"rendered":"TypeScript \u5feb\u901f\u5165\u95e8"},"content":{"rendered":"\n<h2 class=\"wp-block-heading\"><\/h2>\n\n\n\n<h3 class=\"wp-block-heading\">\u5b89\u88c5 TypeScript<\/h3>\n\n\n\n<p>\u9996\u5148\uff0c\u4f60\u9700\u8981\u5b89\u88c5 TypeScript\u3002\u4f60\u53ef\u4ee5\u4f7f\u7528 npm \u6765\u5b89\u88c5 TypeScript\uff1a<\/p>\n\n\n\n<p>bash<\/p>\n\n\n\n<p>\u590d\u5236\u4ee3\u7801<\/p>\n\n\n\n<p><code>npm install -g typescript<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u7f16\u8bd1 TypeScript<\/h3>\n\n\n\n<p>TypeScript \u6587\u4ef6\u4ee5 <code>.ts<\/code> \u4e3a\u6269\u5c55\u540d\u3002\u8981\u5c06 TypeScript \u6587\u4ef6\u7f16\u8bd1\u4e3a JavaScript \u6587\u4ef6\uff0c\u53ef\u4ee5\u4f7f\u7528 <code>tsc<\/code> \u547d\u4ee4\uff1a<\/p>\n\n\n\n<p>bash<\/p>\n\n\n\n<p>\u590d\u5236\u4ee3\u7801<\/p>\n\n\n\n<p><code>tsc filename.ts<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u57fa\u672c\u7c7b\u578b<\/h3>\n\n\n\n<p>TypeScript \u63d0\u4f9b\u4e86\u591a\u79cd\u57fa\u672c\u7c7b\u578b\uff0c\u7c7b\u4f3c\u4e8e JavaScript\uff0c\u4f46\u589e\u52a0\u4e86\u7c7b\u578b\u6ce8\u91ca\u3002<\/p>\n\n\n\n<p>typescript<\/p>\n\n\n\n<p>\u590d\u5236\u4ee3\u7801<\/p>\n\n\n\n<p><code>let isDone: boolean = false; let age: number = 30; let userName: string = \"John\"; let list: number[] = [1, 2, 3]; let listGeneric: Array&lt;number&gt; = [1, 2, 3]; let tuple: [string, number] = [\"hello\", 10];<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u679a\u4e3e<\/h3>\n\n\n\n<p>\u679a\u4e3e\u7c7b\u578b\u7528\u4e8e\u5b9a\u4e49\u6570\u503c\u96c6\u5408\u3002<\/p>\n\n\n\n<p>typescript<\/p>\n\n\n\n<p>\u590d\u5236\u4ee3\u7801<\/p>\n\n\n\n<p><code>enum Color {Red, Green, Blue} let c: Color = Color.Green;<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Any \u548c Unknown<\/h3>\n\n\n\n<p><code>any<\/code> \u7c7b\u578b\u53ef\u4ee5\u662f\u4efb\u4f55\u7c7b\u578b\uff0c<code>unknown<\/code> \u7c7b\u578b\u4e5f\u662f\u4efb\u4f55\u7c7b\u578b\u4f46\u66f4\u5b89\u5168\u3002<\/p>\n\n\n\n<p>typescript<\/p>\n\n\n\n<p>\u590d\u5236\u4ee3\u7801<\/p>\n\n\n\n<p><code>let notSure: any = 4; notSure = \"maybe a string\"; notSure = false; let uncertain: unknown = 4; uncertain = \"could be a string too\";<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">Void, Null \u548c Undefined<\/h3>\n\n\n\n<p><code>void<\/code> \u7c7b\u578b\u901a\u5e38\u7528\u4e8e\u51fd\u6570\u6ca1\u6709\u8fd4\u56de\u503c\u65f6\u3002<\/p>\n\n\n\n<p>typescript<\/p>\n\n\n\n<p>\u590d\u5236\u4ee3\u7801<\/p>\n\n\n\n<p><code>function warnUser(): void { console.log(\"This is my warning message\"); } let u: undefined = undefined; let n: null = null;<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u51fd\u6570<\/h3>\n\n\n\n<p>TypeScript \u5141\u8bb8\u4e3a\u51fd\u6570\u7684\u53c2\u6570\u548c\u8fd4\u56de\u503c\u6307\u5b9a\u7c7b\u578b\u3002<\/p>\n\n\n\n<p>typescript<\/p>\n\n\n\n<p>\u590d\u5236\u4ee3\u7801<\/p>\n\n\n\n<p><code>function add(x: number, y: number): number { return x + y; } let myAdd = function(x: number, y: number): number { return x + y; };<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u53ef\u9009\u53c2\u6570\u548c\u9ed8\u8ba4\u53c2\u6570<\/h3>\n\n\n\n<p>typescript<\/p>\n\n\n\n<p>\u590d\u5236\u4ee3\u7801<\/p>\n\n\n\n<p><code>function buildName(firstName: string, lastName?: string): string { return firstName + \" \" + (lastName || \"\"); } function buildNameWithDefault(firstName: string, lastName: string = \"Smith\"): string { return firstName + \" \" + lastName; }<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u63a5\u53e3<\/h3>\n\n\n\n<p>\u63a5\u53e3\u7528\u4e8e\u5b9a\u4e49\u5bf9\u8c61\u7684\u7c7b\u578b\u3002<\/p>\n\n\n\n<p>typescript<\/p>\n\n\n\n<p>\u590d\u5236\u4ee3\u7801<\/p>\n\n\n\n<p><code>interface Person { firstName: string; lastName: string; } function greeter(person: Person) { return \"Hello, \" + person.firstName + \" \" + person.lastName; } let user = { firstName: \"Jane\", lastName: \"Doe\" }; console.log(greeter(user));<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u7c7b<\/h3>\n\n\n\n<p>TypeScript \u652f\u6301\u57fa\u4e8e\u7c7b\u7684\u9762\u5411\u5bf9\u8c61\u7f16\u7a0b\u3002<\/p>\n\n\n\n<p>typescript<\/p>\n\n\n\n<p>\u590d\u5236\u4ee3\u7801<\/p>\n\n\n\n<p><code>class Animal { private name: string; constructor(theName: string) { this.name = theName; } move(distanceInMeters: number = 0) { console.log(`${this.name} moved ${distanceInMeters}m.`); } } let dog = new Animal(\"Dog\"); dog.move(10);<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u7ee7\u627f<\/h3>\n\n\n\n<p>\u7c7b\u53ef\u4ee5\u7ee7\u627f\u5176\u4ed6\u7c7b\u3002<\/p>\n\n\n\n<p>typescript<\/p>\n\n\n\n<p>\u590d\u5236\u4ee3\u7801<\/p>\n\n\n\n<p><code>class Dog extends Animal { constructor(name: string) { super(name); } bark() { console.log(\"Woof! Woof!\"); } } let dog = new Dog(\"Rex\"); dog.bark(); dog.move(10);<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u6cdb\u578b<\/h3>\n\n\n\n<p>\u6cdb\u578b\u7528\u4e8e\u521b\u5efa\u53ef\u91cd\u7528\u7684\u7ec4\u4ef6\u3002<\/p>\n\n\n\n<p>typescript<\/p>\n\n\n\n<p>\u590d\u5236\u4ee3\u7801<\/p>\n\n\n\n<p><code>function identity&lt;T&gt;(arg: T): T { return arg; } let output = identity&lt;string&gt;(\"myString\"); \/\/ \u7c7b\u578b\u53c2\u6570\u660e\u786e\u5b9a\u4e49 let output2 = identity(\"myString\"); \/\/ \u7c7b\u578b\u53c2\u6570\u63a8\u65ad<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u6a21\u5757<\/h3>\n\n\n\n<p>TypeScript \u652f\u6301 ES6 \u6a21\u5757\u8bed\u6cd5\u3002<\/p>\n\n\n\n<p>typescript<\/p>\n\n\n\n<p>\u590d\u5236\u4ee3\u7801<\/p>\n\n\n\n<p><code>\/\/ math.ts export function add(x: number, y: number): number { return x + y; } \/\/ main.ts import { add } from '.\/math'; console.log(add(5, 3));<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u7c7b\u578b\u522b\u540d<\/h3>\n\n\n\n<p>\u7c7b\u578b\u522b\u540d\u7528\u4e8e\u4e3a\u7c7b\u578b\u521b\u5efa\u65b0\u540d\u79f0\u3002<\/p>\n\n\n\n<p>typescript<\/p>\n\n\n\n<p>\u590d\u5236\u4ee3\u7801<\/p>\n\n\n\n<p><code>type Name = string; type NameResolver = () =&gt; string; type NameOrResolver = Name | NameResolver; function getName(n: NameOrResolver): Name { if (typeof n === \"string\") { return n; } else { return n(); } }<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u7c7b\u578b\u65ad\u8a00<\/h3>\n\n\n\n<p>\u7c7b\u578b\u65ad\u8a00\u7528\u4e8e\u544a\u8bc9\u7f16\u8bd1\u5668\u67d0\u4e2a\u503c\u7684\u5177\u4f53\u7c7b\u578b\u3002<\/p>\n\n\n\n<p>typescript<\/p>\n\n\n\n<p>\u590d\u5236\u4ee3\u7801<\/p>\n\n\n\n<p><code>let someValue: any = \"this is a string\"; let strLength: number = (someValue as string).length;<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u7c7b\u578b\u63a8\u65ad<\/h3>\n\n\n\n<p>TypeScript \u4f1a\u6839\u636e\u53d8\u91cf\u7684\u503c\u63a8\u65ad\u5176\u7c7b\u578b\u3002<\/p>\n\n\n\n<p>typescript<\/p>\n\n\n\n<p>\u590d\u5236\u4ee3\u7801<\/p>\n\n\n\n<p><code>let x = 3; \/\/ x \u88ab\u63a8\u65ad\u4e3a number<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u8054\u5408\u7c7b\u578b<\/h3>\n\n\n\n<p>\u8054\u5408\u7c7b\u578b\u5141\u8bb8\u4e00\u4e2a\u53d8\u91cf\u6709\u591a\u79cd\u7c7b\u578b\u3002<\/p>\n\n\n\n<p>typescript<\/p>\n\n\n\n<p>\u590d\u5236\u4ee3\u7801<\/p>\n\n\n\n<p><code>let value: string | number = \"hello\"; value = 42;<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u4ea4\u53c9\u7c7b\u578b<\/h3>\n\n\n\n<p>\u4ea4\u53c9\u7c7b\u578b\u7528\u4e8e\u5c06\u591a\u4e2a\u7c7b\u578b\u5408\u5e76\u4e3a\u4e00\u4e2a\u7c7b\u578b\u3002<\/p>\n\n\n\n<p>typescript<\/p>\n\n\n\n<p>\u590d\u5236\u4ee3\u7801<\/p>\n\n\n\n<p><code>interface A { a: string; } interface B { b: number; } let ab: A &amp; B = { a: \"foo\", b: 42 };<\/code><\/p>\n\n\n\n<h3 class=\"wp-block-heading\">\u7c7b\u578b\u4fdd\u62a4<\/h3>\n\n\n\n<p>\u7c7b\u578b\u4fdd\u62a4\u7528\u4e8e\u5728\u8fd0\u884c\u65f6\u68c0\u67e5\u7c7b\u578b\u3002<\/p>\n\n\n\n<p>typescript<\/p>\n\n\n\n<p>\u590d\u5236\u4ee3\u7801<\/p>\n\n\n\n<p><code>function isString(x: any): x is string { return typeof x === \"string\"; } function example(x: string | number) { if (isString(x)) { console.log(x.toUpperCase()); \/\/ \u5728\u8fd9\u91cc x \u662f string } else { console.log(x.toFixed(2)); \/\/ \u5728\u8fd9\u91cc x \u662f number } }<\/code><\/p>\n","protected":false},"excerpt":{"rendered":"<p>\u5b89\u88c5 TypeScript \u9996\u5148\uff0c\u4f60\u9700\u8981\u5b89\u88c5 TypeScript\u3002\u4f60\u53ef\u4ee5\u4f7f\u7528 npm \u6765\u5b89\u88c5 TypeScr [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[284],"tags":[],"_links":{"self":[{"href":"https:\/\/www.zeroheart.xyz\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/4384"}],"collection":[{"href":"https:\/\/www.zeroheart.xyz\/wordpress\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.zeroheart.xyz\/wordpress\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.zeroheart.xyz\/wordpress\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.zeroheart.xyz\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=4384"}],"version-history":[{"count":2,"href":"https:\/\/www.zeroheart.xyz\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/4384\/revisions"}],"predecessor-version":[{"id":4386,"href":"https:\/\/www.zeroheart.xyz\/wordpress\/index.php?rest_route=\/wp\/v2\/posts\/4384\/revisions\/4386"}],"wp:attachment":[{"href":"https:\/\/www.zeroheart.xyz\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=4384"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.zeroheart.xyz\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=4384"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.zeroheart.xyz\/wordpress\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=4384"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}